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 , [1] asociados con un sitio web o página web en particular . [1] [2] Un diseñador webpuede 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. [3] Los navegadores que ofrecen 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 . [3] 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 utilizan el favicon como un icono de escritorio . [1]
Historia
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
colocado 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 . [5] [6] [7] [4] Un efecto secundario fue que el número de visitantes que habían marcado la página como favorito podía estimarse 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. [6]
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. [8] [ verificación fallida ] [9] [ verificación fallida ] La implementación estándar utiliza un elemento de enlace con un rel
atributo en la sección del documento para especificar el formato de archivo y el nombre y 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. [10] [11]
En 2003, el .ico
formato fue registrado por un tercero con la Autoridad de Números Asignados de Internet (IANA) bajo el tipo MIME image/vnd.microsoft.icon
. [12] [13] 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. [13] Una solución alternativa para Internet Explorer es asociarse .ico
con el image/x-icon
tipo MIME no estándar en los servidores web. [14]
RFC 5988 estableció un registro de relaciones de enlace IANA, [15] y rel="icon"
se registró en 2010 según la especificación HTML5 . Lo popular identifica teóricamente dos relaciones, "
shortcut
" y " icon
", pero " shortcut
" no está registrado y es redundante. En 2011, el estándar de vida HTML [16] especificó que, por razones históricas, " shortcut
" se permite inmediatamente antes de " icon
"; [17] sin embargo, " shortcut
" no tiene ningún 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 navegadores posteriores. [4]
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 | Desconocido | Desconocido | Desconocido |
Firefox | 1.0 [18] | 1.0 [18] | 1.0 [18] | Sí [19] | sí | 3,0 [19] | 41,0 [20] |
Google Chrome | sí | sí | 4.0 | No [21] [22] | 4.0 | No | 80 [23] |
explorador de Internet | 5,0 [24] | 11,0 [25] | 11,0 [25] | No [24] | No [24] | No [24] | No [26] |
Ópera | 7.0 [27] | 7.0 [27] | 7.0 [27] | 7.0 [27] | 7.0 [27] | 9.5 | 44,0 [28] |
Safari | sí | 4.0 | 4.0 | No | 4.0 | No | No estándar (12,0) [a] [29] [30] |
- ^ Safari, desde la versión 12.0, admite favicons SVG de un solo color en algunos casos en unmask-iconformatono estándar.
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 . [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 .
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í [31] > v13: No [32] | sí | sí | Sí [31] | Sí [31] | Sí [31] |
Google Chrome | No [31] | No | Sí [31] | Sí [31] | 1.0 [31] | No [31] |
explorador de Internet | 7.0 [31] | No | 5,0 [31] | 5,0 [31] | 7.0 [31] | 5,0 [31] |
Ópera | 7.0-12.17: Sí > v14: No [31] | No | 7.0 [31] | 7.0 [31] | 7.0 [31] | 7.0 [31] |
Safari | Sí [31] | sí | No [31] | Sí [31] | 1.0–8.0: Sí 9.0–11.0: No > 12.0: Opcional [33] | No [31] |
Opera Software agregó la capacidad de cambiar el favicon en Speed Dial en Opera 10 . [34]
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 sección del documento para especificar el formato, el nombre y la ubicación de los archivos.
Borde | Firefox | Google Chrome | explorador de Internet | Ópera | Safari | |
---|---|---|---|---|---|---|
rel = "icono de acceso directo" href = "https://example.com/myicon.ico" > | Sí [4] | Sí [4] | Sí [4] | Sí [4] [24] | Sí [4] | sí |
rel = "icon" type = "image / vnd.microsoft.icon" href = "https://example.com/image.ico" > | sí | sí | sí | Sí (de IE 9) [25] | sí | sí |
rel = "icon" type = "image / x-icon" href = "https://example.com/image.ico" > | Sí [4] | Sí [4] | Sí [4] | Sí (de IE 9) [35] | Sí [4] | sí |
rel = "icon" href = "https://example.com/image.ico" > | sí | sí | sí | Sí (de IE 11) [25] | sí | sí |
rel = "icon" type = "image / gif" href = "https://example.com/image.gif" > | sí | sí | sí | Sí (de IE 11) [25] | sí | sí |
rel = "icon" type = "image / png" href = "https://example.com/image.png" > | sí | sí | sí | Sí (de IE 11) [25] | sí | sí |
rel = "icon" type = "image / svg + xml" href = "https://example.com/image.svg" > | sí | sí | sí | sí | sí | No |
rel = "mask-icon" href = "https://example.com/image.svg" color = "red" > | No | No | No | No | No | Sí [36] |
favicon.ico ubicado en la raíz del sitio web | sí | Opcional [a] | sí | sí | Opcional [b] | sí |
precedencia: prefiera la versión raíz o (X) HTML enlazada | vinculado [31] | vinculado [31] | vinculado [31] | vinculado [31] | ? | ? |
- ^ Firefox solo acepta
favicon.ico
en la raíz del sitio web sin unaetiqueta si la configuración
browser.chrome.site_icons
está establecidatrue
enabout:config
. El valor predeterminado estrue
. Si se establece enfalse
, estos favicons se ignoran. - ^ Opera se carga
/favicon.ico
solo si laMultimedia/Always load favicon
opción enopera:config
está establecida en1
. 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 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. [37]
Solo SeaMonkey no recupera favicon.ico
archivos en la raíz del sitio web de forma predeterminada. [38]
Soporte de dispositivo
Para los dispositivos Apple con el sistema operativo iOS versión 1.1.3 o posterior, así como para algunos dispositivos Android, [39] es posible proporcionar un icono personalizado que los usuarios pueden mostrar en sus pantallas de inicio mediante el botón Agregar a la pantalla de inicio dentro de la hoja para compartir en Safari. [40] [41] Esta función se habilita proporcionando un en la
sección de documentos servidos por el sitio web. Si no se proporciona el icono personalizado, en su lugar se colocará una miniatura de la página web en la pantalla de inicio. [42]
El tamaño básico recomendado para este icono es 152 × 152 píxeles. [43]
Para el iPad, el tamaño básico es de 180x180 píxeles. Las tabletas Android [a través de Chrome] prefieren un icono PNG de 192x192. [44]
El archivo de icono al que 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 icono para indicar a los dispositivos que no apliquen brillo reflectante en la imagen. [41] [42]
- Con esquinas redondeadas, agregado por iOS
Los navegadores o dispositivos móviles tampoco requieren HTML para recuperar estos iconos. [42] La raíz del sitio web es la ubicación predeterminada para el archivo apple-touch-icon.png
(en orden de prioridad). [41] [42]
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. [45] Se pueden proporcionar varios 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"
type="file content-type"
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-icon
mé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".
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 la función. [46] [47]
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. [6]
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 . [11] [24]
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. [48] 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. [49]
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). [50]
En 2021, investigadores de la Universidad de Illinois demostraron un método para rastrear navegadores usando favicons. [51]
Referencias
- ↑ a b c d Lane, Dave (9 de agosto de 2008). "Creación de un favicon de resolución múltiple que incluya transparencia con GIMP" . Egressive.com . Archivado desde el original el 25 de diciembre de 2010 . Consultado el 25 de febrero de 2011 .
- ^ "¿Qué pasa con el nuevo mini icono de Google?" . BBC. 20 de enero de 2009 . Consultado el 25 de febrero de 2011 .
Ese cuadrado de 16x16 píxeles es el tamaño del favicon en cuestión, si no el alcance.
- ^ a b c Apple, Jennifer. "Favicon - Cómo crear un Favicon.ico" . Photoshopsupport.com . Consultado el 25 de febrero de 2011 .
- ^ a b c d e f g h yo j k l "Cómo agregar un icono de acceso directo a una página web" . Red de desarrolladores de Microsoft . Microsoft . Consultado el 15 de marzo de 2010 .
- ^ McGrew, Darin (26 de abril de 2007). "Preguntas frecuentes sobre creación web - 8.11. ¿Cómo puedo tener un icono personalizado cuando las personas marcan mi sitio como favorito?" . htmlhelp.com . Consultado el 23 de febrero de 2011 .
- ^ a b c Heng, Christopher (7 de septiembre de 2008). "¿Qué es Favicon.ico? Personalice los marcadores de su sitio" . thesitewizard.com . Consultado el 23 de febrero de 2011 .
- ^ "Creación de favicons con Adobe Photoshop y GoLive" . Adobe GoLive . Archivado desde el original el 7 de diciembre de 2003 . Consultado el 25 de febrero de 2011 .
- ^ "Especificación HTML 4.01" . Consorcio Mundial de la red. 24 de diciembre de 1999 . Consultado el 14 de marzo de 2011 .
- ^ "XHTML ™ 1.0: El lenguaje de marcado de hipertexto extensible" . Consorcio Mundial de la red. 26 de enero de 2000 . Consultado el 14 de marzo de 2011 .
- ^ Dubost, Karl (octubre de 2005). "Perfil de metadatos del sitio web: favicon, ..." World Wide Web Consortium . Consultado el 23 de febrero de 2011 .
- ^ a b Dubost, Karl (24 de octubre de 2005). "Cómo agregar un favicon a su sitio" . Consorcio World Wide Web . Consultado el 25 de febrero de 2011 .
- ^ Butcher, Simon (3 de septiembre de 2003). "Especificación publicada" . Autoridad de Números Asignados de Internet . Consultado el 25 de febrero de 2011 .
- ^ a b "Lista de cambios menores de IE9 RC" . IEInternals . Consultado el 7 de abril de 2016 .
- ^ Irish, Paul (15 de diciembre de 2010). "comete 37b5fec090d00f38de64 en html5-boilerplate de paulirish" . GitHub . Consultado el 25 de febrero de 2011 .
- ^ "Relaciones de enlace" . IANA .
- ^ Ian Hickson (19 de enero de 2011). "HTML es el nuevo HTML5" . El Blog de WHATWG . WHATWG .
- ^ "Revisión de HTML5 r6404" . Rastreador HTML5 .
- ^ a b c David (19 de julio de 2003). "Notas de la versión de Mozilla 0.9.6" . Mozilla . Consultado el 23 de febrero de 2011 .
- ^ a b "Error 111373: no permitir iconos de sitios animados (favicons)" . Consultado el 1 de junio de 2014 .
- ^ Daniel Holbert (12 de junio de 2015). "Error 366324 - Soporte de íconos de sitio SVG (favicons, íconos de atajos) - comentario 55" . Bugzilla @ Mozilla . Mozilla . Consultado el 12 de junio de 2015 .
- ^ rastreador, cromo. "ningún movimiento en favicon" . chromium.org . Consultado el 11 de abril de 2016 .
- ^ rastreador, cromo. "No se admiten favicons animados" . chromium.org . Consultado el 8 de noviembre de 2018 .
- ^ "Soporte para SVG en favicons - Estado de la plataforma Chrome" . 19 de noviembre de 2019 . Consultado el 16 de enero de 2020 .
- ^ a b c d e f Davis, Jeff (27 de diciembre de 2007). "¿Por qué no aparece el favicon de mi sitio en IE7?" . jeffdav en el código . Microsoft . Consultado el 11 de marzo de 2013 .
- ^ a b c d e f "Diversión con favicons" . Microsoft. 7 de septiembre de 2013 . Consultado el 3 de noviembre de 2013 .
- ^ "Soporte de favicon SVG" . Microsoft Connect. 3 de mayo de 2013 . Consultado el 4 de septiembre de 2014 .
- ^ a b c d e "Registro de cambios de Opera 7 para Windows" . Opera Software. 28 de enero de 2003 . Consultado el 28 de febrero de 2011 .
- ^ "Novedades de Opera" . Opera Software . Consultado el 24 de junio de 2017 .
- ^ "Safari Technology Preview 58, con características de Safari 12, ya está disponible" . WebKit. 6 de junio de 2018 . Consultado el 3 de marzo de 2019 .
- ^ "Favicons. Finalmente" . Iconfactory. 7 de junio de 2018 . Consultado el 3 de marzo de 2019 .
- ^ a b c d e f g h i j k l m n o p q r s t u v w x y z aa Francis, Lewis (11 de diciembre de 2007). "Gráfico de soporte de navegador moderno para favicon" . informationgift.com . Consultado el 23 de febrero de 2011 .
- ^ "Firefox considera que los favicons son riesgosos, los destierra de la barra de direcciones" . Engadget . Consultado el 10 de septiembre de 2012 .
- ^ "Cómo habilitar favicons en Safari para que puedas identificar sitios web en pestañas gráficamente" . iDownloadBlog. 14 de junio de 2018 . Consultado el 14 de octubre de 2020 .
- ^ "Opera 10.0 beta 2 para registro de cambios de Windows" . Opera Software. 16 de julio de 2009 . Consultado el 27 de febrero de 2011 .
- ^ "Lista de cambios menores de IE9 RC" . Microsoft. 11 de febrero de 2011 . Consultado el 16 de noviembre de 2013 .
- ^ "Creación de iconos de pestañas fijas" . Apple Inc. 12 de diciembre de 2016 . Consultado el 9 de abril de 2019 .
- ^ Jonathan T. Neal (16 de enero de 2013). "Comprender el Favicon" . Archivado desde el original el 23 de mayo de 2013 . Consultado el 30 de mayo de 2013 .
- ^ Mathias Bynens (14 de abril de 2010). "rel =" icono de acceso directo "considerado dañino" . Consultado el 15 de noviembre de 2011 .
- ^ Mathias Bynens (2 de marzo de 2011). "Todo lo que siempre quiso saber sobre los iconos táctiles" . Consultado el 15 de noviembre de 2011 .
- ^ "Directrices de interfaz humana de iPhone para aplicaciones web: métricas, directrices de diseño y consejos" . Apple . Consultado el 27 de mayo de 2010 .
- ^ a b c "Guía de contenido web de Safari: especificar un icono de página web para Web Clip" . Apple Inc. 15 de noviembre de 2010 . Consultado el 25 de febrero de 2011 .
- ^ a b c d McLellan, Drew (17 de enero de 2008). "Cómo configurar un icono de Apple Touch para cualquier sitio" . Allinthe head.com . Consultado el 11 de marzo de 2011 .
- ^ "Apple-touch-icon" . Apple . Consultado el 9 de abril de 2019 .
- ^ "Android Chrome y su favicon" . Consultado el 9 de septiembre de 2014 .
- ^ "HTML Living Standard, Sección 4.6.6.6 'Tipo de enlace" icono " ' " . WHATWG . Consultado el 17 de noviembre de 2015 .
- ^ "Error 111373: no permitir iconos de sitios animados (favicons)" . bugzilla.mozilla.org. 21 de noviembre de 2001.
- ^ "Error de Firefox 111373: no permitir iconos de sitios animados (mozilla.org)" . Noticias de hackers. 7 de julio de 2015.
- ^ Marlinspike, Moxie (21 de febrero de 2011). "Derrotar a Ssl usando Sslstrip (Marlinspike Blackhat)" . (ver descripción del video) . SecurityTube. Archivado desde el original el 13 de julio de 2011 . Consultado el 9 de julio de 2011 .
- ^ "Características de la versión 14 de Firefox" . Consultado el 18 de julio de 2012 .
- ^ Linus, Robin. "Tu huella digital en las redes sociales" . Consultado el 14 de octubre de 2016 .
- ^ Goodin, Dan (19 de febrero de 2021). "El nuevo truco de rastreo del navegador funciona incluso cuando vacias las cachés o vas de incógnito" . Ars Technica . Consultado el 21 de febrero de 2021 .
enlaces externos
- Propuestas con la organización de estándares web del W3C sobre cómo agregar un Favicon
- Sistemas y métodos que involucran la solicitud de patente de Favicons 2008