Tamaños y formatos de favicon que realmente funcionan

Por qué sigue siendo confuso

El favicon tiene una de las historias más largas y complicadas de los recursos web. Empezó en 1999 como un archivo .ico de 16×16 que Internet Explorer buscaba en /favicon.ico, sin necesidad de una etiqueta HTML. Todas las plataformas que llegaron después —iconos de pantalla de inicio de iOS, iconos adaptativos de Android, mosaicos anclados de Windows, manifiestos PWA— añadieron sus propias convenciones en lugar de sustituir la anterior, porque romper el comportamiento original habría roto todos los sitios web existentes. El resultado es una especificación que nunca se depuró, solo se amplió; la mayoría de las listas de tamaños que circulan por la web se copiaron de una época en la que más de esas ampliaciones eran realmente importantes.

Los navegadores modernos también manejan mucho mejor lo que les proporcionas. Chrome, Firefox y Safari pueden tomar un icono escalable y generar la versión pequeña de la pestaña. La lista larga es una precaución de compatibilidad heredada, no una exigencia actual; en un sitio típico puedes omitir casi todo.

El conjunto que realmente cubre el uso real

En la práctica, tres archivos cubren la gran mayoría de navegadores y dispositivos:

• favicon.ico con una imagen de 32×32 — sigue siendo la alternativa que todo navegador busca en la raíz, incluso sin <link> etiqueta presente. ICO puede contener varias resoluciones, pero una imagen de 32px basta para su uso actual.
• Un PNG de 180×180 como apple-touch-icon — lo que usa iOS al añadir el sitio al inicio. No lee favicon.ico para ello: sin este archivo captura la página, un icono mucho peor.
• Un favicon SVG — escala limpiamente a cualquier pestaña o densidad y admite la consulta de modo oscuro. Los navegadores modernos lo prefieren si declaras SVG e .ico.

En el encabezado del documento, eso es:

Todo lo que va más allá de estos tres —el icono PWA de 512 px, las variantes de iconos adaptativos de Android, las metaetiquetas de mosaicos de Windows— solo importa si creas una PWA instalable o te diriges específicamente a mosaicos anclados de Windows. Añádelo cuando exista ese requisito, no por anticipado.

Producir a mano la parte ráster de ese conjunto exige exportar la ilustración a varios tamaños y empaquetar un .ico. Nuestro Generador de favicons lo hace desde una imagen: favicon.ico, apple-touch-icon de 180px y PNG de 192 y 512 si quieres el manifiesto. El SVG aún debe proceder de tu herramienta vectorial.

Qué solicita realmente cada plataforma

• Pestañas de navegador de escritorio dibujan el icono aproximadamente a 16×16 píxeles CSS, ampliados para alta densidad. Por eso SVG o PNG pequeño bien diseñado importa más que un original grande: la pestaña es la representación más pequeña y más vista.
• pantalla de inicio de iOS solicita apple-touch-icon de 180×180, cubriendo iPhones actuales de mayor densidad y reduciendo para antiguos. iOS redondea y a veces añade brillo: no redondees antes o tendrás doble redondeo.
• Pantalla de inicio de Android / PWA lee tamaños de site.webmanifest en vez de etiqueta link, normalmente 192×192 y 512×512, y admite variante «maskable» con área segura para círculos, cuadrados redondeados y gotas sin cortar el diseño.
• Resultados de búsqueda (Google, en concreto) mostrará un pequeño favicon junto a tu resultado, obtenido de la misma manera que el icono de la pestaña del navegador y con un tamaño de visualización igualmente pequeño.

site.webmanifest: para qué sirve

A site.webmanifest archivo es un pequeño JSON que describe la aplicación instalable: nombre, colores e iconos declarados. Convierte «Añadir a pantalla de inicio» en algo que se ve y abre como aplicación Android. Si no creas PWA ni necesitas instalación, omítelo: un sitio con los tres archivos anteriores funciona. Si lo añades, enlázalo con <link rel="manifest" href="/site.webmanifest"> y referencia tus iconos con rutas absolutas dentro del JSON.

Diseñar para que sea legible a 16 px

Un icono de pestaña de navegador es diminuto, y la mayoría de los diseños de favicon fallan no por el formato de archivo, sino porque la ilustración original nunca se comprobó a su tamaño real de visualización. Los detalles que se ven claramente a 512 px —un logotipo tipográfico, líneas finas, un degradado con varias bandas visibles— se convierten en una mancha gris a 16 px.

• Reduce el diseño a una forma o letra dominante. Un glifo grueso o una silueta de icono resiste la reducción; un logotipo detallado con varios elementos, no.
• Aumenta el contraste y simplifica el color. Dos o tres colores planos se leen mejor a tamaños diminutos que un degradado, que tiende a mezclarse en un único tono medio.
• Engrosa los trazos finos. Una línea delicada que se ve bien a tamaño completo puede desaparecer al reducirse con suavizado a 16 px.
• Prueba reduciendo realmente la exportación a 16px y examinándola, no juzgando la ilustración completa y suponiendo que resistirá. Es el paso que más se omite al diseñar favicons.

Modo oscuro

Las barras de pestañas del navegador y la interfaz del sistema operativo pueden ser oscuras o claras según el tema del sistema, y un favicon diseñado solo para un fondo claro puede desaparecer sobre una barra oscura, o viceversa. Un favicon SVG puede adaptarse directamente a esto con una prefers-color-scheme consulta de medios dentro del estilo del SVG, cambiando rellenos según el tema. PNG e ICO son estáticos; si importa el modo oscuro, SVG es el único formato capaz.

Sin eso, un favicon con contraste suficiente sobre blanco y casi negro —normalmente un contorno fino o tono intermedio en vez de rellenos blancos o negros puros— cubre razonablemente casi todos los casos sin complejidad adicional.

Por qué el favicon no se actualiza y cómo solucionarlo

Los favicons se almacenan en caché con una persistencia inusual: los navegadores los consideran prácticamente estáticos y siguen mostrando un icono antiguo durante días o semanas incluso después de forzar la recarga de la página, porque su solicitud no está vinculada a la invalidación normal de caché como un script o una hoja de estilos. Tres cosas lo solucionan de forma fiable:

1. Cambia el nombre de archivo o añade un parámetro de versión a la URL — /favicon.ico?v=2 o cambiar el nombre a /favicon-v2.ico fuerza una solicitud nueva porque cambió la propia URL.
2. Borra la caché específica de favicons del navegador, que en Chrome es independiente del borrado de caché general (chrome://favicon-internals o borrar datos de navegación incluyendo «imágenes y archivos en caché»).
3. Dale tiempo. Incluso con una URL nueva, algunos navegadores y buscadores vuelven a rastrear y almacenar favicons en caché según su propio calendario, y el favicon de un resultado de búsqueda puede retrasarse varios días respecto al sitio publicado.

Preguntas frecuentes