Dimensions Favicon?
J'ai un favicon avec les dimensions de hauteur = 26px/width = 20px nommé favicon.png
<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
Cependant, dans mon navigateur, mon favicon.png est complètement déformé.
Question: Mon fichier favicon.png est-il supposé avoir une taille particulière? Aussi, puis-je utiliser une taille/dimension non standard et si oui, comment?
Réponse courte
Le favicon est supposé être un ensemble d'images 16x16, 32x32 et 48x48 au format ICO . Le format ICO est différent de PNG. Les images non carrées ne sont pas prises en charge.
Pour générer le favicon, pour de nombreuses raisons expliquées ci-dessous, je vous conseille d'utiliser ceci générateur de favicon . Divulgation complète: je suis l'auteur de ce site.
Réponse longue et complète
Le favicon doit être carré. Les navigateurs de bureau et Apple iOS ne prennent pas en charge les icônes autres que les carrés.
Le favicon est supporté par plusieurs fichiers:
- Une icône
favicon.ico. - Quelques autres icônes PNG.
Pour obtenir les meilleurs résultats sur les navigateurs de bureau (Windows/IE, MacOS/Safari, etc.), vous devez combiner les deux types d’icônes.
favicon.ico
Bien que tous les navigateurs de bureau puissent traiter cette icône, celle-ci s’applique principalement aux versions antérieures d’IE.
Le format ICO est différent du format PNG. Ce point est délicat, car certains navigateurs sont suffisamment intelligents pour traiter correctement une image PNG, même si celle-ci a été renommée à tort avec une extension ICO.
Un fichier ICO peut contenir plusieurs images et Microsoft recommande de placer les versions 16x16, 32x32 et 48x48 de l'icône dans favicon.ico . Par exemple, IE utilisera la version 16x16 pour la barre d'adresse et la version 32x32 pour un raccourci de barre des tâches.
Déclarez le favicon avec:
<link rel="icon" href="/path/to/icons/favicon.ico">
Cependant, il est recommandé de placer favicon.ico dans le répertoire racine du site Web et to ne pas le déclarer du tout et laisser les navigateurs modernes choisir les icônes PNG .
Icônes PNG
Les navigateurs de bureau modernes (IE11, versions récentes de Chrome, Firefox ...) préfèrent utiliser les icônes PNG. Les tailles habituelles attendues sont 16x16, 32x32 et "aussi grandes que possible" . Par exemple, MacOS/Safari utilise l’icône 196x196 si c’est la plus grande qu’elle puisse trouver.
Quelles sont les tailles recommandées? Choisissez vos plateformes préférées:
- La plupart des navigateurs de bureau: 16x16, 32x32, "aussi gros que possible"
- Android Chrome: 192x192
- Google TV: 96x96
- ... et d'autres plus ou moins documentés.
Les icônes PNG sont déclarées avec:
<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...
Attention: Firefox ne supporte pas l'attribut sizes et utilise la dernière icône PNG trouvée . Assurez-vous de déclarer l’image 32x32 en dernier: c’est suffisant pour Firefox, et cela l’empêchera de télécharger une grande image dont elle n’a pas besoin.
Notez également que Chrome ne prend pas en charge l'attribut sizes et tend à charger toutes les icônes déclarées . Mieux vaut ne pas déclarer trop d'icônes.
Plateformes mobiles
Cette question concerne les favicon de bureau, il n’est donc pas nécessaire de trop approfondir ce sujet.
Apple définit l'icône tactile pour la plate-forme iOS . iOS ne prend pas en charge les icônes non carrées. Il redimensionne simplement les images non carrées pour les rendre carrées (recherchez l'exemple de Kioskea) .
Microsoft définit l'image en mosaïque et le fichier browserconfig.xml .
Conclusion
Générer un favicon qui fonctionne partout est assez complexe. Je vous conseille d'utiliser ceci générateur de favicon . Divulgation complète: je suis l'auteur de ce site.
16x16 pixels, format * .ico.
Normes 2019 grâce à faviconit
J'utilise faviconit.com pour le meilleur support technique possible pour les navigateurs et les navigateurs. Vous téléchargez une image et ce site vous donne le code, les images converties et un fichier browserconfig.
Nous pourrions simplement télécharger un favicon manuellement sur notre site Web de 16x16 et il apparaîtra probablement dans presque tous les navigateurs.
Mais lorsque vous le marquez comme l'un de vos favoris sur votre smartphone ou votre tablette, nous avons besoin d'images plus grandes (60x60 à 144x144).
Et disons qu'un de nos utilisateurs crée un raccourci sur leur bureau. Dans ce cas, un 196x196 semble mieux!
Exemple de code de ce que faviconit vous donnerait, à côté de toutes les images converties:
<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="Apple-touch-icon" href="/favicon-57.png">
<link rel="Apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="Apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="Apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="Apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="Apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="Apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="Apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="Apple-touch-icon" sizes="180x180" href="/favicon-180.png">
Depuis Windows 8
Mais ce n'est pas tout. Depuis Windows 8, nous sommes en mesure de créer des raccourcis vers des sites Web avec des tuiles!
<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
Browserconfig.xml
Téléchargez un fichier nommé browserconfig.xml (pour activer les vignettes dans Windows> 8).
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/favicon-70.png"/>
<square150x150logo src="/favicon-150.png"/>
<square310x310logo src="/favicon-310.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>
Wikipedia dit ceci:
En outre, ces fichiers d'icônes peuvent avoir une taille de 16 × 16 ou 32 × 32 pixels et une profondeur de couleur de 8 bits ou de 24 bits (notez que les fichiers GIF ont une entrée limitée de 256 couleurs).
Je pense que le meilleur moyen est d'utiliser un gif 32x32 et de le tester avec différents navigateurs.
La solution la plus simple consiste à utiliser une (!) Image PNG (en 2018).
Ajoutez simplement ceci à la tête de votre document:
<link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png">
<link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png">
<link rel="Apple-touch-icon" href="/img/icon-196x196.png">
Le dernier lien est pour Apple (écran d'accueil), le deuxième pour Android (écran d'accueil) et le premier pour le reste.
Notez que cette solution ne prend PAS en charge les "mosaïques" dans Windows 8/10. Il supporte les images sous forme de raccourcis, de signets et d'onglets de navigation.
Non, vous ne pouvez pas utiliser une taille ou une dimension non standard, car cela causerait des ravages sur les navigateurs des internautes, où que les icônes soient affichées. Vous pouvez le faire en 12 x 16 (avec un remplissage blanc/transparent de quatre pixels sur le côté de 12 pixels) pour préserver votre rapport de format, mais vous ne pouvez pas agrandir (bien, vous pouvez, mais le navigateur le réduira).
favicon.ico est 16x16
<link rel="shortcut icon" href="favicon.ico"/>
Et j'utilise ceux-ci pour être belle dans mobile et tablette:
<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="Apple-touch-icon-precomposed" href="img/ico57.png">
Il est important d'utiliser le nom "favicon.ico" à la racine car de nombreux navigateurs essaieront de le trouver en premier.
On dirait que votre fichier devrait être de type .ico.
Consultez ce post sur les favicons:
Le format de favicon doit être carré, sinon le navigateur l'étendra. Malheureusement, Internet Explorer <11 ne prend pas en charge les types de fichiers .gif ou .png, mais uniquement le format .ico de Microsoft. Vous pouvez utiliser une application "générateur de favicon" comme: http://favicon-generator.org/
le format de l'image que vous avez choisie doit être 16x16 pixels ou 32x32 pixels, en utilisant des couleurs 8 bits ou 24 bits. Le format de l'image doit être PNG (norme W3C), GIF ou ICO. - Comment ajouter un favicon à votre site - QA @ W3C
Un favicon pour un site Web doit normalement être un fichier * .ico et peut être 32x32 ou 16x16. L'utilisation d'une taille non standard ne fonctionnera pas dans tous les navigateurs et apparaîtra déformée comme vous l'avez vue vous-même. Essayez de convertir cette image en utilisant ce site: http://www.favicon.cc/ puis essayez de l’utiliser?