Favicons: solían ser muy fáciles. Un simple mapa de bits favicon.ico de 16×16 píxeles solía ser suficiente. Era como un signo de puntuación al final de un proyecto; el equivalente para los desarrolladores web a terminar una frase con un signo de exclamación o un punto. Así era antes. Pero desde hace unos 20 años las cosas han cambiado.
Los favicons son iconos de acceso directo, pequeños iconos que ayudan a identificar una página web. Son una preocupación de marca a menudo olvidada para un sitio web. Se utilizan para aumentar la experiencia de navegación en algunos lugares clave. Dependiendo del navegador y del contexto, pueden aparecer:
Los favicons se asocian tradicionalmente a un sitio, pero como pueden incluirse a través del marcado en una página, podrías, si quieres, tener un favicon diferente para cada página de tu sitio, o incluso para cada solicitud de una página.
Los navegadores tienden a almacenar en caché el favicon, por lo que si estás planeando hacer algo elegante con múltiples favicons en tu sitio, tendrás que evitar esto. Una forma de conseguirlo sería añadir una marca de tiempo a la URL del favicon.
Cómo Favicon en 2022: Seis archivos que se ajustan a la mayoría de las necesidades5 de febrero de 2022TemasCompartir este post enTraduccionesSi estás interesado en traducir o adaptar este post, por favor, ponte en contacto con nosotros primero.Es hora de repensar cómo cocinamos un conjunto de favicons para los navegadores modernos y detener la locura del generador de iconos. En la actualidad, los desarrolladores de frontend tienen que lidiar con más de 20 archivos PNG estáticos sólo para mostrar un pequeño logotipo de un sitio web en una pestaña del navegador o en una pantalla táctil. Sigue leyendo para ver cómo adoptar un enfoque más inteligente y adoptar un conjunto mínimo de iconos que se adapte a la mayoría de las necesidades modernas.El tema de los favicons ha demostrado ser más exhaustivo de lo que cualquiera podría haber deseado, por lo que también he resumido todo el artículo en sólo dos fragmentos de código para aquellos que ya han sufrido bastante y que saben exactamente qué hacer. De todos modos, ¡recomiendo que te pongas a leer el resto! La versión extremadamente cortaEn lugar de servir docenas de iconos, todo lo que necesitas es sólo cinco iconos y un archivo JSON.Para el navegador que utiliza HTML:<link rel=”icon” href=”/favicon.ico” sizes=”any”><!– 32×32 –>
La especificación actual de HTML5 recomienda especificar los iconos de múltiples tamaños utilizando los atributos rel=”icon” sizes=”lista de dimensiones de iconos separada por espacios” dentro de una etiqueta. [fuente] Se pueden proporcionar múltiples formatos de iconos, incluidos los formatos contenedores como los archivos .ico de Microsoft y .icns de Macintosh, así como los gráficos vectoriales escalables, incluyendo el tipo de contenido del icono en forma de type=”file content-type” dentro de la etiqueta.
Para cubrir los usos del icono, créelo a 32×32 píxeles. Fíjate en el rel=”shortcut icon” para que IE reconozca el icono necesita la palabra shortcut que no es estándar. También envolvemos el favicon .ico en un comentario condicional de IE porque Chrome y Safari utilizarán el archivo .ico si está presente, a pesar de otras opciones disponibles, no lo que nos gustaría.
Lo anterior cubre IE hasta IE 9. IE 11 acepta favicons PNG, pero IE 10 no. También IE 10 no lee los comentarios condicionales por lo que IE 10 no mostrará un favicon. Con IE 11 y Edge disponibles no veo que IE 10 tenga un uso generalizado, así que ignoro este navegador.
Un favicon HTML aparece en la barra de pestañas del navegador junto al nombre de un sitio web. El favicon es una pequeña imagen que identifica el sitio web que el usuario está visitando. Los favicones se declaran en la etiqueta <head> de una página web.
Esta pequeña imagen o icono el favicon, que significa icono favorito. Los favicons no son obligatorios, pero son comunes en la mayoría de los sitios web. También se utilizan para los accesos directos en varios dispositivos. Así que todos los sitios y aplicaciones web deberían implementar favicon(s) para distinguirse.
Un favicon HTML es una imagen que aparece en la lista de pestañas de tu navegador. Verás tu favicon si marcas un sitio como favorito y en algunos sitios que te permiten incrustar enlaces. Un favicon facilita que un usuario identifique un sitio en su lista de pestañas, marcadores y en las listas de enlaces incrustados.
Un favicon se añade en la etiqueta <head> de una página web. La etiqueta <head> es donde va toda la llamada “meta” información. La metainformación son detalles sobre la propia página web, como el título de la página.
Supongamos que has terminado tu aplicación con la última tecnología. Quieres añadir un poco de brillo. Cuando alguien visite la URL de tu sitio web, debería ver un icono que identifique tu aplicación en la barra del navegador. Tienes tu diseño listo y quieres añadir tu favicon a la página.