J'ai un favicon avec les dimensions de height=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 tout déformé.
Question : Mon favicon.png est-il censé avoir une taille particulière ? En outre, puis-je utiliser une taille/dimension non standard et si oui, comment ?
La favicon est censée être un ensemble d'images 16x16, 32x32 et 48x48 au format ICO. . Le format ICO est différent du format PNG. Les images non carrées ne sont pas prises en charge.
Pour générer la favicon, pour de nombreuses raisons expliquées ci-dessous, je vous conseille d'utiliser ceci générateur de favicons . Divulgation complète : je suis l'auteur de ce site.
La favicon doit être carrée. Les navigateurs de bureau et Apple iOS ne prennent pas en charge les icônes non carrées.
La favicon est prise en charge par plusieurs fichiers :
favicon.ico icône.Afin d'obtenir les meilleurs résultats sur l'ensemble des navigateurs de bureau (Windows/IE, MacOS/Safari, etc.), vous devez combiner les deux types d'icônes.
favicon.icoBien que tous les navigateurs de bureau puissent gérer cette icône, elle est principalement destinée aux anciennes versions d'IE.
Le format ICO est différent du format PNG. Ce point est délicat car certains navigateurs sont assez intelligents pour traiter correctement une image PNG, même si elle a été renommée à tort avec une extension ICO.
Un fichier ICO peut contenir plusieurs images et Microsoft recommande de mettre des 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 la barre des tâches.
Déclarez le favicon avec :
<link rel="shortcut icon" href="http://stackoverflow.com/path/to/icons/favicon.ico">Cependant, il est recommandé de place favicon.ico dans le répertoire racine du site web et à ne pas la déclarer du tout et laisser les navigateurs modernes choisir les icônes PNG.
Les navigateurs de bureau modernes (IE11, versions récentes de Chrome, Firefox...) préfèrent utiliser des icônes PNG. Les tailles habituelles attendues sont 16x16, 32x32 et "aussi grand que possible". . Par exemple, MacOS/Safari utilise l'icône 196x196 si c'est la plus grande qu'il peut trouver.
Quelles sont les tailles recommandées ? Choisissez vos plateformes préférées :
Les icônes PNG sont déclarées avec :
<link rel="icon" type="image/png" href="http://stackoverflow.com/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="http://stackoverflow.com/path/to/icons/favicon-32x32.png" sizes="32x32">
...Attention : Firefox ne prend pas en charge l'option sizes et utilise la dernière icône PNG qu'il trouve. . Veillez à déclarer l'image 32x32 en dernier : elle est suffisante pour Firefox, et cela lui évitera de télécharger une grande image dont il n'a pas besoin.
Notez également que Chrome ne prend pas en charge l'option sizes et tend à charger toutes les icônes déclarées . Mieux vaut ne pas déclarer trop d'icônes.
Cette question concerne le favicon de bureau, il n'est donc pas nécessaire de trop s'étendre sur ce sujet.
Apple définit l'icône tactile pour la plateforme 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 (voir l'exemple de Kioskea). .
Android Chrome s'appuie sur l'icône tactile d'Apple et définit également une icône PNG de 192x192. .
Microsoft définit l'image de la tuile y el browserconfig.xml fichier .
Générer un favicon qui fonctionne partout est assez complexe. Je vous conseille d'utiliser ce générateur de favicons . Divulgation complète : je suis l'auteur de ce site.
Wikipedia a ceci à dire :
En outre, ces fichiers d'icônes peuvent avoir soit de 16×16 ou 32×32 pixels, et avoir une profondeur de couleur de 8 ou 24 bits (notez que les fichiers GIF ont une limitée de 256 entrées de palette de couleurs).
Je pense que le meilleur moyen est d'utiliser un gif 32x32 et de le tester avec différents navigateurs.
Tout ce dont vous avez besoin : http://www.favicon.cc/
Le format de la favicon doit être carré, sinon le navigateur l'étire. Malheureusement, Internet Explorer < 11 ne supporte pas les types de fichiers .gif, ou .png, mais seulement le format .ico de Microsoft. Vous pouvez utiliser une application "favicon generator" comme : http://favicon-generator.org/
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
