Guía de favicon e ICO: tamaños, formatos y HTML que funcionan

Dónde aparece realmente un favicon

El sitio obvio es la pestaña del navegador, que suele medir 16 píxeles cuadrados y pasa a 32 píxeles de dispositivo en una pantalla de alta densidad. El mismo icono aparece en marcadores, historial, grupos de pestañas y la lista de sugerencias de la barra de direcciones. Windows lo dibuja en accesos directos y vistas previas de la barra de tareas, los móviles lo usan en la pantalla de inicio y los buscadores a veces lo muestran junto a un resultado.

Como cada superficie pide un tamaño distinto, una sola imagen enorme escalada por el navegador no basta. Un icono de 256 píxeles comprimido a 16 pierde el detalle que lo hacía reconocible, así que el archivo necesita fotogramas pequeños hechos a propósito en lugar de un único original redimensionado al vuelo.

Las pestañas fijadas de Safari son la excepción: tiñen el icono de un solo color, así que un logotipo multicolor detallado puede convertirse en una mancha gris. Si las pestañas fijadas te importan, añade un favicon SVG que dibuje con currentColor para que la forma se enmascare limpiamente, y conserva el ICO para todo lo demás.

Cómo funciona el contenedor ICO

Un archivo ICO es un pequeño directorio seguido de una o varias imágenes. Cada entrada registra las dimensiones del fotograma, la profundidad de color y el desplazamiento, y un consumidor como un navegador o el Explorador de Windows elige el fotograma más cercano al tamaño que necesita. Los archivos ICO modernos guardan fotogramas comprimidos como PNG, y por eso un icono de seis tamaños sigue siendo razonablemente pequeño.

Conviene conocer las limitaciones del formato. Llega como máximo a 256 píxeles por fotograma, está ligado a convenciones antiguas de Windows, y macOS y las herramientas de diseño lo tratan como un ciudadano de segunda. El ICO sigue siendo valioso porque es un solo archivo que cubre pestañas, marcadores y accesos directos sin ningún HTML, y los navegadores piden /favicon.ico automáticamente aunque no exista ninguna etiqueta link.

PNG, SVG y las etiquetas link

Los iconos PNG se declaran explícitamente en el head de la página, por ejemplo un elemento link con rel icon, type image/png y sizes 32x32. Puedes enumerar varios tamaños y los navegadores eligen uno. El PNG admite transparencia y es fácil de generar, pero no lleva contenedor multiuso, así que necesitas un archivo separado por cada tamaño que te importe.

Los favicons SVG escalan perfectamente y pueden incluso responder al modo oscuro, pero su compatibilidad es desigual entre navegadores y las versiones antiguas se quedan sin nada si no hay un icono ráster. La receta duradera es un respaldo ICO en la raíz del sitio, iconos PNG de 32 y 192 píxeles, y un apple-touch-icon de 180 píxeles para las pantallas de inicio de iOS.

Diseñar algo que funcione a 16 píxeles

A 16 píxeles un icono son 16 cuadraditos de ancho. Los trazos finos, el texto pequeño, los degradados sutiles y las ilustraciones detalladas desaparecen o se convierten en ruido. Un favicon fuerte suele ser una única forma llamativa con alto contraste, márgenes generosos y sin texto; un monograma puede funcionar si la letra es muy simple.

Prueba el icono a tamaño real en una barra de pestañas clara y otra oscura antes de publicarlo. Los iconos con fondo transparente heredan el tema del navegador que hay detrás, así que un logotipo oscuro puede desaparecer en modo oscuro y uno blanco puede desaparecer en modo claro. Un contorno sutil o un fondo relleno resuelven ambos casos.

Algunos diseñadores generan una marca simplificada específica para los tamaños más pequeños en lugar de encoger el logotipo completo. El conjunto de favicons puede usar entonces una forma más llamativa y sin texto a 16 y 32, y el logotipo detallado a 256 y más. Es más trabajo que un solo archivo para todos los tamaños, pero es la razón por la que las grandes marcas siguen siendo reconocibles en una barra de pestañas abarrotada.

Iconos maskable para aplicaciones web instalables

Android no se limita a encoger un favicon: enmascara el icono con una forma como un círculo o un squircle, lo que puede recortar los bordes de tu ilustración. Los iconos maskable resuelven esto esperando un fondo a sangre con el contenido importante dentro de una zona segura central. La especificación define esa zona segura como un círculo con un diámetro de aproximadamente el 80 por ciento de la anchura del icono.

Declara iconos maskable en el manifiesto de la aplicación web con purpose maskable a 192 y 512 píxeles. Mantén un icono separado con purpose any para las superficies que no enmascaran, y haz opaca la versión maskable: la transparencia en las esquinas se ve rota en cuanto Android recorta la forma.

Subir los archivos a tu sitio

Sube favicon.ico a la raíz del sitio para que se resuelva la petición por defecto, añade los enlaces PNG y apple-touch-icon en el head y referencia los iconos del manifiesto. Los favicons se almacenan en caché de forma agresiva, así que si un icono nuevo no aparece, prueba primero una recarga forzada y después borra la caché del navegador; renombrar el archivo o añadir una consulta de versión fuerza una petición nueva.

• favicon.ico con fotogramas de 16, 32, 48 y 256 píxeles en la raíz del sitio.
• Iconos PNG de 32 x 32 y 192 x 192 enlazados desde el head de la página.
• apple-touch-icon de 180 x 180 para las pantallas de inicio de iOS.
• Entradas del manifiesto para iconos de 192 y 512 píxeles, más variantes maskable.
• Fondo opaco para los iconos maskable; la transparencia está bien para las pestañas.