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 cocinar 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 –>
Si te tomas en serio la marca de tu negocio, los favicons deberían formar parte de tu arsenal de marketing. No son el aspecto más importante de un sitio web, pero son detalles como éste los que hacen que los clientes potenciales te recuerden y te distingan de la competencia.
Favicon, abreviatura de “icono favorito”, fue originalmente una nueva función del navegador Internet Explorer en 1999. Cuando los usuarios marcaban un sitio a través de Internet Explorer, aparecía el icono junto al nombre del sitio web en la lista de favoritos.
Tengo unas cuantas páginas estáticas que son sólo HTML, que mostramos cuando el servidor se cae. ¿Cómo puedo poner un favicon que he hecho (es de 16x16px y está en el mismo directorio que el archivo HTML; se llama favicon.ico) como el icono de la “pestaña” por así decirlo? He leído en Wikipedia y mirado algunos tutoriales y he implementado lo siguiente:
No he podido conseguir que esto funcione localmente aunque el código se comprueba que sólo funcionará correctamente una vez que el servidor comience a servir el sitio. Intenta subirlo al servidor y refrescar tu caché y debería funcionar bien.
Esta tabla muestra cómo utilizar el favicon en los principales navegadores. La implementación estándar utiliza un elemento de enlace con un atributo rel en la sección <head> del documento para especificar el formato del archivo y su nombre/ubicación.
Si el favicon es una imagen de tipo png, no funcionará en versiones antiguas de Chrome. Sin embargo, funcionará bien en FireFox. Además, no olvides borrar la caché de tu navegador mientras trabajas en estas cosas. Muchas veces, el código está bien, pero el caché es el verdadero culpable.
Si te tomas en serio la marca de tu negocio, los favicons deberían formar parte de tu arsenal de marketing. No son el aspecto más importante de un sitio web, pero son detalles como éste los que hacen que los clientes potenciales te recuerden y te distingan de la competencia.
Favicon, abreviatura de “icono favorito”, fue originalmente una nueva función del navegador Internet Explorer en 1999. Cuando los usuarios marcaban un sitio a través de Internet Explorer, aparecía el icono junto al nombre del sitio web en la lista de favoritos.