Favicon - Favicon

Un favicon ( / f æ v . Del ɪ ˌ k ɒ n / ; abreviatura de icono de favoritos ), también conocido como un icono de acceso directo , icono de la página web , icono de la pestaña , icono de URL , o icono del marcador , es un archivo que contiene una o más pequeñas iconos , asociados con un sitio web o página web en particular . Un diseñador web puede crear un icono de este tipo y cargarlo en un sitio web (o página web) por varios medios, y los navegadores web gráficos lo utilizarán. Los navegadores que brindan compatibilidad con favicon suelen mostrar 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 . Los navegadores que admiten una interfaz de documento con pestañas suelen mostrar 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 un icono de escritorio .

El favicon de Wikipedia , que se muestra en una versión anterior de Firefox (de 2008)

Historia

En marzo de 1999, Microsoft lanzó Internet Explorer 5 , que admitía favicons por primera vez. Originalmente, el favicon era un archivo llamado favicon.icoubicado en el directorio raíz de un sitio web. Se usó en los favoritos de Internet Explorer (marcadores) y junto a la URL en la barra de direcciones si la página estaba marcada como favorita . Un efecto secundario fue que la cantidad de visitantes que habían marcado la página como favorita se podía estimar por las solicitudes del favicon. Este efecto secundario ya no funciona, ya que todos los navegadores modernos cargan el archivo de favicon para mostrarlo en su barra de direcciones web, independientemente de si el sitio está marcado como favorito.

Estandarización

El favicon fue estandarizado por el World Wide Web Consortium (W3C) en la recomendación HTML 4.01, publicada en diciembre de 1999, y más tarde en la recomendación XHTML 1.0, publicada en enero de 2000. La implementación estándar utiliza un elemento de enlace con un relatributo en la <head>sección del documento para especificar el formato de archivo y el nombre y la ubicación del archivo. A diferencia del esquema anterior, el archivo puede estar en cualquier directorio del sitio web y tener cualquier formato de archivo de imagen.

En 2003, el .icoformato fue registrado por un tercero con la Autoridad de Números Asignados de Internet (IANA) bajo el tipo MIME image/vnd.microsoft.icon . Sin embargo, cuando se utiliza el .icoformato para mostrar como imágenes (por ejemplo, no como favicon), Internet Explorer no puede mostrar archivos servidos con este tipo MIME estandarizado. Una solución alternativa para Internet Explorer es asociarse .icocon el image/x-icontipo MIME no estándar en los servidores web.

RFC 5988 estableció un registro de relaciones de enlace de IANA 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, shortcuty icon, pero shortcutno está registrado y es redundante. En 2011, el estándar de vida HTML especificó que por razones históricas shortcutse permite inmediatamente antes icon; sin embargo, shortcutno tiene significado en este contexto.

Legado

Internet Explorer 5–10 solo admite el formato de archivo ICO . Netscape 7 e Internet Explorer versiones 5 y 6 muestran el favicon solo cuando la página está marcada como favorita, y no simplemente cuando se visitan las páginas como en los navegadores posteriores.

Implementación del navegador

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 función compatible.

Soporte de formato de archivo

La siguiente tabla ilustra la compatibilidad con el formato de archivo de imagen del favicon.

Navegador formato de archivo de imagen
ICO PNG GIF GIF animados JPEG APNG SVG
Borde sí sí sí No sí Desconocido sí
Firefox 1.0 1.0 1.0 sí sí 3,0 41,0
Google Chrome sí sí 4.0 No 4.0 No 80
explorador de Internet 5,0 11,0 11,0 No No No No
Ópera 7.0 7.0 7.0 7.0 7.0 9.5 44,0
Safari sí 4.0 4.0 No 4.0 No No estándar (12,0)

Además, estos 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 bits, 24 bits o 32 bits . 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 .

Uso de favicon

Esta tabla ilustra las diferentes áreas del navegador donde se pueden mostrar favicons.

Navegador Barra de dirección Lista desplegable de la barra de direcciones Barra de enlaces Marcadores Pestañas Arrastra al escritorio
Borde No sí sí sí sí sí
Firefox 1.0–12.0: Sí
> v13: No 		sí sí sí sí sí
Google Chrome No No sí sí 1.0 No
explorador de Internet 7.0 No 5,0 5,0 7.0 5,0
Ópera 7.0-12.17: Sí
> v14: No 		No 7.0 7.0 7.0 7.0
Safari sí sí No sí 1.0–8.0: Sí
9.0–11.0: No
> 12.0: Opcional 		No

Opera Software agregó la capacidad de cambiar el favicon en Speed ​​Dial en Opera 10 .

Cómo utilizar

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 relatributo en la <head>sección del documento para especificar el formato, el nombre y la ubicación del archivo.

Borde Firefox Google Chrome explorador de Internet Ópera Safari 
<link rel="shortcut icon"
 href="https://example.com/myicon.ico">
sí sí sí sí sí sí 
<link rel="icon"
 type="image/vnd.microsoft.icon"
 href="https://example.com/image.ico">
sí sí sí Sí (de IE 9) sí sí 
<link rel="icon" type="image/x-icon"
 href="https://example.com/image.ico">
