Cinco tamaños cubren todo lo que está en uso real: 16, 32 y 48 px empaquetados dentro de un solo favicon.ico, un apple-touch-icon.png de 180 px para la pantalla de inicio de iOS, y PNG de 192 y 512 px para Android. Esa es toda la lista. Si un generador te entrega veinte archivos y dieciocho líneas de markup, la mayor parte apunta a navegadores y plataformas que dejaron de importar hace años.
Los tamaños, y para qué sirve cada uno
| Tamaño | Dónde vive | Qué lo usa |
|---|---|---|
| 16 px | dentro de favicon.ico | la pestaña del navegador, dibujada a tamaño real |
| 32 px | dentro de favicon.ico | pestañas en pantallas de alta densidad, la barra de marcadores, los iconos anclados a la barra de tareas |
| 48 px | dentro de favicon.ico | accesos directos del escritorio de Windows, y el tamaño sobre el que está construida la guía de Google |
| 180 px | apple-touch-icon.png | la pantalla de inicio de iOS |
| 192 px | icon-192.png, vía el manifest | la pantalla de inicio de Android |
| 512 px | icon-512.png, vía el manifest | las pantallas de bienvenida de Android y los avisos de instalación |
Seis tamaños, cuatro archivos, porque los tres primeros comparten un mismo contenedor. Algunas configuraciones además incluyen PNG sueltos de 16 y 32 px junto al .ico. Son inofensivos y pesan un par de kilobytes cada uno, pero nada se rompe sin ellos.
Por qué un solo .ico guarda tres imágenes
ICO no es un formato de imagen, es un contenedor. Seis bytes de cabecera, después una entrada de directorio de dieciséis bytes por imagen que dice qué tamaño tiene y en qué punto del archivo empieza, y después los datos de la imagen. Desde Windows Vista esas entradas pueden ser archivos PNG completos en lugar de bitmaps crudos, que es la razón de que un .ico con tres tamaños se quede en unos pocos kilobytes.
El navegador elige el tamaño incrustado que mejor encaje en el espacio donde va a dibujarlo, así que un solo archivo cubre tanto el icono de 16 px de la pestaña como el acceso directo de 48 px del escritorio. Una rareza del formato explica la separación entre el .ico y los PNG: cada dimensión se guarda en un solo byte, y 256 se escribe como cero. 256 px es el techo absoluto, y por eso los iconos de Apple y de Android son archivos PNG aparte en vez de más entradas dentro del mismo contenedor.
Conserva el .ico aunque también publiques un SVG. Los navegadores piden /favicon.ico a la raíz del sitio por su cuenta, sin ninguna etiqueta link que se lo indique, así que sigue funcionando cuando falta el markup, cuando se cachea de forma rara o cuando algo por el camino lo elimina.
Por qué Apple quiere 180 y Android quiere 192 y 512
180 px son 60 puntos a densidad 3×, que es el hueco del icono en la pantalla de inicio de un iPhone. Las versiones antiguas de iOS pedían un abanico de tamaños — 57, 72, 76, 114, 120 y 152 — pero iOS reduce a partir del más grande que encuentra, así que un único archivo de 180 px los cubre todos. Dibuja hasta los bordes del cuadrado: iOS aplica su propia máscara redondeada, y un cuadrado con las esquinas ya redondeadas acaba redondeado dos veces.
Android lee los iconos del manifest de la aplicación web en lugar de las etiquetas link. 192 px es el icono de la pantalla de inicio; 512 px se usa para las pantallas de bienvenida y el aviso de instalación. Los dos son obligatorios: sin ellos el sitio no se puede instalar.
Aquí hay una trampa que la mayoría de los generadores se salta. Android puede recortar un icono instalado en un círculo o en un squircle, y solo lo hace con los iconos marcados como "purpose": "maskable" en el manifest, con el dibujo contenido dentro del 80% central para que el recorte no se lo coma. Un icono sin esa marca se coloca sobre un fondo liso en vez de llenar la forma. Si eso te importa, añade margen a la imagen de origen y edita el manifest a mano: ningún generador puede adivinar qué parte de tu logo es prescindible.
Los tamaños que puedes dejar de generar
La receta de veinte archivos de favicon fue un consejo real en su momento. La mayor parte ha envejecido mal:
- El zoo de apple-touch-icon — 57, 72, 76, 114, 120 y 152 px, cada uno con su gemelo
-precomposed. Un solo archivo de 180 px reemplaza los doce. - El juego de mosaicos de Windows —
mstile-*.pngmás unbrowserconfig.xml, para los mosaicos anclados en la pantalla de inicio de Windows 8 y 10. Esa interfaz ya no existe. - El PNG de 96 px, que las recetas incluían para Google TV. También desaparecido.
- El icono de máscara monocromo de Safari para las pestañas ancladas, un SVG de un solo color con su propia etiqueta
mask-icon. El Safari moderno usa tu icono normal.
Borrarlos no te cuesta nada medible. Conservarlos te cuesta un directorio lleno de archivos que olvidarás actualizar la próxima vez que cambie el logo, que es el problema real.
Qué quiere Google para el icono de los resultados de búsqueda
La guía de Google dice que el favicon sea un cuadrado cuyas dimensiones sean múltiplos de 48 px, servido desde una URL estable que pueda rastrear. La imagen de 48 px que va dentro del .ico cumple con eso, y es la razón principal para molestarse en incluirla.
Google reescala el icono hacia abajo para la fila del resultado, así que lo que decide si ayuda es si sobrevive a tamaño miniatura. Google también se reserva el derecho de ignorar tu icono y mostrar un globo genérico: es una pista, no una garantía.
Tu logo no va a sobrevivir a 16 píxeles
Esta es la parte que los tamaños no pueden arreglar. Un icono de 16 × 16 son 256 píxeles en total. Un logotipo con texto se convierte en textura, un contorno de un píxel desaparece del todo, y cualquier cosa con más de dos o tres formas se vuelve barro. Los logos que funcionan como favicon ya eran simples antes de que nadie los encogiera: una letra, un símbolo, una silueta.
La técnica de remuestreo te devuelve una parte. Los navegadores reducen en un solo paso, que es rápido y produce bordes blandos y con aliasing; ir partiendo a la mitad varias veces y dar el último paso desde cerca aguanta los bordes bastante mejor. El generador de favicon de aquí hace esa reducción a la mitad repetida y escribe el .ico byte a byte en tu navegador, así que obtienes los seis tamaños más el markup a partir de una sola imagen de origen sin subir nada. Aun así no va a igualar a un icono de 16 px dibujado a mano con los trazos alineados a la rejilla de píxeles. Si tu favicon te importa de verdad, dibuja el pequeño tú mismo y genera el resto.
El otro problema habitual es que los logos son anchos y los iconos son cuadrados. Algo tiene que ceder: o le recortas los lados, o encoges el conjunto hacia el centro hasta que queda una mancha. Normalmente la respuesta es sacar la marca del logotipo con texto, lo que significa recortar a un cuadrado primero para que tú controles qué parte sobrevive en lugar de dejar que lo decida el modo de ajuste.
¿Fondo transparente o sólido?
La transparencia se ve más limpia justo hasta que el tema del navegador coincide con tu dibujo. Un logo oscuro sobre fondo transparente desaparece contra una barra de pestañas oscura, y los navegadores no van a cambiarte el icono.
Dos arreglos honestos. Dale al icono un fondo sólido para que nunca pueda confundirse con el entorno: un poco menos elegante, nunca invisible. O publica un favicon SVG con una media query prefers-color-scheme dentro, que los navegadores de escritorio actuales respetan. El soporte de favicons SVG es bueno en las versiones actuales de Chrome, Edge y Firefox y más irregular en el resto, y los navegadores antiguos ignoran la etiqueta por completo, así que el .ico se queda igualmente como plan B. PNG e ICO manejan la transparencia igual que un PNG en cualquier otro sitio, que es la razón por la que los iconos nunca son JPEG: sin canal alfa, y el color plano es justo el caso que JPEG maneja peor.
Por qué no aparece el favicon nuevo
Porque está cacheado, casi siempre. Los navegadores cachean los favicons de forma agresiva y en un almacén separado del caché normal de la página, así que muchas veces una recarga forzada de la página deja el icono viejo ahí puesto. Abre /favicon.ico directamente en una pestaña y recarga eso, o revísalo en una ventana privada, para confirmar que el archivo nuevo se está sirviendo de verdad.
Si el icono viejo sigue ahí en una ventana privada, el problema es el servidor, no el caché. Comprueba que los archivos estén en la raíz del sitio y no en una carpeta de assets, y que las rutas de tus etiquetas link empiecen por una barra: una ruta relativa se resuelve de otra forma en una página anidada, que es el tipo de bug que solo aparece en una sección del sitio.
Si lo que quieres son los archivos y no la explicación, el generador de favicon convierte una imagen, o una letra y dos colores, en el .ico y los PNG de todos los tamaños de arriba, más el markup y el manifest para pegar. Se ejecuta en tu navegador, así que el logo que todavía no estás listo para publicar nunca sale de tu computadora.
Los iconos son el único sitio donde la regla habitual de servir menos imágenes y más grandes se va por la ventana. Si estás dimensionando el resto de la página, los anchos en píxeles y los objetivos de peso para imágenes web cubre imágenes hero, imágenes de artículo y miniaturas, donde la aritmética funciona en el sentido contrario.
Preguntas frecuentes
¿Qué tamaños de favicon necesito?
Seis tamaños en cuatro archivos: 16, 32 y 48 px dentro de favicon.ico, un apple-touch-icon.png de 180 px para iOS, y PNG de 192 y 512 px referenciados desde un manifest de aplicación web para Android. Cualquier cosa más allá de eso apunta a plataformas que ya no están en uso.
¿Es mejor 16x16 o 32x32 para un favicon?
Ninguno reemplaza al otro, y por eso un favicon.ico guarda los dos. 16 px es lo que dibuja una pestaña del navegador en una pantalla estándar, y 32 px es lo que usa en una pantalla de alta densidad, en la barra de marcadores y en los iconos anclados a la barra de tareas. Publica un solo archivo con los dos y el navegador elige.
¿Puedo usar un PNG en lugar de un favicon.ico?
Sí, todos los navegadores actuales aceptan un favicon PNG mediante una etiqueta link. Conserva el .ico igualmente: los navegadores piden /favicon.ico a la raíz del sitio sin que nadie se lo indique, así que sigue funcionando cuando falta el markup o cuando la página la renderiza algo que elimina las etiquetas del head.
¿Por qué mi favicon se ve borroso?
Normalmente porque una imagen grande se escaló directamente a 16 px en un solo paso, lo que suaviza todos los bordes. La otra causa es detalle que no puede existir a ese tamaño: un icono de 16 px son 256 píxeles en total, así que los trazos finos y el texto pequeño se convierten en una papilla gris por mucho cuidado que se ponga en el redimensionado.
¿El favicon afecta al SEO?
Solo de forma indirecta. Google puede mostrar un favicon junto a tu resultado en el celular, y su guía pide un cuadrado múltiplo de 48 px en una URL rastreable. No es un factor de posicionamiento, y Google puede sustituirlo por un icono genérico si el tuyo falta o no es adecuado.
Última actualización 19 de septiembre de 2026