Tamaño del favicon: medidas recomendadas y formatos
Los favicons modernos deben ofrecerse en varias dimensiones y formatos: desde 16×16 px para los navegadores clásicos hasta 512×512 px para las PWA. Hoy en día, los formatos PNG y SVG están sustituyendo al antiguo ICO en la mayoría de plataformas, mientras que los iconos de gran tamaño se declaran en el manifest.json de las aplicaciones web.
Favicon: ¿para qué sirve este pequeño gráfico?
Un favicon (acrónimo de “favorite” y “icon”) es un pequeño gráfico que aparece en la pestaña del navegador, junto a la barra de direcciones, y ayuda a identificar rápidamente una página web. Aporta coherencia visual, mejora el reconocimiento de marca y da un aspecto profesional.
Los favicons suelen basarse en el logotipo de la marca, aunque debido a las dimensiones tan reducidas a menudo se utiliza una versión simplificada del mismo. En dispositivos móviles, estos gráficos también sirven como iconos táctiles para accesos directos a la página.
¿Qué tamaño de favicon es recomendable?
Las medidas del favicon varían según el navegador y el dispositivo. Los tamaños básicos siguen siendo 16×16 px y 32×32 px, ya que son los que se muestran en la mayoría de pestañas del navegador.
Para las aplicaciones web progresivas (PWA), es recomendable incluir iconos adicionales en 192×192 px y 512×512 px. Estos tamaños se declaran en el manifest.json y son utilizados por navegadores como Chrome o Edge al “instalar” la página web como si fuera una aplicación.
Otras dimensiones importantes: Google y Apple
El tamaño del favicon para Google es especialmente relevante, ya que no solo se utiliza en el navegador, sino también en los resultados de búsqueda, donde se muestra con 48×48 píxeles. Para Android, se recomienda incluir una variante de 192×192 píxeles, que sirve como icono de la aplicación cuando los usuarios añaden tu página web a la pantalla de inicio.
En el ecosistema Apple, las dimensiones recomendadas dependen del dispositivo. Para el iPhone, suele utilizarse el formato de 60×60 píxeles, aunque también es posible trabajar con resoluciones mayores siempre que sean múltiplos de este tamaño. Esto permite una visualización óptima en pantallas de alta resolución, ya que el sistema puede reducir la imagen cuando sea necesario. Por ello, un icono de 180×180 píxeles suele ser una elección adecuada. En el iPad, los iconos se muestran normalmente en 83,5×83,5 píxeles. Para dispositivos con pantallas Retina o Super Retina, se recomienda una versión de 167×167 píxeles, es decir, el doble de ese tamaño.
Los iconos se almacenan como Apple Touch Icons y se integran en el <head> de la página mediante la siguiente etiqueta HTML:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Las dimensiones más importantes del favicon de un vistazo
En algunos navegadores y dispositivos existen excepciones. Especialmente en modelos antiguos puede ser necesario ofrecer tamaños adicionales para garantizar que el favicon se muestre correctamente en cada entorno. A continuación encontrarás un resumen claro con las medidas más habituales:
| Navegador o dispositivo | Tamaño |
|---|---|
| Navegadores modernos | 16×16 o 32×32 píxeles |
| Google y Android | 48×48 o 192×192 píxeles |
| iPhone (modelos recientes) | 60×60 o 180×180 píxeles |
| iPad (modelos recientes) | 83,5×83,5 o 167×167 píxeles |
| Chrome Web Store | 128×128 píxeles |
| Google TV | 96×96 píxeles |
| Internet Explorer 9 | 24×24 píxeles |
| Pantalla de inicio del iPad | 72×72 píxeles |
| iPhone (modelos antiguos) e iPod Touch | 57×57 píxeles |
| Pantalla de inicio del iPhone 4 | 114×114 píxeles |
| Opera Speed Dial | 195×195 píxeles |
Extensiones de archivo: ¿qué formatos de favicon se pueden usar?
Puedes utilizar distintos formatos de imagen para tu favicon. El clásico formato .ico sigue siendo compatible con cualquier navegador, aunque hoy en día se considera obsoleto. Los navegadores modernos prefieren favicons en formato PNG o SVG. En las aplicaciones web progresivas, por ejemplo, el manifiesto utiliza habitualmente iconos en PNG, ya que este formato permite una buena escalabilidad sin pérdida de calidad.
Aquí tienes un resumen de los formatos más comunes:
- .ico: máxima compatibilidad, pero escalabilidad limitada
- .png: nitidez en cualquier pantalla, admite transparencia
- .svg: formato vectorial, ideal para favicons escalables y diseños oscuros
- .gif: solo para casos concretos, como iconos animados
Asegúrate de que tu servidor envía el tipo MIME correcto (por ejemplo, image/png o image/svg+xml) para garantizar que el favicon se muestre adecuadamente en todos los navegadores.
Crear un favicon con un generador
Si buscas la combinación ideal de tamaño y formato para tu favicon, verás que hay numerosos factores a tener en cuenta. Por eso, una de las opciones más sencillas es utilizar un generador de favicons. Estas herramientas te guían en el proceso paso a paso y se aseguran de que cada icono tenga las medidas y el formato adecuados para todos los navegadores relevantes.