Quelle est actuellement la meilleure façon d'afficher une favicon dans tous les navigateurs prenant en charge les favicons ?
https://stackoverflow.com/questions/37073
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Quelle est actuellement la meilleure façon d'afficher une favicon dans tous les navigateurs qui la prennent actuellement en charge ?
Merci d'inclure:
Quels formats d'image sont pris en charge par quels navigateurs.
Quelles lignes sont nécessaires à quels endroits pour les différents navigateurs.
La solution
J'opte ici pour une approche avec ceinture et bretelles.
Je crée une icône 32x32 à la fois dans le .ico et .png formats appelés favicon.ico et favicon.png.Le nom de l’icône n’a pas vraiment d’importance, sauf si vous utilisez des navigateurs plus anciens.
- Lieu
favicon.icoà la racine de votre site pour prendre en charge les anciens navigateurs (facultatif et pertinent uniquement pour les anciens navigateurs). - Placez favicon.png dans mon sous-répertoire d'images (juste pour garder les choses en ordre).
- Ajoutez le code HTML suivant dans le
<head>élément.
<link rel="icon" href="/images/favicon.png" type="image/png" /> <link rel="shortcut icon" href="/favicon.ico" />
Veuillez noter que :
- Le type MIME pour
.icoles fichiers ont été enregistrés sous le nom image/vnd.microsoft.icon par le IANA. - Internet Explorer ignorera le
typeattribut pour la relation entre les icônes de raccourci et c'est le seul navigateur à prendre en charge cette relation, il n'est pas nécessaire de la fournir.
Autres conseils
J'utilise le format .ico et mets les deux lignes suivantes dans le <head> élément:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Pour prendre également en charge les icônes tactiles pour les tablettes et les smartphones, je préfère l'approche de HTML5Boilerplate
Plus d'informations sur les icônes tactiles peuvent être trouvées dans Cet article.
Avec l'état actuel de la prise en charge du navigateur, vous n'avez même pas besoin d'ajouter la balise HTML pour le favicon dans votre document.Les navigateurs rechercheront automatiquement une liste de fichiers, voir cet exemple pour iOS :
Si aucune icône n'est spécifiée dans le HTML, iOS Safari recherchera le répertoire racine du site Web pour les icônes avec le préfixe Apple-Touch-Icon ou Apple-Touch-Icon-ICon.Par exemple, si la taille de l'icône appropriée pour l'appareil est de 57 × 57 pixels, iOS recherche des noms de fichiers dans l'ordre suivant:
- apple-touch-icon-57x57-precomposed.png
- icône-apple-touch-57x57.png
- apple-touch-icon-precomposed.png
- icône-apple-touch.png
Mon conseil est de ne pas inclure de favicon dans votre document, mais de préparer une liste de fichiers sur le site Web racine :
- apple-touch-icon-114x114-precomposed.png
- icône-apple-touch-144x144-precomposed.png
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-72x72-precomposed.png
- apple-touch-icon-precomposed.png
- icône-apple-touch.png
(57px*57px) - favicon.ico
HiDPI (32x32px)
Lorsque vous téléchargez un modèle depuis html5boilerplate.com ceux-ci sont tous inclus, il vous suffit de les remplacer par vos propres icônes.
IE6 ne peut pas gérer correctement les PNG, soyez prévenu.
Favicon doit être un fichier .ico pour fonctionner correctement sur tous les navigateurs.
Les navigateurs modernes prennent également en charge les images PNG et GIF.
J'ai constaté qu'en général, le moyen le plus simple d'en créer un est d'utiliser un service Web disponible gratuitement tel que favicon.cc.
Il existe également un site où vous pouvez vérifier comment est créé le favicon de n'importe quelle page.
Vous pouvez y voir un tutoriel sur la création de favicons, les types d'images et les résolutions, c'est sympa !
Avoir un favicon.* dans votre répertoire racine est automatiquement détecté par la plupart des navigateurs.Vous pouvez vous assurer qu'il est détecté en utilisant :
<link rel="icon" type="image/png" href="/path/image.png" />
Personnellement, j'utilise des images .png mais la plupart des formats devraient fonctionner.
