Tamaño del favicon illustrator
Averiguar qué tamaños/formatos/nombres de archivo utilizar para los favicons es confuso, especialmente si intentas dar soporte a los navegadores antiguos. Hay algunas listas muy buenas, pero a menudo están desactualizadas o incompletas. Así que aquí tienes una nueva:
Coloca favicon.ico en el directorio raíz—incluye una imagen de 16×16 y 32×32. Esto será efectivo para la mayoría de los navegadores. No añada un enlace a la cabeza—los navegadores que pueden usar iconos png pueden ignorarlos en favor del ico de menor calidad si lo hace.
Coloca apple-touch-icon-precomposed.png y apple-touch-icon.png en el directorio raíz para todo lo demás. Incluya ambos para obtener la máxima compatibilidad, ya que iOS 1 y BlackBerry OS6 no admiten iconos precompuestos, y Android 2.1 sólo admite iconos precompuestos.
Favicon ico varios tamaños
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” />
Convertidor de favicon
Un favicon es un icono del navegador que representa una marca o un sitio web. Los favicones, que suelen aparecer junto al título de una página web en las pestañas del navegador, también pueden encontrarse en las barras de direcciones, listas de favoritos, páginas de resultados de búsqueda, barras de herramientas, 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 unas cuantas 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.
Generador de favicon
Actualización para 2020: Volviendo a la cuestión original de los iconos de 16×16 frente a los de 32×32: la recomendación actual debería ser proporcionar un icono de 32×32, omitiendo por completo el de 16×16. Todos los navegadores y dispositivos actuales soportan iconos de 32×32. El icono se escalará habitualmente hasta 192×192 dependiendo del entorno (suponiendo que no haya tamaños mayores disponibles o que el sistema no los reconozca). El aumento de escala desde una resolución ultrabaja tiene un efecto notable, por lo que es mejor atenerse a 32×32 como la línea de base más pequeña.
Cuidado: Firefox no soporta el atributo de tamaño y utiliza el último icono PNG que encuentra. Asegúrate de declarar la imagen de 32×32 en último lugar: es suficiente para Firefox, y eso evitará que descargue una imagen grande que no necesita. edit: arreglado en 2016.
El tamaño es exactamente el que utiliza la pantalla de inicio de Android. El tamaño del icono de la pantalla de inicio de Apple es de 60px (3x), así que 180px y se reducirá. Otras plataformas utilizan el icono de acceso directo por defecto, que se reducirá también.
Puedes tener varios tamaños de iconos en el mismo archivo. Yo suelo crear favicons (archivo .ico) de 48, 32 y 16 píxeles. Puedes añadir cualquier tamaño de imagen que quieras. La pregunta es si el iPhone utilizará un archivo ico.