Formatos de favicon explicados: ICO, PNG, SVG y qué necesitan los navegadores

Por qué los favicons siguen siendo extrañamente complicados

Un favicon parece una única imagen pequeña, pero se encuentra en la intersección entre la interfaz del navegador, los marcadores, las pestañas, los accesos directos fijados, los resultados de búsqueda, las pantallas de inicio móviles y las instalaciones de aplicaciones web progresivas. Cada contexto tiene expectativas ligeramente distintas.

Por eso los consejos sobre favicons suelen parecer confusos. Algunos equipos entregan solo un único favicon.ico porque antes eso bastaba. Otros generan una docena de archivos sin saber cuáles se están usando realmente. El punto medio sensato es más pequeño: entender qué hacen bien ICO, PNG y SVG, y luego entregar un conjunto compacto que cubra los navegadores actuales y los contextos de dispositivo comunes.

Los favicons no son el lugar para presumir de un pipeline de imágenes. Son el lugar para ser aburrido, explícito y compatible.

ICO: el formato antiguo que se niega a morir

ICO es el contenedor clásico de iconos de Windows. Puede contener varias imágenes bitmap en distintos tamaños, normalmente 16×16, 32×32 y 48×48 píxeles. Eso importa porque un favicon puede renderizarse muy pequeño en una pestaña del navegador, más grande en una lista de marcadores y de otra manera en accesos directos de Windows.

El detalle importante es que ICO es un contenedor, no simplemente una imagen. Un buen favicon.ico suele contener varios tamaños raster para que el navegador o el sistema operativo pueda elegir la coincidencia más cercana en lugar de escalar un único bitmap diminuto.

ICO sigue siendo útil por tres razones:

• Los navegadores pueden solicitar /favicon.ico automáticamente, aunque no lo enlaces en tu HTML.
• Algunos navegadores e integraciones antiguos lo esperan.
• Es una alternativa segura cuando se ignoran declaraciones de iconos más recientes.

Eso no significa que ICO deba ser tu único icono. Es incómodo de editar, no es especialmente amable con los flujos de trabajo modernos y es una mala fuente de verdad para una marca. Trátalo como la alternativa de compatibilidad.

En la práctica, coloca un /favicon.ico real en la raíz del sitio. No sirvas un 404 ahí salvo que disfrutes de logs ruidosos y reintentos innecesarios del navegador.

PNG: el caballo de batalla fiable

PNG sigue siendo el formato raster más predecible para favicons e iconos táctiles. Soporta transparencia, tiene soporte amplio y se comporta de forma consistente en navegadores y plataformas.

Para favicons, PNG es útil cuando quieres iconos con tamaños de píxel explícitos, como 32×32 o 48×48. Para iconos de pantalla de inicio móvil, PNG es prácticamente obligatorio en algunos entornos. Los iconos táctiles de Apple, por ejemplo, se basan en PNG en el uso normal de producción.

Algunas reglas prácticas ayudan:

• Exporta desde una fuente vectorial, no desde un bitmap ya pequeño.
• Haz que el icono sea legible a 16×16 antes de preocuparte por tamaños mayores.
• Añade suficiente padding para que la marca no parezca recortada en contextos redondeados o enmascarados.
• Evita texto fino, líneas delgadas e ilustraciones detalladas.

La compresión PNG normalmente no merece demasiada obsesión en favicons porque los archivos son diminutos. Aun así, no entregues un icono táctil de 500 KB porque salió directamente de una exportación de diseño. Si ya estás revisando decisiones de imagen más amplias, aquí también aplica el mismo pensamiento disciplinado de decisiones sobre formatos de imagen en la web moderna: elige el formato para el trabajo, no porque esté de moda.

SVG: la opción moderna y flexible

Los favicons SVG resultan atractivos porque son independientes de la resolución. Un único archivo pequeño puede renderizarse con limpieza en muchos tamaños, y puede editarse directamente en código o exportarse desde software de diseño.

Las versiones modernas de Chromium, Firefox y Safari soportan favicons SVG. Eso convierte a SVG en un buen formato de favicon principal para muchos sitios, especialmente cuando el icono es un logotipo simple, un glifo o una marca geométrica.

Pero los favicons SVG tienen matices.

Primero, el SVG debe ser autocontenido. No dependas de fuentes externas, imágenes remotas ni scripts. Los navegadores aplican restricciones al SVG usado como imagen, e incluso cuando algo funciona en un navegador puede fallar en otro.

Segundo, mantenlo visualmente simple. SVG no resuelve mágicamente el problema de los 16 píxeles. Una ilustración vectorial detallada sigue siendo una mancha cuando se comprime en una pestaña.

