¿Qué es un favicon?
Un favicon (abreviatura de “favorite icon”) es el pequeño icono que se muestra en las pestañas del navegador, marcadores, historial y otros elementos de la interfaz. Es uno de los elementos más visibles de la identidad de tu sitio.
Dónde aparecen los favicons
- Pestañas del navegador — La ubicación principal, visible cuando los usuarios tienen varias pestañas abiertas
- Barra de marcadores — Cuando los usuarios guardan tu sitio como favorito
- Historial — En la lista de historial del navegador
- Barra de direcciones — Algunos navegadores muestran el favicon junto a la URL
- Pantalla de inicio móvil — Cuando los usuarios añaden tu sitio a la pantalla de inicio de su teléfono
- Resultados de búsqueda — Google muestra favicons en los resultados de búsqueda en móvil
- Plataformas sociales — Algunas plataformas usan favicons en sus previsualizaciones de enlaces
¿Por qué es importante?
- Reconocimiento de marca — Los usuarios identifican tu sitio por su icono al cambiar entre pestañas
- Profesionalismo — Sin favicon se muestra el icono predeterminado del navegador, lo que da aspecto inacabado
- Impacto en SEO — Google muestra favicons en los resultados de búsqueda móviles; la ausencia de uno destaca negativamente
- Usabilidad — Con más de 10 pestañas abiertas, los favicons son la única forma de identificar cada pestaña
- Confianza — Los usuarios asocian los favicons con sitios establecidos y fiables
Cómo solucionarlo
Favicon básico (mínimo)
<link rel="icon" href="/favicon.ico" />Configuración moderna de favicon (recomendado)
<!-- Favicon SVG (escalable, compatible con modo oscuro) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Respaldo PNG para navegadores antiguos -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<!-- Apple Touch Icon (para pantalla de inicio en iOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Manifiesto de Web App (para Android) -->
<link rel="manifest" href="/site.webmanifest" />Buenas prácticas
Consejos de diseño
- Mantenlo simple — A 16x16px los detalles se pierden. Usa formas simples y colores llamativos
- Hazlo reconocible — Debe ser identificable de un vistazo, incluso a tamaños diminutos
- Usa los colores de tu marca — Coherencia con la identidad de tu marca
- Prueba en tamaños pequeños — Diseña a 512x512 pero prueba siempre a 16x16 y 32x32
- Considera el modo oscuro — Los favicons SVG pueden adaptarse al esquema de color del usuario:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
rect { fill: #4f46e5; }
@media (prefers-color-scheme: dark) {
rect { fill: #818cf8; }
}
</style>
<rect width="32" height="32" rx="8" />
</svg>Comparación de formatos de archivo
| Formato | Ventajas | Desventajas |
|---|---|---|
| SVG | Escalable, compatible con modo oscuro | No soportado en todos los navegadores |
| PNG | Soporte universal, nítido en tamaños definidos | Se necesitan múltiples tamaños |
| ICO | Soporte para navegadores antiguos, puede contener múltiples tamaños | Mayor tamaño de archivo |
Herramientas para crear favicons
- RealFaviconGenerator — Genera todos los archivos de favicon necesarios y el HTML
- Figma — Diseña a 512x512 y exporta en múltiples tamaños
- Favicon.io — Genera desde texto, imagen o emoji