Comment puis-je ajouter un favicon sur mon site?
Quel balisage est la norme moderne pour ajouter un favicon à mon site? Quels sont le format et la taille d'image standard?
Pour travailler dans tous les navigateurs, il est préférable d'utiliser .ico. En ce qui concerne la taille, 32x32 est le plus utilisé, 16x16 fonctionne également (il s'agit de la taille réelle utilisée par le navigateur dans la plupart des endroits).
Aussi, pas dans votre question, ils devraient avoir une profondeur de couleur de 8 ou 24 bits.
Il peut être intéressant de noter que si vous envisagez de réserver n'importe quel utilisateur à votre site, il s'agit d'un <link> séparé pour l'image, par exemple celui de StackOverflow:
<link rel="Apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/Apple-touch-icon.png">
Lequel est:
Vous pouvez utiliser un outil tel que http://www.favicon.cc/ pour importer une image et la convertir en favicon, ou tout simplement la créer à partir de zéro.
Après cela, si vous nommez votre fichier favicon.ico et le placez à la racine de votre site Web, la plupart des navigateurs Web l’obtiennent automatiquement.
Mais vous pouvez également le déclarer explicitement dans vos fichiers HTML comme ceci:
<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />
Avec les avantages d'utiliser un autre format que ico, utilisez des favicons différents sur des pages différentes, mettez votre favicon ailleurs, utilisez un autre nom que favicon etc.
Balisage avec le chemin http complet du domaine pour IE et conservez le favicon dans le dossier du document:
<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">
Format d'image standard:
- .ico
- 16 x 16 pixels
Vous pouvez utiliser différentes icônes pour différents appareils, navigateurs et systèmes d’exploitation. Par exemple, ci-dessous est une liste qui pourrait vous inspirer. Corrigez/modifiez la liste à mesure que les choses progressent.
<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="Apple-touch-icon" sizes="57x57" href="/images/icons/Apple-touch-icon-57x57.png" />
<link rel="Apple-touch-icon" sizes="60x60" href="/images/icons/Apple-touch-icon-60x60.png" />
<link rel="Apple-touch-icon" sizes="72x72" href="/images/icons/Apple-touch-icon-72x72.png" />
<link rel="Apple-touch-icon" sizes="76x76" href="/images/icons/Apple-touch-icon-76x76.png" />
<link rel="Apple-touch-icon" sizes="114x114" href="/images/icons/Apple-touch-icon-114x114.png" />
<link rel="Apple-touch-icon" sizes="120x120" href="/images/icons/Apple-touch-icon-120x120.png" />
<link rel="Apple-touch-icon" sizes="144x144" href="/images/icons/Apple-touch-icon-144x144.png" />
<link rel="Apple-touch-icon" sizes="152x152" href="/images/icons/Apple-touch-icon-152x152.png" />
<link rel="Apple-touch-icon" sizes="180x180" href="/images/icons/Apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/Android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />
Vous n'avez plus besoin d'un lien, mais c'est utile. Au lieu de cela, tant que vous laisserez le fichier nommé favicon.ico (et c’est un ico) à la racine, il sera utilisé comme favicon.
J'ai eu un peu de mal à créer mon fichier .ico avec GIMP, mais cet article donne des instructions détaillées. L'astuce semble d'abord enregistrer au format GIF pour la convertir en table de couleurs indexée, puis la convertir au format ICO.