tag - Google Chrome utiliza el tamaño incorrecto de Favicon
get favicon (4)
Después de algunas pruebas me parece lo siguiente:
- El primer icono encontrado se utilizará en la pestaña en cromo o en la esquina superior izquierda si está en modo de aplicación. También se utilizará para el enlace en el menú de inicio.
- El icono con el valor de Tamaño más grande se usará para el acceso directo del escritorio y la barra de tareas
Cuando tuve el siguiente orden:
<link rel="icon" href="icon64x64.png" sizes="64x64" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon16x16.png" sizes="16x16" type="image/png" />
Cambió el tamaño del icono de 64x64 para todos los iconos.
Cuando tuve el siguiente orden:
<link rel="icon" href="icon16x16.png" sizes="16x16" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon64x64.png" sizes="64x64" type="image/png" />
Utilizó el icono 16x16 en la pestaña / arriba a la izquierda en Chrome y en el acceso directo en el menú de inicio. Pero usó el icono de 64x64 en el escritorio y en la barra de tareas.
Cuando hice esto:
<link rel="icon" href="icon64x64.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="64x64" type="image/png" />
Utilizó la primera imagen (icon64x64.png) para los iconos del menú de tabulación / inicio. Utilizó la imagen con el valor de tamaños más grandes (tamaños = "64x64") para el escritorio y la imagen de la barra de tareas. No es la imagen más grande, la de mayor tamaño.
Tengo un icono que es solo un efecto borroso a 16x16, así que quería un icono diferente en ese tamaño.
Cuando creo un archivo ICO en la Mac usando ''Icon Composer'', permite especificar cinco imágenes (16x16, 24x24, 32x32, 48x48, 256x256). Si especifico un Google Chrome de 16x16 y 32x32 (Mac OS X), use la imagen de 32x32 como el icono que aparece junto al nombre en las pestañas y debajo de los favoritos (se redimensiona a 16x16). Esto hace que el icono se vea borroso.
¿Estoy creando mi favicon.ico correctamente? ¿Debo hacer algo más para decirle al navegador que use la imagen 16x16? Actualmente tengo:
<head>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
Esto me funcionó: hice un ícono de 32x32 con 64x64 y 128x128 integrados, y luego agregué tamaños = "64x64" a html
<link rel="shortcut icon" href="favicon.ico" sizes="64x64">
Para que esto funcione correctamente en Chrome, configure los sizes al tamaño de icono más grande que tenga disponible :
<link rel="shortcut icon" href="favicon.ico" sizes="256x256">
Lo probé con iconos en la Biblioteca de imágenes de Visual Studio , que incluyen tamaños de 16x16, 32x32, 48x48 y 256x256. Representa correctamente el tamaño de 16x16 en la barra de título del navegador, el tamaño de 32x32 en la barra de tareas y el tamaño apropiado (que puede variar) en el escritorio de Windows 7.
Si bien encontré muchos consejos sobre cómo enumerar un elemento de link para cada uno de los tamaños múltiples, o enumerar múltiples tamaños en un elemento de link , usar el tamaño más grande disponible fue la única forma en que pude obtener el favicon para representarlo correctamente en todos los tamaños apropiados . Parece que Chrome se reduce de un favicon demasiado grande al encontrar tamaños más pequeños apropiados, si están disponibles, pero aumenta al explotar el tamaño pequeño que ya tiene. Por lo tanto, el atributo de sizes se debe establecer en el tamaño más grande disponible.
Establecer el tamaño en 256x256 no parece causar problemas en otros navegadores. IE, Firefox y Safari usan el tamaño 16x16 como se esperaba.
Solo usaría la versión de 16px en el archivo ico. Chrome también es compatible con varias resoluciones para el icono fav. Por ejemplo:
<link rel="icon" href="/fav32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/fav64.png" sizes="64x64" type="image/png">
<link rel="icon" href="/fav128.png" sizes="128x128" type="image/png">
Ofrecerá tres tamaños de imagen diferentes para los iconos. Vea la especificación [1] para más detalles.
[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon