El pequeño ícono con un impacto descomunal
Un favicon es el pequeño ícono que se muestra en las pestañas del navegador, las listas de favoritos, el historial del navegador y, desde 2019, en los resultados de búsqueda móvil de Google. Estas pequeñas imágenes tienen un peso de marca desproporcionado. Las investigaciones muestran que los usuarios distinguen entre pestañas abiertas principalmente mediante el reconocimiento de favicon, no el texto de la pestaña. Un favicon faltante o genérico hace que su sitio sea más difícil de encontrar entre varias pestañas abiertas.
Tamaños y formatos de favicon
| Formato | Tamaño | Requerido para |
|---|---|---|
| ICO | 16×16, 32×32 | Compatibilidad con pestañas del navegador heredado |
| PNG | 192×192 | Iconos de pantalla de inicio de Android, PWA |
| PNG | 512×512 | Pantallas de presentación PWA, pantallas de alto DPI |
| Icono táctil de Apple | 180×180 | iOS "Agregar a la pantalla de inicio" |
| SVG | Escalable | Navegadores modernos: perfectamente nítidos en cualquier tamaño |
La conexión de búsqueda de Google
Desde 2019, Google muestra favicons de sitios web junto a las URL en los resultados de búsqueda móviles. Un favicon faltante muestra un ícono de globo terráqueo genérico. Un favicon pixelado o de baja calidad indica a los usuarios (y potencialmente a las señales de calidad de Google) que un sitio puede tener un mantenimiento deficiente. Mantener su favicon nítido y actualizado es una consideración de SEO pequeña pero real.
Cómo agregar un Favicon a su sitio web
- Primero crea tu favicon como PNG de 512 × 512
- Genere ICO (varios tamaños: 16, 32, 48) usando un convertidor
- Lugar
favicon.icoen el directorio raíz de su sitio - Añadir a tu HTML
<cabeza>:<enlace rel="icon" href="/favicon.ico"> - Agregar ícono táctil de Apple:
<enlace rel="apple-touch-icon" href="/apple-touch-icon.png"> - Haga referencia a los iconos de 192 px y 512 px en su
manifiesto.jsonpara soporte de PWA
¿Por qué algunos sitios muestran un favicon roto?
Las causas más comunes: ruta de archivo incorrecta en el HTML, el servidor devuelve un 404 para favicon.ico o restricciones CORS que bloquean las solicitudes de favicon entre dominios. La mayoría de los navegadores almacenan en caché las solicitudes de favicon de forma agresiva: borre la caché de su navegador después de realizar cambios en el favicon.