Buscar «tamaño favicon» sigue mostrando listas de quince archivos heredadas de 2014. En la práctica, hoy bastan seis dimensiones para cubrir pestañas, resultados de búsqueda, iOS, Android y PWA. Estas son y estos son sus motivos.
La tabla de tamaños que debes generar
Cada fila corresponde a un uso documentado del paquete propuesto. La tabla prioriza un pequeño conjunto interoperable frente a una colección de variantes históricas.
| Archivo | Dimensiones | Para qué sirve |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Pestañas, favoritos, navegadores antiguos y robots de indexación |
| favicon.svg | vectorial, cuadrado | Navegadores modernos, nítido a cualquier tamaño, compatible con modo oscuro |
| favicon-96x96.png | 96×96 | Resultados de búsqueda de Google en móviles |
| apple-touch-icon.png | 180×180 | Pantalla de inicio de iOS y iPadOS, sin transparencia |
| web-app-manifest-192x192.png | 192×192 | Pantalla de inicio de Android, declarado en el manifiesto web |
| web-app-manifest-512x512.png | 512×512 | Pantalla de arranque de las PWA, versión «maskable» |
Por qué incluir 16, 32 y 48 en el mismo .ico
El formato ICO es un contenedor: un solo archivo puede incluir varias imágenes y el navegador elige la que corresponde a su visualización. Es justo lo que necesitamos, porque el contexto cambia el tamaño solicitado.
16×16 sirve para la pestaña en una pantalla estándar. 32×32 ofrece una variante para pantallas de alta densidad y otras interfaces del navegador. 48×48 completa el contenedor y también cumple el múltiplo de 48 que pide Google para los favicons de los resultados de búsqueda.
Generar un .ico que solo contenga 16×16 es el error más frecuente: en una pantalla Retina, el icono se amplía y siempre parece borroso.
180×180 para iOS, 192 y 512 para Android
iOS no lee el manifiesto web para el icono de la pantalla de inicio: busca una etiqueta apple-touch-icon. Basta un tamaño, 180×180, que cubre todos los iPhone y iPad recientes. El sistema reduce la imagen para los dispositivos más antiguos.
Android, en cambio, utiliza el manifiesto web. Bastan dos entradas: 192×192 para el icono de la pantalla de inicio y 512×512 para la pantalla de arranque cuando el sitio se instala como aplicación. La versión de 512 debe declararse con purpose «maskable», es decir, estar diseñada para admitir un recorte circular o cuadrado con esquinas redondeadas.
Para un icono maskable, mantén lo esencial del diseño dentro del 80 % central. Todo lo que sobresalga puede recortarse según el fabricante del teléfono.
Qué imagen de origen usar
El mejor punto de partida es un SVG: se redimensiona sin pérdida a todos los tamaños anteriores. Si no tienes uno, utiliza un PNG cuadrado de al menos 512×512 píxeles, para que incluso el icono de arranque de Android se genere reduciendo la imagen, nunca ampliándola.
Un logo horizontal con texto no funciona a 16×16: a ese tamaño, una palabra se convierte en una mancha de tres píxeles de alto. Extrae el símbolo o empieza con una o dos letras sobre un fondo contrastado.
Por último, comprueba el contraste sobre fondos claros y oscuros: un logo negro desaparece en una pestaña con tema oscuro. Ese es precisamente el problema que resuelve la variante oscura del favicon SVG.
Los tamaños que ya no necesitas
Los generadores antiguos siguen produciendo archivos destinados a integraciones históricas, como los mosaicos de Windows con mstile-150x150.png y browserconfig.xml. Añádelos solo si tu lista de plataformas compatibles incluye expresamente esas interfaces.
La larga serie apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 y 152x152 viene de una época en la que iOS no sabía redimensionar. Una única imagen de 180×180 las sustituye a todas.
Eliminar las declaraciones sin uso simplifica tu repositorio y tu HTML. Aun así, comprueba los navegadores y plataformas que necesitas admitir antes de eliminar una integración existente.
Fuentes primarias
Preguntas frecuentes
¿Sigue haciendo falta un favicon.ico?
Sí, pero solo en la raíz del sitio. Los navegadores modernos prefieren el SVG, pero muchos robots, agregadores y clientes de correo siguen solicitando /favicon.ico sin leer tu HTML. El archivo pesa unos pocos kilobytes: consérvalo.
¿Qué tamaño necesita el favicon en los resultados de Google?
Google pide un icono cuyo lado sea un múltiplo de 48 píxeles y suele mostrarlo a 48×48. Un PNG de 96×96 o un SVG cubre este uso fácilmente. El icono debe ser accesible para los robots y no estar bloqueado por robots.txt.
¿Puede ser rectangular mi favicon?
Técnicamente sí, visualmente no. Todos los contextos de visualización reservan un cuadrado: una imagen rectangular se deformará o se centrará con franjas vacías. Parte siempre de un cuadrado, aunque tengas que añadir márgenes alrededor del símbolo.