sí sí sí Sí (de IE 9) sí sí 
<link rel="icon"
 href="https://example.com/image.ico">
sí sí sí Sí (de IE 11) sí sí 
<link rel="icon" type="image/gif"
 href="https://example.com/image.gif">
sí sí sí Sí (de IE 11) sí sí 
<link rel="icon" type="image/png"
 href="https://example.com/image.png">
sí sí sí Sí (de IE 11) sí sí 
<link rel="icon" type="image/svg+xml"
 href="https://example.com/image.svg">
sí sí sí sí sí No 
<link rel="mask-icon"
 href="https://example.com/image.svg" color="red">
No No No No No sí
favicon.ico ubicado en la raíz del sitio web sí Opcional sí sí Opcional sí
precedencia: prefiere la versión raíz o (X) HTML enlazada vinculado vinculado vinculado vinculado ? ?

Si hay enlaces para favicons PNG e ICO, los navegadores compatibles con favicon PNG seleccionan qué formato y tamaño usar de la siguiente manera. Firefox y Safari usarán el favicon que viene al final. Chrome para Mac utilizará el favicon que tenga el formato ICO; de lo contrario, el favicon de 32 × 32. Chrome para Windows usará el favicon que viene primero si es 16 × 16, de lo contrario, el ICO. Si ninguna de las opciones mencionadas anteriormente está disponible, ambos Chromes usarán 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 que no sean retina. Opera elegirá cualquiera de los íconos disponibles completamente al azar.

Solo SeaMonkey no recupera favicon.icoarchivos en la raíz del sitio web de forma predeterminada.

Recomendación de HTML5 para iconos en varios tamaños

La especificación HTML5 actual recomienda especificar varios tamaños para los iconos, utilizando los atributos dentro de una etiqueta. Se pueden proporcionar múltiples formatos de icono, incluidos formatos de contenedor como archivos .ico de Microsoft y Macintosh .icns , así como gráficos vectoriales escalables, al incluir el tipo de contenido del icono 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 de HTML5 y, en su lugar, utilizan el apple-touch-iconmétodo propietario detallado anteriormente. El Google Chrome navegador web, sin embargo, se seleccionará el juego del tamaño cercano a los establecidos en las cabeceras HTML para crear 128 × 128 píxeles de iconos de aplicaciones , cuando el usuario elige el accesos directos a aplicaciones ... Crear en el menú "Herramientas".

Iconos de la pantalla de inicio en dispositivos móviles

En los iPhones y iPads de Apple , así como en los dispositivos móviles con 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.

Dispositivos de Apple

Para los dispositivos Apple con el 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.

Esto funciona para cualquier sitio web. Pero para que iOS muestre el acceso directo con un icono, un 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 icono personalizado, se colocará una miniatura de la página web en la pantalla de inicio.

Los tamaños de los iconos de las aplicaciones en las diferentes clases de dispositivos son diferentes. Los tamaños recomendados para los íconos son 152x152 para iPads (hasta iPad 2 , lanzado en 2011), 167x167 para iPads con pantallas Retina ( iPad 3 y posteriores) y 180x180 para iPhones. Si no se proporciona un icono del tamaño correspondiente, iOS seleccionará el icono más grande con rel="apple-touch-icon"y lo escalará automáticamente.

Código de ejemplo

<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">


<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">

El archivo de icono al que hace referencia apple-touch-iconse 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-precomposedpodría proporcionar un icono para indicar a los dispositivos que no apliquen brillo reflectante en la imagen.

Los navegadores o dispositivos móviles tampoco requieren HTML para recuperar estos iconos. La raíz del sitio web es la ubicación predeterminada para el archivo apple-touch-icon.png(en orden de prioridad).

Dispositivos Android

En los 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 un favicon, se usa un ícono 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 múltiple de 48x48 píxeles. Para dispositivos modernos de alta resolución, Google recomienda proporcionar íconos en 192x192 píxeles.

Código de ejemplo

<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">

Android también admite archivos Web Manifest, que hacen posible una integración más profunda de los sitios web con el sistema. Un manifiesto web es un archivo JSON que especifica metadatos para una aplicación web progresiva. Permite al desarrollador no solo proporcionar los iconos, sino también un nombre corto para mostrar en la pantalla de inicio, así como los colores del tema. Sin embargo, no es necesario proporcionar un archivo de manifiesto web para que funcione la función Agregar a la pantalla de inicio .

Favicons animados

Varios navegadores como Chrome, Firefox y Opera admiten animaciones de favicons. Se ha abierto un informe de error para Firefox desde 2001 solicitando una forma de deshabilitar esta función.

Limitaciones y críticas

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.

El W3C no estandarizó el atributo rel, por lo que hay otras palabras clave, como el icono de acceso directo, que también acepta el agente de usuario .

Los favicons a menudo se manipulan como parte de ataques de suplantación de identidad o 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 a 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 man-in-the-middle como SSLStrip utilizan este truco. 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.

Dado que los favicons generalmente se encuentran en la raíz del directorio del sitio en el servidor, se pueden emplear con cierta confiabilidad para revelar si un cliente web está conectado a 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).

En 2021, investigadores de la Universidad de Illinois demostraron un método para rastrear navegadores usando favicons.

Referencias

enlaces externos