El término favicon viene de favorite icon (ícono favorito), acuñado en 1999 cuando Internet Explorer 5 lo introdujo para los marcadores. Hoy es un estándar universal presente en todos los navegadores modernos.
Un favicon cumple tres roles clave: identidad de marca (el usuario reconoce tu sitio entre decenas de pestañas), profesionalismo (un sitio sin favicon transmite descuido) y experiencia móvil (iOS y Android lo usan cuando guardás el sitio en la pantalla de inicio).
A diferencia de un logo completo, un favicon debe funcionar a tamaños minúsculos (16×16 píxeles en desktop, hasta 512×512 en PWAs). Esto exige diseño deliberado: formas simples, contraste alto, sin detalles que desaparecen al reducir escala.
El formato .ico original está obsoleto. Los navegadores actuales prefieren PNG o SVG. La estrategia recomendada incluye:
- favicon.svg: escalable, ideal para navegadores modernos (Chrome 80+, Safari 15+). Soporta modo claro/oscuro con media queries CSS dentro del SVG.
- favicon-32x32.png y favicon-16x16.png: fallback para navegadores antiguos y claridad en tamaños específicos.
- apple-touch-icon.png (180×180): para iOS cuando el usuario guarda el sitio en su home screen.
- manifest.json: define múltiples tamaños (192×192, 512×512) para PWAs Android.
El tag HTML básico es <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Para máxima compatibilidad, incluí también las versiones PNG con sus respectivos tags. La mayoría de los navegadores buscan automáticamente /favicon.ico en la raíz, pero declararlo explícitamente es mejor práctica.
Implementá un favicon siempre, incluso en proyectos internos o borradores. Es tan básico como tener un título en la página. Para sitios en producción, es obligatorio.
El proceso: diseñá una versión cuadrada de tu logo o un símbolo representativo. Probalo a 16px: si no se distingue, simplificá. Exportá en múltiples formatos usando herramientas como RealFaviconGenerator o el generador de Genfy.
Para dark mode, el SVG permite incluir estilos condicionales: <style>@media (prefers-color-scheme: dark) { path { fill: white; } }</style>. Esto hace que el favicon se adapte automáticamente al tema del sistema del usuario.
En PWAs, el manifest.json debe declarar iconos en múltiples tamaños: 192×192 (mínimo), 512×512 (recomendado) y opcionalmente maskable icons con padding extra para Android 13+.
Usar solo .ico: este formato está limitado a 256×256 y no soporta transparencia moderna ni SVG. Favicon genérico: usar el logo completo sin adaptar resulta en un borrón ilegible a 16px.
Olvidar cache: los navegadores cachean agresivamente los favicons. Cambiá la URL (favicon.svg?v=2) al actualizar. Ignorar iOS: sin apple-touch-icon.png, iOS usa un screenshot horrible del sitio.
No probar en real: verificá cómo se ve en pestañas reales, tanto en tema claro como oscuro. Herramientas de diseño no replican la experiencia del navegador.
Ejemplos
favicon.svg con media query para dark modePNG en 16×16, 32×32 y 180×180 para compatibilidad totalmanifest.json con icons[192, 512] para PWA AndroidLink tag con type='image/svg+xml' para priorizar SVG
Preguntas frecuentes
¿Es mejor SVG o PNG para un favicon?
SVG es superior: escala perfecto, pesa menos y soporta dark mode con CSS. Pero incluí PNG 32×32 como fallback para Safari antiguo e IE.
¿Por qué mi favicon no se actualiza al cambiarlo?
Cache agresivo del navegador. Agregá un query string (?v=2) a la URL del favicon en el HTML y limpiá cache manualmente (Ctrl+Shift+R).
¿Qué tamaño debe tener el favicon?
Mínimo 32×32 PNG para desktop. Para PWA: 192×192 y 512×512 PNG. Para iOS: 180×180 PNG (apple-touch-icon). SVG es escalable así que cualquier tamaño funciona.