Un favicon ya no es una sola imagen. Los navegadores, los teléfonos y los sistemas operativos cogen cada uno un tamaño distinto para un hueco distinto — la pestaña del navegador, un marcador, una pantalla de inicio de iOS, un conmutador de apps de Android. Publica un solo PNG de 32×32 y funcionará en la pestaña pero se verá borroso cuando alguien guarde tu sitio en su teléfono. Publica el conjunto completo y cada superficie recibe un icono nítido.
Aquí tienes exactamente qué tamaños necesitas, qué hace cada uno y por qué la lista tiene el aspecto que tiene.
Los tamaños que importan
La mayoría de los sitios quedan cubiertos por seis tamaños PNG más un .ico heredado. Aquí tienes la referencia:
| Tamaño | Formato | Dónde se usa |
|---|---|---|
| 16×16 | PNG (en .ico) | Pestaña del navegador, barra de direcciones, marcadores |
| 32×32 | PNG (en .ico) | Pestañas Retina, accesos directos de la barra de tareas de Windows |
| 48×48 | PNG | Iconos de sitio de Windows, algunas superficies de Android |
| 180×180 | PNG | Pantalla de inicio de iOS (apple-touch-icon) |
| 192×192 | PNG | Pantalla de inicio de Android, instalación de PWA |
| 512×512 | PNG | Pantalla de bienvenida de PWA, tiendas de apps, alta densidad |
El archivo favicon.ico es un contenedor que agrupa los tamaños pequeños (normalmente 16 y 32, a veces 48). Los navegadores antiguos y Windows lo buscan por su nombre en la raíz de tu sitio, así que aún merece la pena publicarlo aunque los navegadores modernos usen PNG con gusto.
¿Por qué tantos? Un recorrido rápido
La razón por la que la lista es larga es que el icono aparece en tamaños físicos muy distintos.
16 y 32 son los iconos de pestaña de a diario. 16 es el tamaño clásico; 32 cubre las pantallas de alta densidad ("Retina") donde 16 se vería suave. Los navegadores eligen el que encaje con la densidad de píxeles.
48 es cosa de Windows — se usa para accesos directos de sitio y aparece más nítido en algunos lugares que 32 no cubre bien.
180 es el apple-touch-icon de Apple. Cuando alguien toca "Añadir a pantalla de inicio" en un iPhone o iPad, iOS usa este. Fállalo e iOS o bien cogerá una captura reducida o mostrará una simple ficha de letra — ninguna se parece a tu marca.
192 y 512 son los tamaños de aplicación web progresiva, declarados en un archivo manifest.webmanifest. 192 es el icono de la pantalla de inicio de Android; 512 alimenta la pantalla de bienvenida y se reduce para cualquier otra cosa que el SO necesite. Si tu sitio es instalable, estos dos son innegociables.
¿Necesitas más grande que 512?
No. 512×512 es el techo práctico para los favicons web — la especificación del webmanifest y todas las plataformas principales llegan como mucho hasta ahí. Si tu arte de origen es de 1024 o más grande, eso está bien como imagen de partida (más detalle desde el que reducir), pero no publicas un favicon de 1024. Cualquier cosa por encima de 512 solo añade bytes que nadie usa.
La única regla que importa yendo hacia arriba: parte de una fuente grande y cuadrada. Un original de 512×512 o 1024×1024 se reduce con limpieza a todos los tamaños por debajo. Parte de una imagen diminuta y los tamaños pequeños se ven turbios porque nunca hubo suficiente detalle que conservar.
Diseña para que sobreviva a 16×16
El tamaño más difícil es el más pequeño. A 16×16 un logo detallado se convierte en un borrón ilegible. Unos cuantos consejos que valen para todos los sitios:
- Simplifica. Un logotipo completo no se leerá a 16px. Usa una sola letra, un monograma o la parte más reconocible de tu marca.
- Mantén el contraste alto para que la forma siga siendo legible sobre fondos de pestaña claros y oscuros.
- Deja un poco de margen — un icono que toca los cuatro bordes se siente apretado en la pestaña.
- Pruébalo pequeño. Aleja el zoom de tu navegador, o simplemente mira la pestaña real. Si no puedes distinguir qué es de un vistazo, simplifica más.
Generar el conjunto completo
Estos no los construyes a mano. Suelta una imagen cuadrada en el Generador de favicon y produce el conjunto completo de una vez — favicon.ico, los PNG de 16/32/48/180/192/512, un webmanifest listo para usar, y el fragmento HTML exacto de <head> para pegar. Todo funciona en tu navegador: la imagen nunca se sube, y tras tu primera visita la herramienta funciona sin conexión.
El HTML con el que acabarás
Como referencia, una configuración completa de favicon se ve más o menos así en tu <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
El generador escribe esto por ti, así que puedes pegarlo directamente. Cubre los seis tamaños más el .ico y el manifest, y cada navegador, teléfono y SO recibe el icono nítido que está pidiendo.