Definición:
Un favicon, abreviatura de favorite icon, es el icono que representa visualmente un sitio web o una página. Aparece en las pestañas, los marcadores, el historial y otros espacios del navegador; también puede mostrarse junto al nombre del sitio en determinados resultados de búsqueda.
Suele adaptar el logotipo, el isotipo o un elemento reconocible de la marca a un formato cuadrado y muy reducido. Su función principal es facilitar la identificación del sitio cuando convive con otras páginas abiertas o guardadas.
Aunque el formato ICO y el tamaño de 16 × 16 píxeles están ligados al origen del favicon, una implementación actual utiliza varios tamaños o un recurso escalable para responder a navegadores, pantallas de alta densidad, accesos directos y otras interfaces.
Índice de contenidos
Función del favicon
El favicon forma parte de la identidad visual de un sitio. No sustituye al logotipo ni explica por sí solo una marca, pero aporta una referencia constante en espacios donde apenas hay sitio para mostrar otros elementos gráficos.
En una ventana con muchas pestañas, el icono ayuda a localizar una página con rapidez. También permite reconocer un marcador o un acceso guardado sin leer primero todo el título. Esa señal visual mejora la experiencia de usuario, especialmente cuando el diseño conserva formas simples y distinguibles a pequeña escala.
Su presencia no aumenta automáticamente la fidelidad ni el posicionamiento. El valor procede de la coherencia con la marca, la legibilidad y la correcta disponibilidad del archivo en las superficies que lo utilizan.
Requisitos técnicos
Un solo archivo de 16 × 16 puede resultar insuficiente. Los navegadores y dispositivos emplean iconos en contextos diferentes y seleccionan el recurso más apropiado entre los declarados. Los elementos habituales de una implementación son los siguientes:
- ICO: Mantiene una compatibilidad amplia y puede contener varias resoluciones en un mismo archivo.
- PNG: Permite transparencia y resulta adecuado para tamaños rasterizados concretos.
- SVG: Conserva la nitidez al escalar en los navegadores compatibles, aunque conviene acompañarlo de alternativas cuando el contexto lo requiera.
- Apple touch icon: Es un recurso PNG específico para accesos guardados en dispositivos Apple y se declara por separado.
- Iconos del manifiesto: Se destinan a aplicaciones web instalables y complementan al favicon del documento.
Todos deben partir de una composición cuadrada. Es habitual preparar versiones de 16 × 16 y 32 × 32 para pestañas, además de archivos mayores como 180 × 180 o 192 × 192 para accesos y dispositivos. La combinación concreta depende de las plataformas que necesite cubrir el sitio.
Implementación en HTML
El navegador descubre el favicon mediante uno o varios elementos <link> incluidos en el <head> del documento. Los atributos rel, href, type y sizes describen la relación con la página, la ubicación, el formato y las dimensiones disponibles.
Una configuración puede declarar un archivo ICO, una variante SVG y el icono para dispositivos Apple:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Algunos navegadores también buscan /favicon.ico en la raíz del dominio, pero declarar los recursos evita depender solo de ese comportamiento. Las rutas deben responder correctamente, utilizar el tipo de archivo esperado y permanecer accesibles para usuarios y rastreadores.
Visibilidad en Google Search
Google puede mostrar el favicon junto al resultado de un sitio. Para optar a esa visualización, la página de inicio debe declarar el icono, tanto ella como el archivo han de poder rastrearse y la URL del recurso debe mantenerse estable.
Las directrices de Google para favicons exigen una relación de aspecto 1:1 y un mínimo de 8 × 8 píxeles, aunque recomiendan un archivo mayor de 48 × 48. Google admite un favicon por hostname: un subdominio puede tener uno propio, pero una subcarpeta no permite definir otro distinto para los resultados.
Cumplir estos requisitos permite que el icono sea apto, pero no garantiza que se muestre. El favicon ayuda a identificar la fuente del resultado; no es, por sí mismo, un factor que eleve la posición orgánica.
Buenas prácticas de diseño
El área disponible es pequeña, por lo que funcionan mejor las formas sencillas, con contraste suficiente y sin texto diminuto. Si el logotipo completo pierde legibilidad, puede emplearse un símbolo, una inicial o una versión simplificada que siga siendo reconocible.
Conviene revisar el icono sobre fondos claros y oscuros, comprobar cómo se recorta en distintas interfaces y evitar detalles que desaparezcan al reducir la imagen. La transparencia puede ayudar, siempre que los bordes conserven contraste y no dependan de un único color de fondo.
Comprobación y mantenimiento
Después de publicar el archivo, hay que verificar el código fuente, la respuesta HTTP y la representación en varios navegadores y dispositivos. Si aparece una versión antigua, puede deberse a la caché del navegador, del sitio o de una red de distribución, no necesariamente a un error en el HTML.
Cuando cambia la identidad visual, es preferible sustituir el recurso de forma controlada y conservar una URL estable cuando sea posible. También deben revisarse los iconos para Apple y para aplicaciones instalables, porque cada uno puede actualizarse y almacenarse de manera distinta.