Qué tamaños de favicon necesita una web hoy (y cuáles ya no)

Una web actual necesita cinco archivos de favicon, no los veinte que generaban las herramientas de hace una década: un favicon.ico para navegadores antiguos y buscadores, un favicon.svg que escala a cualquier tamaño y admite modo oscuro, un apple-touch-icon.png de 180 píxeles para iOS y dos PNG de 192 y 512 píxeles declarados en el manifest para Android y las aplicaciones web instalables. Con eso se cubren pestañas, marcadores, pantallas de inicio y los resultados de Google.

Este artículo explica qué hace cada archivo, qué etiquetas van en el <head>, qué exige Google para mostrar el icono en los resultados y qué tamaños puedes dejar de generar.

Los cinco archivos

Archivo	Tamaño	Para qué
/favicon.ico	32×32 (opcionalmente también 16×16 y 48×48 dentro del mismo .ico)	Navegadores antiguos, lectores de feeds y buscadores que piden /favicon.ico por convención aunque no esté declarado.
/favicon.svg	Vectorial	Navegadores modernos. Se ve nítido en cualquier densidad y puede cambiar de color con prefers-color-scheme.
/apple-touch-icon.png	180×180	Icono al añadir la web a la pantalla de inicio en iOS y iPadOS. Safari lo busca también por convención en la raíz.
/icons/icon-192.png	192×192	Android y aplicaciones web instalables (declarado en el manifest).
/icons/icon-512.png	512×512	Pantalla de inicio (splash) e icono de alta resolución en el manifest.

Y las etiquetas que lo unen todo:

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />

{
  "name": "AIMRAN Blog",
  "icons": [
    { "src": "/icons/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icons/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icons/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

El orden de las dos primeras etiquetas importa: los navegadores que entienden SVG eligen el SVG; los que no, se quedan con el .ico. El atributo sizes="32x32" en el .ico ayuda a esa elección.

Por qué un SVG como favicon

Un SVG pesa poco, se ve perfecto en pantallas de alta densidad y permite adaptarse al modo oscuro desde dentro del propio archivo:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    path { fill: #1d1d1f; }
    @media (prefers-color-scheme: dark) { path { fill: #f5f5f7; } }
  </style>
  <path d="…" />
</svg>

Firefox incluso reproduce animaciones CSS dentro del favicon SVG; Chrome no las anima en la pestaña (si quieres animación ahí, hace falta JavaScript que vaya cambiando el icono, como hacemos en este blog). Safari admite SVG como favicon desde la versión 12 pero sigue prefiriendo el apple-touch-icon para la pantalla de inicio.

Dos cuidados con el SVG: que no dependa de fuentes externas (conviértelas a trazados) y que el dibujo sea legible a 16 píxeles: un logotipo con texto pequeño se convierte en una mancha.

Lo que exige Google para mostrar el favicon en los resultados

Según la documentación de Google Search:

• El favicon debe ser un múltiplo de 48 píxeles cuadrado (48×48, 96×96, 144×144…) o un SVG. Un .ico con varios tamaños sirve si incluye uno de 48×48.
• Debe estar declarado con <link rel="icon"> en la página de inicio del dominio y ser rastreable (no bloqueado por robots.txt).
• Debe ser estable (misma URL) y representar la marca del sitio; Google puede no mostrar iconos que considere inapropiados.
• El icono se asocia a la página de inicio y se aplica a todo el sitio; un favicon distinto por sección no se refleja en los resultados.

Google rastrea el favicon con un crawler específico y puede tardar días en actualizarlo tras un cambio.

Qué puedes dejar de generar

• Los PNG de 57, 60, 72, 76, 114, 120, 144 y 152 px para versiones antiguas de iOS: Apple escala el de 180 px.
• browserconfig.xml y los tiles de Windows 8/10 (msapplication-TileImage): el soporte de live tiles desapareció con Windows 11.
• mask-icon para las pestañas fijadas de Safari: Safari dejó de usarlo a partir de la versión 12 y hoy toma el favicon normal.
• Decenas de <link rel="icon" sizes="…">: con un .ico, un SVG y el manifest es suficiente.

Cómo generar los archivos

Parte de un cuadrado de al menos 512 px, mejor un SVG. Con sharp en Node.js:

import sharp from 'sharp';
for (const size of [32, 180, 192, 512]) {
  await sharp('logo.svg').resize(size, size).png().toFile(`icon-${size}.png`);
}

El .ico se puede componer con la librería png-to-ico o con ImageMagick (magick icon-32.png icon-16.png favicon.ico). Si prefieres no instalar nada, el generador de favicon de AIMRAN Tools acepta una imagen cuadrada o un SVG, muestra la vista previa en los tamaños habituales (de 16 a 180 px) y descarga el conjunto en un ZIP, todo en el navegador.

Para el icono maskable (Android recorta el icono en círculo o en formas redondeadas), deja un margen de seguridad: el contenido importante debe caber en el 80 % central.

Comprobaciones finales

1. Abre https://tudominio/favicon.ico y https://tudominio/favicon.svg: deben devolver 200.
2. En Chrome DevTools, pestaña Application → Manifest, comprueba que los iconos se cargan sin avisos.
3. Añade la web a la pantalla de inicio en un iPhone y en un Android y mira el icono.
4. Haz la prueba de la pestaña: ¿se reconoce el icono a 16 píxeles junto a otras veinte pestañas?

Conclusión

Un .ico, un SVG, un PNG de 180 px y dos PNG en el manifest: cinco archivos y cuatro etiquetas cubren navegadores, móviles, aplicaciones instalables y los resultados de Google. Dedica el tiempo que ahorras en generar tamaños a lo que de verdad se nota: que el dibujo sea legible a 16 píxeles y funcione en claro y en oscuro.