Tamaño del favicon 2022
¿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.
Generador de favicon
<link rel=”apple-touch-icon-precomposed” sizes=”152×152″ href=”/path/to/favicon-152.png”>Nota: todo lo que sea “retina” y anterior redimensionará el icono por defecto de 120px ya que no se ha especificado ningún atributo de tamaño.Para más información sobre los iconos táctiles, consulta la documentación oficial de Apple, que también explica cómo eliminar la barra de estado, añadir un título de aplicación personalizado e incluso una pantalla de lanzamiento para tu web-app.¿Realmente necesitas declarar estas etiquetas HTML en el <head>? No. Mientras los iconos táctiles se suban a la carpeta raíz de la página web, Apple sabrá buscarlos allí, sin embargo, otros sistemas operativos también utilizan estos iconos – ¡incluso Android! Es mejor definirlos en el <head>.WindowsWindows 10 (Metro UI) utiliza un formato de mosaico para mostrar los iconos de las apps (con una opción alternativa de “Añadir sitio a las Apps”), que es un poco más complejo cuando se compara con otros métodos, pero vamos a empezar con los tamaños (px) antes de discutir la implementación. Nota: los 270x serán escalados a 150x en pantallas de baja densidad.Un archivo browserconfig.xml con el siguiente código debe ser subido al directorio raíz de su sitio web:<?xml version=”1.0″ encoding=”utf-8″?>
Tamaño del favicon wordpress
Actualización para 2020: Ciñéndonos 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, obviando 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.
Tamaño del favicon de Wix
Lee nuestro post más detallado sobre cómo aprovechar la caché del navegador.Cache-ControlTambién puedes 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” />