stringtranslate.com

favicon

El favicon de Wikipedia , mostrado en Firefox

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]

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.icoubicado 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]

Estandarización

En 2003, el .icoformato 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 .icoformato 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 .icocon el tipo MIME no estándar image/x-iconen 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, shortcuty icon, pero shortcutno 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, 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 sólo cuando la página está marcada como favorita, y no simplemente cuando se visitan las páginas como en navegadores posteriores. [4]

Ejemplos de favicons

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 característica compatible.

Soporte de formato de archivo de imagen

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 .

Uso de favicon

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]

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.

  1. ^ Safari, desde la versión 12.0, admite favicons SVG de un solo color en algunos casos en un formato de icono de máscara no estándar.
  2. ^ Firefox solo acepta favicon.icoen la raíz del sitio web sin <link>etiqueta si la configuración browser.chrome.site_iconsestá configurada trueen about:config. El valor predeterminado es true. Si se establece en false, estos favicons se ignoran.
  3. ^ Opera se carga /favicon.icosolo si Multimedia/Always load faviconla opción in opera:configestá 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.icoarchivos en la raíz del sitio web de forma predeterminada. [34]

Recomendación HTML5 para íconos en múltiples tamaños

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-iconmé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".

Iconos de la pantalla de inicio en dispositivos móviles

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.

Dispositivos Apple

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]

Código de ejemplo [40]
<!-- 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-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 í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]

Dispositivos Android

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]

Código de ejemplo [40]
<!-- 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]

favicons animados

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]

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 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]

