Png a 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.
Generador de 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, por lo 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.
Favicon svg
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 puede añadirse 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” />
Tamaño del favicon
Un favicon es un pequeño icono visible en la pestaña del navegador web, justo antes del título de la página. El tamaño de un favicon es de 16×16, ya que también se muestra junto a la URL de su sitio en la barra de direcciones del navegador. Es visible en la lista de marcadores de los usuarios y ayuda a reconocer fácilmente el sitio web de una lista de sitios web. En las herramientas del generador de favicon, si subes la imagen para el Favicon en formato de archivo PNG, JPG o GIF, lo convierte automáticamente al formato ICO.