Un favicon es un icono del navegador que representa una marca o un sitio web. Los favicones se ven con más frecuencia junto al título de una página web en las pestañas del navegador, pero también pueden encontrarse en las barras de direcciones, las listas de favoritos, las páginas de resultados de búsqueda, las barras de herramientas, el historial del navegador y otros lugares de la web.
Si estoy escudriñando rápidamente la página de resultados, probablemente decidiré explorar Joy Us Garden y Easy to Grow Bulbs antes que The Succulent Source por varias razones. No sólo aparecen en primer lugar en la SERP, sino que además sus favicons, URLs, títulos de páginas y meta descripciones apuntan a que son sitios web dedicados a todo lo relacionado con las plantas y que tienen una respuesta a mi pregunta.
Ahora imagina estos tres sitios web en las pestañas del navegador en un escritorio. Sería mucho más fácil recordar los favicons personalizados de Joy Us Garden y Easy to Grow Bulbs que el favicon por defecto de The Succulent Source. En un mar de pestañas abiertas, es más probable que vuelva a hacer clic en las pestañas con faviconos personalizados y pase más tiempo en esos sitios.
Por último, digamos que hago clic en cada uno de estos sitios. Al visitar Joy Us Garden y Easy to Grow Bulbs, me doy cuenta inmediatamente de que los faviconos personalizados se basan en los logotipos de los sitios web. El colorido logotipo de este último se muestra a continuación. Reconocerás el tulipán como su favicon.
¿Cuáles son las mejores prácticas a la hora de crear un favicon (en términos de tamaños, etc., ya tengo el diseño)? Me gustaría adaptarlo a todos los dispositivos posibles, ya sean móviles, tabletas, pantallas retina, etc. También no quiero que termine borroso, así que necesito saber qué densidad de píxeles usar y todo eso.
Los navegadores buscarán en el directorio raíz de tu sitio web el favicon.ico, así que puedes omitir el enlace. Algunos navegadores más antiguos utilizarán por defecto el favicon.ico declarado incluso si hay un PNG de tamaño más apropiado declarado, así que dejar el ICO sin declarar en la raíz y declarar PNGs de diferentes tamaños puede ser una buena idea.
Los iconos de clips web de iOS vienen en varios tamaños para diferentes dispositivos y resoluciones. Puede especificar uno o varios tamaños de iconos, si no se encuentra ningún icono del tamaño correspondiente, se utilizará el icono genérico sin tamaño declarado.
Si no se especifican iconos mediante un elemento de enlace, iOS buscará en el directorio raíz iconos con el prefijo apple-touch-icon. Los dispositivos iOS no son (curiosamente) los únicos que utilizan estos iconos (Android Chrome, por ejemplo), por lo que declararlos es la opción más segura.
Un favicon (/ˈfæv.ɪˌkɒn/; abreviatura de icono favorito), también conocido como icono de acceso directo, icono de sitio web, icono de pestaña, icono de URL o icono de marcador, es un archivo que contiene uno o más iconos pequeños,[1] asociados a un sitio o página web en particular.[1][2] Un diseñador web puede crear un icono de este tipo y subirlo a un sitio (o página web) por varios medios, y los navegadores web gráficos lo utilizarán. [Los navegadores que admiten favicones suelen mostrarlos 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 suelen mostrar el favicón de una página junto al título de la misma en la pestaña, y los navegadores específicos de un sitio utilizan el favicón como icono de escritorio[1].
En marzo de 1999, Microsoft lanzó Internet Explorer 5, que soportaba 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 utilizaba en los favoritos de Internet Explorer (marcadores) y junto a la URL en la barra de direcciones si la página estaba marcada.[5][6][7][4] Un efecto secundario era que se podía estimar el número de visitantes que habían marcado la página por las peticiones 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].
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 decirle al servidor que establezca la edad máxima del encabezado Cache-Control a 84600 segundos y a 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” />