Referencias

  1. ^ abcd Lane, Dave (9 de agosto de 2008). "Creación de un Favicon de resolución múltiple que incluya transparencia con GIMP". Egresivo.com . Archivado desde el original el 25 de diciembre de 2010 . Consultado el 25 de febrero de 2011 .
  2. ^ "¿Qué pasa con el nuevo miniicono 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.
  3. ^ abc Apple, Jennifer. "Favicon: cómo crear un Favicon.ico". Photoshopsupport.com . Consultado el 25 de febrero de 2011 .
  4. ^ abcdefghijkl "Cómo agregar un icono de acceso directo a una página web". Red de desarrolladores de Microsoft . Microsoft. Archivado desde el original el 5 de enero de 2018 . Consultado el 15 de marzo de 2010 .
  5. ^ 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 .
  6. ^ abc 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 .
  7. ^ "Creación de favicons con Adobe Photoshop y GoLive". AdobeGoLive . Archivado desde el original el 7 de diciembre de 2003 . Consultado el 25 de febrero de 2011 .{{cite web}}: Mantenimiento CS1: URL no apta ( enlace )
  8. ^ Butcher, Simon (3 de septiembre de 2003). "Especificación publicada". Autoridad de asignación de números de Internet . Consultado el 25 de febrero de 2011 .
  9. ^ ab "Lista de cambios menores de IE9 RC". IEInternos . Consultado el 7 de abril de 2016 .
  10. ^ Irlandés, Paul (15 de diciembre de 2010). "confirmar 37b5fec090d00f38de64 con el texto estándar html5 de paulirish". GitHub . Consultado el 25 de febrero de 2011 .
  11. ^ "Relaciones de enlace". IANA .
  12. ^ Ian Hickson (19 de enero de 2011). "HTML es el nuevo HTML5". El blog de WHATWG . QUÉ WG .
  13. ^ "Revisión HTML5 r6404". Rastreador HTML5 .
  14. ^ abc David (19 de julio de 2003). "Notas de la versión de Mozilla 0.9.6". Mozilla . Consultado el 23 de febrero de 2011 .
  15. ^ ab "Error 111373: no permitir íconos animados de sitios (favicons)" . Consultado el 1 de junio de 2014 .
  16. ^ Daniel Holbert (12 de junio de 2015). "Error 366324: compatibilidad con íconos de sitios SVG (favicons, íconos de acceso directo) - comentario 55". Bugzilla@Mozilla . Mozilla . Consultado el 12 de junio de 2015 .
  17. ^ rastreador, cromo. "sin movimiento en favicon". cromo.org . Consultado el 11 de abril de 2016 .
  18. ^ rastreador, cromo. "No se admiten Favicons animados". cromo.org . Consultado el 8 de noviembre de 2018 .
  19. ^ "Compatibilidad con SVG en favicons: estado de la plataforma Chrome". 19 de noviembre de 2019 . Consultado el 16 de enero de 2020 .
  20. ^ abcdef Davis, Jeff (27 de diciembre de 2007). "¿Por qué el favicon de mi sitio no aparece en IE7?". jeffdav en el código . Microsoft . Consultado el 11 de marzo de 2013 .
  21. ^ abcdef Eric Lawrence (7 de septiembre de 2013). "Diversión con Favicons". Microsoft. Archivado desde el original el 23 de mayo de 2021 . Consultado el 25 de junio de 2022 .
  22. ^ "Compatibilidad con favicon SVG". Conexión de Microsoft. 3 de mayo de 2013 . Consultado el 4 de septiembre de 2014 .
  23. ^ abcde "Registro de cambios de Opera 7 para Windows". Software de ópera. 28 de enero de 2003 . Consultado el 28 de febrero de 2011 .
  24. ^ "Novedades de Opera". Software de ópera . Consultado el 24 de junio de 2017 .
  25. ^ "Safari Technology Preview 58, con funciones de Safari 12, ya está disponible". Kit web. 6 de junio de 2018 . Consultado el 3 de marzo de 2019 .
  26. ^ "Favicons. Finalmente". Fábrica de iconos. 7 de junio de 2018 . Consultado el 3 de marzo de 2019 .
  27. ^ abcdefghijklmnopqrstu vwxyz aa Francis, Lewis (11 de diciembre de 2007). "Gráfico de compatibilidad de navegadores modernos con favicon". informacióngift.com . Consultado el 23 de febrero de 2011 .
  28. ^ "Firefox considera riesgosos los favicons y los elimina de la barra de direcciones". Engadget . Consultado el 10 de septiembre de 2012 .
  29. ^ "Cómo habilitar favicons en Safari para que pueda identificar gráficamente sitios web en pestañas". iDescargarBlog. 14 de junio de 2018 . Consultado el 14 de octubre de 2020 .
  30. ^ "Registro de cambios de Opera 10.0 beta 2 para Windows". Software de ópera. 16 de julio de 2009 . Consultado el 27 de febrero de 2011 .
  31. ^ "Lista de cambios menores de IE9 RC". Microsoft. 11 de febrero de 2011 . Consultado el 16 de noviembre de 2013 .
  32. ^ "Creación de iconos de pestañas fijadas". Apple Inc. 12 de diciembre de 2016 . Consultado el 9 de abril de 2019 .
  33. ^ Jonathan T. Neal (16 de enero de 2013). "Comprende el Favicon". Archivado desde el original el 23 de mayo de 2013 . Consultado el 30 de mayo de 2013 .
  34. ^ Mathias Bynens (14 de abril de 2010). "rel="icono de acceso directo" considerado dañino" . Consultado el 15 de noviembre de 2011 .
  35. ^ "HTML Living Standard, Sección 4.6.6.6 'Icono de tipo de enlace"'". QUÉ WG . Consultado el 17 de noviembre de 2015 .
  36. ^ "Pautas de interfaz humana de iPhone para aplicaciones web: métricas, pautas de diseño y sugerencias". Apple Inc. Archivado desde el original el 4 de junio de 2010 . Consultado el 27 de mayo de 2010 .
  37. ^ abc "Guía de contenido web de Safari: especificación de un icono de página web para clip web". Apple Inc. 15 de noviembre de 2010. Archivado desde el original el 20 de mayo de 2023 . Consultado el 2 de junio de 2023 .
  38. ^ abcd McLellan, Drew (17 de enero de 2008). "Cómo configurar un icono táctil de Apple para cualquier sitio". Allinthe head.com . Consultado el 11 de marzo de 2011 .
  39. ^ "Configuración de aplicaciones web". desarrollador.apple.com . Consultado el 3 de julio de 2021 .
  40. ^ abc "Cómo agregar un favicon a su sitio web: la guía del navegador moderno". Blog de Loqbooq . Archivado desde el original el 11 de julio de 2021 . Consultado el 3 de julio de 2021 .
  41. ^ "Diseño de materiales". Diseño de materiales . Consultado el 3 de julio de 2021 .
  42. ^ "Agregar a la pantalla de inicio: aplicaciones web progresivas (PWA) | MDN". desarrollador.mozilla.org . Consultado el 3 de julio de 2021 .
  43. ^ "Error 111373: no permitir íconos animados de sitios (favicons)". bugzilla.mozilla.org. 21 de noviembre de 2001.
  44. ^ "Error 111373 de Firefox: no permitir iconos animados de sitios (mozilla.org)". Noticias de piratas informáticos. 7 de julio de 2015.
  45. ^ Dubost, Karl (24 de octubre de 2005). "Cómo agregar un Favicon a su sitio". Consorcio Mundial de la red . Consultado el 25 de febrero de 2011 .
  46. ^ Marlinspike, Moxie (21 de febrero de 2011). "Derrotar a Ssl usando Sslstrip (Marlinspike Blackhat)". (ver descripción del vídeo) . Tubo de seguridad. Archivado desde el original el 13 de julio de 2011 . Consultado el 9 de julio de 2011 .
  47. ^ "Características de Firefox versión 14". 18 de julio de 2012 . Consultado el 18 de julio de 2012 .
  48. ^ Linus, Robin. "Tu huella digital en las redes sociales" . Consultado el 14 de octubre de 2016 .
  49. ^ Goodin, Dan (19 de febrero de 2021). "El nuevo truco de seguimiento del navegador funciona incluso cuando se vacían los cachés o se va de incógnito". Ars Técnica . Consultado el 21 de febrero de 2021 .

enlaces externos