Cómo crear un favicon para tu web

El favicon es el iconito de la pestaña del navegador, de los marcadores, de la pantalla de inicio del iPhone y de los resultados de búsqueda de Google. Antes acertar con él implicaba hacer malabares con una docena de tamaños; hoy con cuatro archivos cubres todas las plataformas.

Los archivos que necesitas de verdad

favicon.ico con 16, 32 y 48 px — navegadores antiguos, accesos directos de Windows, el rastreador de Google.
apple-touch-icon.png a 180 px — pantalla de inicio de iOS.
icon-192.png e icon-512.png — Android y el manifest de la web app (sitios instalables, pantallas de carga).
site.webmanifest — apunta a los dos PNG.

Genera todos a la vez

Dibuja un logo cuadrado. Las formas simples y uno o dos colores se leen mejor a 16 px; el texto no.
Abre Generador de favicon y suelta el logo — SVG es ideal porque cada tamaño se rasteriza con nitidez; un PNG de 512 px también sirve.
Descarga el ZIP y copia los archivos a la raíz de tu web.

Generador de faviconCrea un favicon.ico (16/32/48), apple-touch-icon e iconos PNG desde PNG, JPG, WebP o SVG. Todos los tamaños en un ZIP, generado en tu navegador.

Añade esto a tu <head>:

<link rel="icon" href="/favicon.ico" sizes="any">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

Problemas habituales

El logo no es cuadrado. El generador lo centra con relleno transparente; para un icono más ajustado, recórtalo antes a un cuadrado con Recortar imagen.
Sigue apareciendo el favicon antiguo. Los navegadores cachean los favicons de forma agresiva. Cambia el nombre del archivo o añade ?v=2 al enlace.
Pestañas oscuras. Un logo negro desaparece en un tema oscuro del navegador. Dale una forma de fondo con relleno.

Convertir SVG a PNG onlineConvierte SVG a PNG de cualquier tamaño en tu navegador. Define el ancho, conserva la transparencia, convierte por lotes y descarga un ZIP. Sin subir nada.

Publicado el 2026-09-21