Favicon
Un favicono o favicon —del inglés favorite icon o favorites icon, «icono de favoritos»— es una pequeña imagen asociada a una página web, un sitio web o una aplicación web. Los navegadores web lo emplean para identificar visualmente un sitio en distintas partes de su interfaz, como las pestañas, los marcadores o favoritos, el historial de navegación, las sugerencias de la barra de direcciones y, en algunos casos, los accesos directos o aplicaciones web instaladas.
Aunque originalmente se usaba sobre todo en listas de favoritos, el favicon se convirtió en un elemento habitual de identidad visual en la web. En la práctica moderna puede coexistir con otros iconos de sitio o de aplicación, como los iconos definidos en un manifiesto de aplicación web o los iconos usados por plataformas móviles.
Historia
[editar]El mecanismo se popularizó con Internet Explorer 5, lanzado por Microsoft en marzo de 1999.[1] En su implementación inicial, el sitio podía colocar un archivo llamado favicon.ico en el directorio raíz del servidor; Internet Explorer lo solicitaba al añadir una página a favoritos y lo mostraba junto al título del marcador.[2]
Ese comportamiento tuvo una consecuencia de privacidad: el servidor podía observar solicitudes a /favicon.ico y deducir que un usuario había marcado una página como favorita.[2] Con el tiempo, los navegadores empezaron a usar favicons también al visitar páginas, no solo al guardarlas, por lo que esa señal dejó de indicar de forma fiable que una página hubiese sido añadida a favoritos.
En 2005, el W3C recomendaba declarar el icono de forma explícita mediante un elemento link, en lugar de depender únicamente de una ruta predefinida en la raíz del sitio.[3] El estándar HTML moderno define el tipo de enlace icon para indicar recursos que representan una página o sitio en la interfaz del agente de usuario.[4]
Definición en HTML
[editar]La forma estándar de asociar un favicon a un documento HTML es incluir un elemento link con rel="icon" dentro de la sección <head> del documento:[4][5]
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
Si se declaran varios iconos, el navegador puede elegir el más adecuado según atributos como type, media y sizes. Si varios iconos son igualmente adecuados, se usa el último declarado; si el recurso elegido resulta no ser compatible, el navegador puede probar otro.[4][5]
Por razones históricas, aún es frecuente encontrar la forma rel="shortcut icon". La forma estándar y suficiente es rel="icon"; el estándar HTML conserva shortcut icon solo como caso heredado.[4][5]
Además del método explícito, algunos navegadores pueden solicitar automáticamente /favicon.ico si no encuentran una declaración rel="icon" en el documento.[4]
Formatos y tamaños
[editar]El formato original fue ICO, capaz de contener varias imágenes rasterizadas en diferentes tamaños. Para archivos ICO, el tipo de medio registrado por IANA es image/vnd.microsoft.icon, aunque image/x-icon sigue siendo común por razones históricas.[6]
Los navegadores modernos también pueden usar otros formatos de imagen, como PNG o SVG, dependiendo del soporte del navegador y de la plataforma. El atributo sizes permite declarar una o varias dimensiones disponibles, mientras que el valor any se usa para iconos escalables, como los SVG.[4][7]
No existe un único tamaño universal. Los iconos pequeños, como 16×16 o 32×32 píxeles, siguen siendo habituales para pestañas y marcadores, mientras que las aplicaciones web instalables suelen requerir iconos más grandes para pantallas de alta densidad y lanzadores del sistema operativo.[7]
Uso en aplicaciones web y plataformas móviles
[editar]Además del favicon usado por el navegador, una aplicación web puede declarar iconos en un manifiesto de aplicación web. El miembro icons del manifiesto define imágenes que representan a la aplicación en distintos contextos del sistema, como lanzadores, listas de aplicaciones, conmutadores de tareas o preferencias del sistema.[8]
En iOS, Safari permite definir un icono para los enlaces guardados en la pantalla de inicio mediante apple-touch-icon:[9]
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Safari también admite iconos vectoriales para pestañas fijadas mediante mask-icon, generalmente en formato SVG monocromático con un color declarado:[10]
<link rel="mask-icon" href="/website_icon.svg" color="red">
Estos iconos no siempre son favicons en sentido estricto, pero forman parte del conjunto de recursos gráficos usados para representar un sitio o aplicación web.
Comportamiento, caché y privacidad
[editar]Muchos navegadores solicitan automáticamente un favicon cuando el usuario visita o guarda una página. Si el archivo no existe, el servidor puede registrar respuestas de error, por ejemplo para /favicon.ico.[11] La especificación HTML también permite que, en ausencia de una declaración rel="icon", el agente de usuario intente obtener /favicon.ico como icono de respaldo.[4]
Los favicons suelen almacenarse en cachés específicas del navegador. La especificación HTML indica que los agentes de usuario no están obligados a actualizar inmediatamente el icono cuando cambia la lista de iconos declarados, aunque se recomienda que lo hagan.[4] Por eso, al cambiar el favicon de un sitio, los usuarios pueden seguir viendo temporalmente el icono anterior.
La caché de favicons también ha sido estudiada como vector de seguimiento. En 2021, investigadores de la Universidad de Illinois en Chicago describieron una técnica que permitía almacenar un identificador en la caché de favicons del navegador mediante entradas asociadas a subdominios, con el fin de reconstruirlo en visitas posteriores.[12]
Véase también
[editar]Referencias
[editar]- ↑ «Microsoft Announces Unprecedented Industry Support for Internet Explorer 5» (en inglés). Microsoft. 18 de marzo de 1999. Consultado el 15 de junio de 2026.
- 1 2 Oakes, Chris (16 de abril de 1999). «Another Privacy Hole in IE 5.0?». Wired (en inglés). Consultado el 15 de junio de 2026.
- ↑ Karl Dubost (24 de octubre de 2005). «How to Add a Favicon to your Site» (en inglés). W3C. Consultado el 15 de junio de 2026.
- 1 2 3 4 5 6 7 8 «HTML Standard: Link type “icon”» (en inglés). WHATWG. Consultado el 15 de junio de 2026.
- 1 2 3 «HTML attribute: rel» (en inglés). MDN Web Docs. 20 de abril de 2026. Consultado el 15 de junio de 2026.
- ↑ «image/vnd.microsoft.icon» (en inglés). Internet Assigned Numbers Authority. Consultado el 15 de junio de 2026.
- 1 2 «icons - Web app manifest» (en inglés). MDN Web Docs. 23 de junio de 2025. Consultado el 15 de junio de 2026.
- ↑ «Web Application Manifest: icons member» (en inglés). W3C. 7 de mayo de 2026. Consultado el 15 de junio de 2026.
- ↑ «Configuring Web Applications» (en inglés). Apple Developer Documentation Archive. 12 de diciembre de 2016. Consultado el 15 de junio de 2026.
- ↑ «Creating Pinned Tab Icons» (en inglés). Apple Developer Documentation Archive. 12 de diciembre de 2016. Consultado el 15 de junio de 2026.
- ↑ «Providing a favorites icon» (en inglés). IBM Documentation. Consultado el 15 de junio de 2026.
- ↑ Solomos, Konstantinos; Kristoff, John; Kanich, Chris; Polakis, Jason (2021). «Tales of Favicons and Caches: Persistent Tracking in Modern Browsers». NDSS Symposium 2021 (en inglés) (Internet Society). Consultado el 15 de junio de 2026.
Enlaces externos
[editar]- Definición de
rel="icon"en el estándar HTML (en inglés) - Cómo añadir un favicon, W3C (en inglés)
- Documentación de MDN sobre
rel="icon"(en inglés) - Favicon Maker, generador de faviconos en línea (en inglés)
