Google Chrome utilise la mauvaise taille de Favicon
quand je crée un fichier ICO sur Mac en utilisant "Icon Composer" il permet de spécifier cinq images (16x16, 24x24, 32x32, 48x48, 256x256). Si je spécifie un 16x16 et 32x32 Google Chrome (Mac OS X) utilisez l'image 32x32 comme l'icône qui apparaît à côté du nom sur les onglets et sous les Favoris (il est redimensionné à 16x16). Cela provoque l'icône à l'aspect flou.
Est-ce que je crée mon favicon.ico correctement? Dois-je faire autre chose pour dire au navigateur d'utiliser l'image 16x16? Je actuellement:
<head>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
4 réponses
pour que cela fonctionne correctement dans Chrome, setsizespour la plus grande taille de l'icône que vous avez disponible:
<link rel="shortcut icon" href="favicon.ico" sizes="256x256">
je l'ai testé avec des icônes de l' Visual Studio Image Library, qui comprennent des tailles de 16x16, 32x32, 48x48 et 256x256. Il rend correctement la taille 16x16 dans la barre de titre du navigateur, la taille 32x32 dans la barre des tâches, et la taille appropriée (qui peut varier) sur le Bureau de Windows 7.
tandis que j'ai trouvé un beaucoup de conseils sur l'inscription d'un link élément pour chacun des multiples de la taille, ou la liste de plusieurs tailles dans un link element, en utilisant la plus grande taille disponible était le seul moyen que j'ai pu obtenir le favicon pour rendre correctement dans toutes les tailles appropriées. Il semble que Chrome balance bas à partir d'un favicon trop grand en trouvant des tailles appropriées plus petites, Si disponibles, mais des échelles en faisant exploser la petite taille, il possède déjà. Si le sizes l'attribut doit être ensemble pour la plus grande taille disponible.
paramétrer la taille à 256x256 ne semble pas causer de problèmes dans les autres navigateurs. IE, Firefox et Safari utilisent tous la taille 16x16 comme prévu.
j'utiliserais simplement la version 16px dans le fichier ico. Chrome prend également en charge plusieurs résolutions pour l'icône fav. Par exemple:
<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">
offrira trois tailles d'image différentes pour les icônes. Voir la spécification [1] pour plus de détails.
[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon
Après quelques tests, il me semble que la façon suivante:
- première icône rencontrée sera utilisé dans l'onglet dans chrome ou dans le coin supérieur gauche si en mode application. Il sera également utilisé pour le lien dans le menu démarrer.
- icône avec la plus grande valeur de taille sera utilisé pour le raccourci de bureau et la barre de tâche
Quand j'ai eu l'ordre suivant:
<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" />
il a redimensionné l'icône 64x64 pour tous les icône.
Quand j'ai eu l'ordre suivant:
<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" />
Il a utilisé l'icône 16x16 sur l'onglet/en haut à gauche de chrome et sur le raccourci dans le menu démarrer. Mais il a utilisé l'icône 64x64 sur le bureau et dans la barre des tâches.
Quand j'ai fait ceci:
<link rel="icon" href="icon64x64.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="64x64" type="image/png" />
il a utilisé la première image (icon64x64.png) pour les icônes de menu tab/start. Il a utilisé l'image avec les plus grandes tailles (tailles="64x64") valeur pour le bureau et l'image de la barre des tâches. Pas la plus grande image, celle avec la plus grande valeur de tailles.
j'ai une icône qui est juste un flou gradué à 16x16 donc je voulais une icône différente à cette taille.
cela a fonctionné pour moi: j'ai fait une icône 32x32 avec 64x64 et 128x128 intégrés, puis j'ai ajouté des tailles="64x64" à html
<link rel="shortcut icon" href="favicon.ico" sizes="64x64">