Un favicon ( / ˈ f æ v . ɪ ˌ k ɒ n / ; abreviatura de ícono favorito ), también conocido como ícono de acceso directo , ícono de sitio web , ícono de pestaña , ícono de URL o ícono de marcador , es un archivo que contiene uno o más pequeños iconos [1] asociados con un sitio web o página web en particular . [1] [2] Un diseñador web puede crear un icono de este tipo y subirlo a un sitio web (o página web) por varios medios, y los navegadores web gráficos lo utilizarán. [3] Los navegadores que brindan soporte para favicon generalmente muestran el favicon de una página en la barra de direcciones del navegador (a veces también en el historial) y junto al nombre de la página en una lista de marcadores . [3] Los navegadores que admiten una interfaz de documentos con pestañas generalmente muestran el favicon de una página junto al título de la página en la pestaña, y los navegadores específicos del sitio usan el favicon como ícono del escritorio . [1]
En marzo de 1999, Microsoft lanzó Internet Explorer 5 , que admitía favicons por primera vez. [4] Originalmente, el favicon era un archivo llamado favicon.ico
ubicado en el directorio raíz de un sitio web. Se usaba en los favoritos (marcadores) de Internet Explorer y junto a la URL en la barra de direcciones si la página estaba marcada como favorita. [5] [6] [7] [4] Un efecto secundario fue que el número de visitantes que habían marcado la página como favorita podía estimarse mediante las solicitudes del favicon. Este efecto secundario ya no funciona, ya que todos los navegadores modernos cargan el archivo favicon para mostrarlo en su barra de direcciones web, independientemente de si el sitio está marcado como favorito. [6]
En 2003, el .ico
formato fue registrado por un tercero ante la Autoridad de Números Asignados de Internet (IANA) bajo el tipo MIME image/vnd.microsoft.icon
. [8] [9] Sin embargo, cuando se utiliza el .ico
formato para mostrar como imágenes (por ejemplo, no como favicon), Internet Explorer no puede mostrar archivos servidos con este tipo MIME estandarizado. [9] Una solución alternativa para Internet Explorer es asociarlo .ico
con el tipo MIME no estándar image/x-icon
en servidores web. [10]
RFC 5988 estableció un registro de relaciones de enlaces de la IANA [11] y rel="icon"
se registró en 2010 según la especificación HTML5 . Lo popular <link rel="shortcut icon" type="image/png" href="image/favicon.png">
identifica teóricamente dos relaciones, shortcut
y icon
, pero shortcut
no está registrado y es redundante. En 2011, el estándar de vida HTML [12] especificó que, por razones históricas shortcut
, se permite inmediatamente antes icon
; [13] sin embargo, shortcut
no tiene significado en este contexto.
Internet Explorer 5–10 solo admite el formato de archivo ICO . Netscape 7 e Internet Explorer versiones 5 y 6 muestran el favicon sólo cuando la página está marcada como favorita, y no simplemente cuando se visitan las páginas como en navegadores posteriores. [4]
Las siguientes tablas ilustran la compatibilidad de varias funciones con los principales navegadores web. A menos que se indique lo contrario, los números de versión indican el número de versión inicial de una característica compatible.
La siguiente tabla ilustra la compatibilidad del formato de archivo de imagen para el favicon.
Además, dichos archivos de iconos pueden tener un tamaño de 16 × 16, 32 × 32, 48 × 48 o 64 × 64 píxeles y una profundidad de color de 8, 24 o 32 bits . [1] [3] El artículo sobre el formato de archivo ICO explica los detalles de los iconos con más de 256 colores en varias plataformas de Microsoft Windows .
Esta tabla ilustra las diferentes áreas del navegador donde se pueden mostrar los favicons.
Opera Software agregó la capacidad de cambiar el favicon en la marcación rápida en Opera 10 . [30]
Esta tabla ilustra las diferentes formas en que el navegador web puede reconocer el favicon. La implementación estándar utiliza un elemento de enlace con un rel
atributo en la <head>
sección del documento para especificar el formato, el nombre y la ubicación del archivo.
favicon.ico
en la raíz del sitio web sin <link>
etiqueta si la configuración browser.chrome.site_icons
está configurada true
en about:config
. El valor predeterminado es true
. Si se establece en false
, estos favicons se ignoran./favicon.ico
solo si Multimedia/Always load favicon
la opción in opera:config
está configurada en 1
. Consulte la página de soporte de Opera para obtener más detalles.Si hay enlaces para favicons PNG e ICO, los navegadores compatibles con favicons PNG seleccionan qué formato y tamaño usar de la siguiente manera. Firefox y Safari utilizarán el favicon que aparece en último lugar. Chrome para Mac utilizará cualquier favicon con formato ICO; de lo contrario, el favicon de 32×32. Chrome para Windows utilizará el favicon que aparece primero si es de 16×16; en caso contrario, el ICO. Si ninguna de las opciones antes mencionadas está disponible, Chrome usará el favicon que aparezca primero, exactamente lo contrario de Firefox y Safari. De hecho, Chrome para Mac ignorará el favicon de 16×16 y usará la versión de 32×32, solo para reducirlo a 16×16 en dispositivos sin retina. Opera elegirá entre cualquiera de los iconos disponibles al azar. [33]
Sólo SeaMonkey no recupera favicon.ico
archivos en la raíz del sitio web de forma predeterminada. [34]
La especificación HTML5 actual recomienda especificar varios tamaños para los iconos, utilizando los atributos dentro de una etiqueta. [35] Se pueden proporcionar múltiples formatos de íconos, incluidos formatos de contenedor como archivos .ico y .icns de Microsoft , así como gráficos vectoriales escalables, al incluir el tipo de contenido del ícono en el formato dentro de la etiqueta.rel="icon" sizes="space-separated list of icon dimensions"
<link>
type="file content-type"
<link>
A partir de iOS 5 , los dispositivos móviles de Apple ignoran la recomendación HTML5 y en su lugar utilizan el apple-touch-icon
método propietario que se detalla a continuación. Sin embargo, el navegador web Google Chrome seleccionará el tamaño más parecido entre los proporcionados en los encabezados HTML para crear íconos de aplicaciones de 128 × 128 píxeles , cuando el usuario elija Crear accesos directos a aplicaciones... en el menú "Herramientas".
En iPhones y iPads de Apple , así como en dispositivos móviles Android , los usuarios pueden anclar páginas web como íconos de accesos directos a su pantalla de inicio . Estos íconos de acceso directo se parecen a las aplicaciones normales y los desarrolladores web pueden proporcionar íconos dedicados para ellos.
Para dispositivos Apple con sistema operativo iOS versión 1.1.3 o posterior, los usuarios pueden anclar un sitio web a la pantalla de inicio usando el botón Agregar a la pantalla de inicio dentro de la hoja para compartir en Safari. [36] [37]
Esto funciona para cualquier sitio web. Pero para que iOS muestre el acceso directo con un ícono, el sitio web debe proporcionar un <link rel="apple-touch-icon" ...>
en la <head>
sección de documentos que ofrece el sitio web. Si no se proporciona el ícono personalizado, se colocará una miniatura de la página web en la pantalla de inicio. [38]
Los tamaños de los íconos de las aplicaciones en las diferentes clases de dispositivos difieren. Los tamaños recomendados para los iconos son 152x152 para iPads (hasta iPad 2 , lanzado en 2011), 167x167 para iPads con pantalla Retina ( iPad 3 y posteriores) y 180x180 para iPhones. Si no se proporciona ningún ícono del mismo tamaño, iOS seleccionará el ícono más grande rel="apple-touch-icon"
y lo escalará automáticamente. [39]
<!-- Para iPad --> < link rel = "apple-touch-icon" type = "image/png" tamaños = "167x167" href = "favicon-167x167.png" >
<!-- Para iPhone --> < link rel = "apple-touch-icon" type = "image/png" tamaños = "180x180" href = "favicon-180x180.png" >
El archivo de icono al que se hace referencia apple-touch-icon
se modifica para agregar esquinas redondeadas. En las versiones de iOS anteriores a iOS 7, se agregaría una sombra paralela y un brillo reflectante, y se apple-touch-icon-precomposed
podría proporcionar un ícono para indicar a los dispositivos que no apliquen brillo reflectante en la imagen. [37] [38]
Los navegadores o dispositivos móviles no requieren HTML para recuperar estos íconos. [38] La raíz del sitio web es la ubicación predeterminada para el archivo apple-touch-icon.png
(en orden de prioridad). [37] [38]
En dispositivos Android, los usuarios pueden usar la función Agregar a la pantalla de inicio en el menú de herramientas de Chrome para anclar una página web a su pantalla de inicio.
Esto también funciona para cualquier sitio web, pero si no se proporciona ningún favicon, se utiliza un icono genérico. Como los íconos de las aplicaciones de Android tienen un tamaño de 48x48 puntos, el sitio web debe proporcionar favicons con un tamaño de múltiplos de 48x48 píxeles. Para dispositivos modernos de alta resolución, Google recomienda proporcionar íconos de 192x192 píxeles. [41]
<!-- Para Android --> < link rel = "icon" type = "image/png" tamaños = "48x48" href = "favicon-48x48.png" > < link rel = "icon" type = "image/ png" tamaños = "192x192" href = "favicon-192x192.png" >
Android también admite archivos de manifiesto web, lo que permite integrar sitios web más profundamente dentro del sistema. Un manifiesto web es un archivo JSON que especifica metadatos para una aplicación web progresiva. Permite al desarrollador no solo proporcionar los íconos sino también un nombre corto para mostrar en la pantalla de inicio, así como los colores del tema. [42] Sin embargo, no es necesario proporcionar un archivo de manifiesto web para que funcione la función Agregar a la pantalla de inicio . [40]
Varios navegadores, como Firefox y Opera, admiten la animación de favicons. Se ha abierto un informe de error para Firefox desde 2001 solicitando una forma de desactivar esta función. [43] [44]
Debido a la necesidad de buscarlo siempre en una ubicación fija, el favicon puede provocar un tiempo de carga de página artificialmente lento y entradas 404 innecesarias en el registro del servidor si no existe. [6]
El W3C no estandarizó el atributo rel, por lo que hay otras palabras clave, como icono de acceso directo , que también son aceptadas por el agente de usuario . [45] [20]
Los favicons a menudo se manipulan como parte de ataques de phishing o de escuchas ilegales contra páginas web HTTPS . Muchos navegadores web muestran favicons cerca de áreas de la interfaz de usuario del navegador web, como la barra de direcciones, que se utilizan para transmitir si la conexión a un sitio web utiliza un protocolo seguro como TLS . Al cambiar el favicon por una imagen de candado familiar, un atacante puede intentar engañar al usuario haciéndole creer que está conectado de forma segura al sitio web adecuado. Las herramientas automatizadas de ataque de intermediario, como sslstrip, utilizan este truco. [46] Para eliminar esto, algunos navegadores web, como Firefox o Google Chrome, muestran el favicon dentro de la pestaña mientras muestran el estado de seguridad del protocolo utilizado para acceder al sitio web junto a la URL. [47]
Dado que los favicons suelen estar ubicados en la raíz del directorio del sitio en el servidor, se pueden utilizar con cierta confiabilidad para revelar si un cliente web ha iniciado sesión en un servicio determinado. Esto funciona haciendo uso de la función de redireccionamiento después de iniciar sesión de muchos sitios web, consultando el favicon en una URL de redireccionamiento después de inicio de sesión y probando la respuesta del servidor para discernir si el usuario recibe el recurso solicitado (lo que significa que está iniciado sesión), o en su lugar redirigido a la página de inicio de sesión (lo que significa que no han iniciado sesión en el servicio). [48]
En 2021, investigadores de la Universidad de Illinois demostraron un método para el seguimiento del navegador mediante favicons. [49]
Ese cuadrado de 16x16 píxeles es el tamaño del favicon en cuestión, si no el alcance.
{{cite web}}
: Mantenimiento CS1: URL no apta ( enlace )