El concepto de favicon en HTML
Un favicon (del inglés *favorite icon*) es el pequeño icono que representa a tu sitio web en la pestaña del navegador, en los marcadores, en la barra de direcciones y en los resultados de búsqueda. Aunque su tamaño es diminuto, su impacto en la branding, la usabilidad y el SEO es considerable.
¿Por qué es importante?
- Reconocimiento de marca: Un favicon consistente refuerza la identidad visual.
- Experiencia de usuario: Facilita la identificación de la página entre múltiples pestañas.
- Señales de calidad para buscadores: Google indexa favicons y los muestra en los resultados de búsqueda, lo que mejora la CTR.
- Accesibilidad: Los lectores de pantalla anuncian la presencia del favicon, ayudando a usuarios con discapacidades visuales.
Formatos recomendados y compatibilidad
Los navegadores modernos aceptan varios formatos, pero la compatibilidad total se logra combinando varios de ellos:
.ico (icono Windows)
Contiene múltiples tamaños (16×16, 32×32, 48×48…) y es reconocido por todos los navegadores, incluido Internet Explorer.
.png (imagen sin pérdida)
Ideal para dispositivos de alta densidad (Apple Touch, Android). Soporta transparencias alfa.
Para máxima cobertura se recomienda servir .ico y .png simultáneamente.
Implementación básica en HTML
<!-- Favicon clásico (ICO) – funciona en todos los navegadores -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- PNG de alta resolución – recomendado para Chrome, Firefox, Edge -->
<link rel="icon" href="/icons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/icons/favicon-16x16.png" sizes="16x16" type="image/png">
<!-- Apple Touch Icon – para iOS Safari y PWA -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" sizes="180x180">
<!-- Android / Chrome Manifest – se incluye en manifest.json, pero también se declara aquí para compatibilidad -->
<link rel="manifest" href="/site.webmanifest">
Ejemplo completo de head con favicons
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio web</title>
<!-- Favicon clásico – siempre primera declaración -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- PNG multiresolución – Chrome, Firefox, Edge -->
<link rel="icon" href="/icons/favicon-48x48.png" sizes="48x48" type="image/png">
<link rel="icon" href="/icons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/icons/favicon-16x16.png" sizes="16x16" type="image/png">
<!-- Apple Touch Icon – iOS / Safari -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" sizes="180x180">
<!-- Manifest para PWA – permite que el icono se use como splash screen -->
<link rel="manifest" href="/site.webmanifest">
</head>
Mejores prácticas y optimización
- Genera varios tamaños: 16×16, 32×32, 48×48, 64×64, 128×128 y 180×180 (Apple). Usa herramientas como RealFaviconGenerator para crear el paquete completo.
- Cache‑control: Añade
Cache‑Control: max‑age=31536000, immutableen el servidor para que el favicon se almacene en caché durante un año. - Compresión sin pérdida: Prefiere PNG‑24 o WebP (solo para navegadores que lo soportan) para reducir el peso sin perder calidad.
- Accesibilidad: Incluye
altimplícito medianterel="icon". No se necesita atributoalt, pero asegúrate de que el nombre del archivo sea descriptivo. - Seguridad: Sirve los favicons a través de HTTPS y configura encabezados
Content‑Security‑Policyque incluyanimg-src 'self'para evitar inyección de recursos externos. - Pruebas cruzadas: Verifica en Chrome, Edge, Firefox, Safari (macOS/iOS), Opera y navegadores legacy como IE 11.
Comparativa rápida de formatos (max 2 columnas)
.ico
- Soporte universal (incluye IE)
- Contiene varios tamaños en un solo archivo
- No soporta transparencias alfa completas (solo 1‑bit)
- Tamaño típico: 1‑2 KB
.png / .svg
- Alta calidad, soporte de alfa 8‑bit
- Escalable (SVG) – ideal para pantallas de alta densidad
- No reconocido por IE 11 sin fallback .ico
- Tamaño variable: 0.5‑5 KB (PNG), <1 KB (SVG comprimido)
Solución de problemas (troubleshooting)
- Favicon no aparece en Chrome:
- Comprueba que la ruta sea absoluta o relativa correctas.
- Vacía la caché (chrome://settings/clearBrowserData) o abre en modo incógnito.
- Verifica que el servidor envíe
Content‑Type: image/x-iconoimage/png.
- Icono distorsionado en iOS:
- Usa
apple-touch-iconcon al menos 180×180 px. - Asegúrate de que el archivo sea PNG sin compresión excesiva.
- Usa
- Cache persistente después de actualizar:
- Renombra el archivo (p.ej.,
favicon-v2.ico) o agrega un query string (/favicon.ico?v=2). - Incluye
Cache‑Control: no‑cachetemporalmente mientras verificas el cambio.
- Renombra el archivo (p.ej.,
SEO y favicons
Google indexa el favicon y lo muestra en los resultados de búsqueda y en la barra de direcciones. Un favicon bien optimizado mejora la click‑through rate (CTR) y refuerza la autoridad de la marca. Incluye siempre la etiqueta <link rel="icon"> en la primera posición del <head> para que los crawlers lo detecten rápidamente.
Herramientas útiles
- RealFaviconGenerator – Genera paquetes completos y código HTML auto‑actualizado.
- favicon.io – Crea favicons a partir de texto o imágenes SVG.
- Comando
imagemagickpara convertir:convert source.svg -resize 48x48 favicon-48x48.png
Conclusión
El favicon es mucho más que un detalle estético: es una pieza clave de la identidad visual, la experiencia de usuario y el SEO. Siguiendo las mejores prácticas descritas – múltiples formatos, tamaños adecuados, encabezados de caché, HTTPS y pruebas de compatibilidad – garantizarás que tu sitio luzca profesional en cualquier dispositivo y navegador.
Todo lo que debes saber sobre el favicon en HTML: conceptos, mejores prácticas y ejemplos