Los favicons son pequeños archivos de iconos de 16×16 que se muestran junto a la URL de su sitio en la barra de direcciones de un navegador. Además, a menudo se muestran junto al nombre de su sitio en la lista de pestañas abiertas de un usuario y en las listas de favoritos, lo que facilita al usuario la identificación rápida entre otros sitios.
Los iconos de las aplicaciones son las imágenes que se pulsan en el smartphone para lanzar una aplicación. A medida que se lanzan nuevos teléfonos con pantallas de mayor resolución, se necesitan iconos de aplicaciones de mayor resolución. Los desarrolladores siguen queriendo mantener la compatibilidad con los teléfonos más antiguos con menor resolución, así que cuando se crea un icono de aplicación hay que crear varias variaciones de tamaño de la misma imagen. Esto es cierto para todos los teléfonos inteligentes como el iPhone y Android, e incluso para las tabletas como el iPad.
Aunque muchos navegadores web modernos admiten favicons guardados como GIF, PNG u otros formatos de archivo populares, todas las versiones de Internet Explorer siguen exigiendo que los favicons se guarden como archivos ICO (un formato de icono de Microsoft). Esta herramienta proporciona una forma sencilla de convertir cualquier GIF, PNG o JPEG a ICO, que es compatible con todos los navegadores web modernos. También te permite crear favicons desde cero a través de un práctico editor online. Además, el editor te permite ajustar manualmente los favicons generados para garantizar el mejor resultado posible.
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.
¿Qué es un favicon? Un favicon es un pequeño gráfico que suele aparecer en la parte superior de un navegador de Internet. La imagen se coloca en un archivo llamado “favicon.ico” que pertenece al directorio raíz de un sitio web. Esto ayuda a los navegadores de Internet a saber qué imagen mostrar junto al nombre del sitio web. Debido a su diminuto tamaño, un favicon funciona mejor como una imagen sencilla que se estiliza para complementar el tema de su sitio web. Aquí está el nuestro:
RealFaviconGenerator.net te permite generar imágenes de favicon para navegadores de Mac y de escritorio, dispositivos Android, tabletas Windows 8, iPad/iPhone y más. También puedes comprobar el aspecto de tu icono actual con este generador de favicon. Sólo tienes que introducir la dirección de tu sitio web o la URL en el campo vacío y hacer clic en el botón “Check Favicon” para obtener un informe sobre cómo se muestran tus iconos en varios problemas.
Si hay algún problema, puedes resolverlo simplemente con las recomendaciones proporcionadas. Hacerlo te ayudará a mejorar la visibilidad general de tu marca.Favic-o-Matic es un generador de favicon diverso que ofrece dos tipos de conversión diferentes. Puede crear iconos para todas las plataformas de forma gratuita o hacer archivos .ico de 32×32 y 16×16 píxeles.
Lea nuestro post más detallado sobre cómo aprovechar el almacenamiento en caché del navegador.Cache-ControlTambién puede utilizar Cache-Control. El siguiente fragmento se puede añadir a su archivo .htaccess en Apache para indicar al servidor que establezca la edad máxima del encabezado Cache-Control en 84600 segundos y en público para los archivos enumerados. Tenga en cuenta que el tipo de archivo ico está incluido.<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Este siguiente fragmento se puede añadir a su archivo de configuración de Nginx. El ejemplo siguiente utiliza las directivas de cabecera Cache-Control public y no-transform con una configuración de caducidad de 7 días. Tenga en cuenta que el tipo de archivo ico está incluido.location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
Lea nuestro post más detallado sobre cómo utilizar Cache-Control.Cargue su favicon desde su CDNAtra optimización que puede hacer es cargar realmente su favicon desde su CDN. Aunque este archivo no se solicite regularmente y sea muy pequeño, puede ser beneficioso porque cuando el navegador vaya a cogerlo, lo hará desde un POP más cercano.Para cargar el favicon desde tu CDN puedes simplemente actualizar el fragmento en tu cabecera. A continuación se muestra un ejemplo en nuestro sitio de prueba. Estamos apuntando a nuestro favicon que reside en nuestro CDN. Haciendo esto también puedes aprovechar las cabeceras Cache-Control y expires en los servidores de borde de la CDN y no tener que preocuparte por ellas en tu servidor de origen.<link rel=”icono de acceso directo” href=”//cdn.example.com/favicon.ico” type=”image/x-icon” />