Quel est actuellement le meilleur moyen pour obtenir un favicon à afficher dans tous les navigateurs qui prennent en charge?
Veuillez inclure:
Qui formats d'image sont pris en charge par les navigateurs.
Les lignes qui sont nécessaires dans quelles places pour les différents navigateurs.
Je vais faire une ceinture et bretelles appraoch ici. J'ai créer un 32x32 icône à la fois l' .ico et .png formats appelés favicon.ico et favicon.png. Le nom n'a pas vraiment d'importance sauf si vous travaillez avec des navigateurs plus anciens.
favicon.ico à la racine de votre site afin de soutenir les anciens navigateurs (en option et uniquement pour les navigateurs plus anciens.<head/> élément.<link rel="icon" href="http://stackoverflow.com/images/favicon.png" type="image/png" /> <link rel="shortcut icon" href="http://stackoverflow.com/favicon.ico" />
Veuillez noter que:
.ico fichiers a été enregistrée en tant qu'image/vnd.microsoft.icône par l' IANA. type de l'attribut de l'icône de raccourci de la relation et depuis IE est le seul navigateur à l'appui de cette relation, vous n'avez pas besoin d'alimentation.
À soutenir également des icônes tactiles de tablettes et les smartphones, je préfère l'approche de HTML5Boilerplate
Plus d'informations sur les icônes peuvent être trouvées dans cet article.
Avec l'état actuel de votre soutien, vous n'avez même pas à ajouter la balise HTML pour la favicon de votre document. Les navigateurs de recherche automatiquement une liste de fichiers, voir cet exemple pour iOS:
Si aucune icône n'est spécifié dans le code HTML, iOS Safari de la recherche site de répertoire racine pour les icônes avec le apple-touch-icon ou apple-touch-icon-précomposé préfixe. Par exemple, si l' la taille de l'icône de l'appareil est de 57 × 57 pixels, iOS recherches pour les noms de fichiers dans l'ordre suivant:
- apple-touch-icon-57x57-précomposé.png
- apple-touch-icon-57x57.png
- apple-touch-icon-précomposé.png
- apple-touch-icon.png
Mon conseil est de ne pas inclure un favicon dans votre document, mais ont une liste de fichiers prêts à la racine du site:
(57px*57px)
HiDPI (32x32px)
Lorsque vous téléchargez un modèle de html5boilerplate.com ce sont tous inclus, vous avez juste à les remplacer par vos propres icônes.
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.
