No existe un único tamaño “correcto” de favicon. Los sitios web modernos necesitan varias dimensiones para verse bien en las pestañas del navegador, las pantallas de inicio móviles, las PWA y los resultados de búsqueda. Esta es la referencia completa — guárdala en marcadores.
Los tamaños esenciales de favicon (referencia rápida)
| Tamaño | Archivo | Dónde se usa | ¿Obligatorio? |
|---|---|---|---|
| 16×16 | favicon-16x16.png | Pestañas del navegador (clásico) | Sí |
| 32×32 | favicon-32x32.png | Pestañas del navegador (retina), barra de tareas | Sí |
| 48×48 | dentro de favicon.ico | Iconos de sitio de Windows, navegadores antiguos | Recomendado |
| 180×180 | apple-touch-icon.png | Pantalla de inicio de iOS, pestaña fijada de Safari | Sí |
| 192×192 | android-chrome-192x192.png | Pantalla de inicio de Android, PWA de Chrome | Sí (PWA) |
| 512×512 | android-chrome-512x512.png | Pantalla de splash de PWA, Android de alta resolución | Sí (PWA) |
| Vector | favicon.svg | Navegadores modernos, modo oscuro, Safari fijado | Recomendado |
Tamaño de imagen de origen recomendado
Empieza siempre desde una imagen cuadrada de al menos 512×512 píxeles (1024×1024 es ideal). Un buen generador la reducirá a todos los tamaños anteriores manteniendo cada uno nítido. Nunca hagas upscale de una imagen pequeña — se verá borrosa a tamaños mayores como la pantalla de splash de PWA de 512×512.
Por qué existe cada tamaño
16×16 y 32×32 — la pestaña del navegador
Son los tamaños que los usuarios más ven. 16×16 es el valor heredado por defecto; 32×32 se ve nítido en pantallas de alta densidad (retina). Incluye siempre ambos.
180×180 — Apple touch icon
Cuando un usuario de iPhone o iPad toca “Añadir a pantalla de inicio”, iOS usa este archivo. Safari también lo usa para las pestañas fijadas en Mac. Debe ser exactamente 180×180.
192×192 y 512×512 — Android & PWA
Chrome en Android y otros navegadores compatibles con PWA los leen de tu site.webmanifest. 192 es el icono de la pantalla de inicio; 512 alimenta la pantalla de splash a pantalla completa cuando la PWA se inicia.
¿Y los favicons en los resultados de búsqueda de Google?
Google muestra un pequeño favicon junto a tu resultado en la búsqueda móvil (y cada vez más en escritorio). Lo toma de tus favicons declarados — normalmente el 32×32 o el .ico. Google recomienda una imagen cuadrada de al menos 48×48 (los múltiplos de 48 son ideales). Asegúrate de que tu <link rel="icon"> sea válido; de lo contrario, Google muestra un globo genérico.
El archivo .ico: un archivo, muchos tamaños
El formato .ico es especial — un solo archivo puede agrupar varios tamaños (normalmente 16×16, 32×32, 48×48). Por eso un buen favicon.ico es la opción más compatible: cada navegador elige automáticamente el mejor tamaño incrustado.
¿No quieres gestionar todos estos tamaños a mano?
No hace falta. Sube una sola imagen cuadrada a Favicon.one y descarga un ZIP que contiene todos los tamaños anteriores, un .ico, un Apple touch icon, un SVG y un site.webmanifest — más HTML listo para pegar.