Tercero, ten cuidado con el estilo dinámico. Algunos equipos usan prefers-color-scheme dentro de un favicon SVG para que el icono se adapte a temas claros y oscuros del navegador. Esto puede funcionar, pero el comportamiento del navegador y el caché pueden ser irregulares. Si el reconocimiento de marca importa, un único icono robusto suele ser mejor que uno adaptativo e ingenioso.

SVG es una buena fuente y un buen formato moderno de entrega. No es una razón para omitir archivos de respaldo.

Qué buscan realmente los navegadores

Los navegadores descubren favicons de dos formas principales: enlaces HTML explícitos y solicitudes implícitas a la raíz.

El comportamiento implícito es el antiguo: si el navegador quiere un icono y no ha encontrado uno, puede solicitar /favicon.ico. Por eso el archivo ICO en la raíz sigue siendo útil incluso en sitios modernos.

El comportamiento explícito usa elementos <link> en el head del documento. Una configuración moderna y compacta se ve así:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

El manifest puede apuntar después a iconos PNG más grandes usados para aplicaciones web instalables:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Esta no es la única configuración válida, pero sí una buena base. Ofrece un SVG a los navegadores modernos, proporciona una alternativa ICO convencional, cubre los guardados en la pantalla de inicio de iOS y soporta contextos de instalación de apps.

El conjunto de favicon que la mayoría de los sitios deberían entregar

Para un sitio de marketing normal, un sitio de documentación, una app SaaS o una publicación, este conjunto es suficiente:

• /favicon.ico que contenga 16×16 y 32×32, opcionalmente 48×48.
• /icon.svg como favicon moderno escalable.
• /apple-touch-icon.png a 180×180.
• /icon-192.png y /icon-512.png si tienes un web app manifest.

Puedes añadir más tamaños si una plataforma tiene un requisito específico, pero no generes diez archivos por costumbre. Cada archivo extra es otra cosa que cachear, olvidar, nombrar mal o dejar obsoleta tras un rebranding.

Si tu sitio no es instalable y no tiene manifest, quizá no necesites los iconos de 192 y 512 píxeles. Si tu sitio se comporta como una app, probablemente sí.

Modos de fallo comunes

Los errores más comunes de favicon no son artísticos. Son problemas de entrega.

Uno es el caché agresivo. Los navegadores se aferran a los favicons con terquedad. Durante las pruebas, puede que un icono cambiado no aparezca hasta que hagas una recarga forzada, borres los datos del sitio, uses un nombre de archivo nuevo o pruebes en un perfil limpio. Para rebrandings en producción, cambiar /icon.svg?v=2 puede ayudar en HTML, pero el /favicon.ico de la raíz es más difícil porque los navegadores lo solicitan directamente. Reemplazar el archivo y esperar a que expiren los cachés suele formar parte del trabajo.

Otro problema común es el tipo MIME incorrecto. SVG debe servirse como image/svg+xml, PNG como image/png, e ICO normalmente como image/x-icon o image/vnd.microsoft.icon. Muchos navegadores son tolerantes, pero no todos los contextos lo son. Si algo falla solo en un navegador, inspecciona la respuesta de red antes de redibujar el icono. Aquí aplican los mismos hábitos usados al depurar redirecciones y cabeceras HTTP en producción: mira la respuesta real, no lo que el CMS afirma que está sirviendo.

Un tercer problema es la densidad del diseño. Los logotipos que funcionan de maravilla en la cabecera de un sitio web suelen fallar como favicons. El icono de pestaña es una prueba brutal. Elimina palabras, simplifica formas, aumenta el contraste y prueba en tamaños reales. Si el icono es contenido significativo dentro de la página, entonces importan consideraciones de accesibilidad como el texto alternativo; para el favicon en sí, es decoración de la interfaz del navegador, no contenido de la página. Para la distinción, consulta nuestra guía pragmática sobre texto alternativo de imágenes.

<!-- tool-cta:start -->

💡 Prueba esto: Genera de una sola vez las variantes ICO, PNG y SVG que esperan los navegadores modernos con Ultimate Favicon Generator.

<!-- tool-cta:end -->

Una checklist sencilla de implementación

Usa esta checklist antes de publicar:

1. Parte de un master vectorial limpio.
2. Prueba la marca a 16×16 y 32×32.
3. Exporta un favicon SVG autocontenido.
4. Genera una alternativa ICO con varios tamaños.
5. Exporta un icono táctil de Apple de 180×180.
6. Añade PNG de 192×192 y 512×512 si usas un manifest.
7. Coloca /favicon.ico en la raíz del sitio.
8. Verifica códigos de estado, tipos MIME y cabeceras de caché.
9. Prueba en al menos un navegador Chromium, Firefox y Safari si tu audiencia incluye dispositivos Apple.

Los favicons son pequeños, pero también muy visibles. Uno roto hace que un sitio parezca inacabado. Uno bien hecho desaparece en la interfaz, que es exactamente la idea.