Comment ajouter un favicon à mon site Web?

Quel balisage est la norme moderne pour ajouter un favicon à mon site? Quels sont le format et la taille d'image standard?

Pour fonctionner dans tous les navigateurs, il .icoest préférable, comme pour la taille, 32x32 est le plus largement utilisé, 16x16 fonctionne également (c'est la taille réelle utilisée dans 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 mettre en signet votre site sur iWhat, c'est un <link>élément distinct pour l'image, par exemple 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 comme http://www.favicon.cc/ pour importer une image et la convertir en favicon, ou simplement la créer à partir de zéro.

Après cela, si vous nommez votre fichier favicon.icoet 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 différents favicons sur différentes pages, placez votre favicon à un autre endroit, utilisez un autre nom que faviconetc.

http://en.wikipedia.org/wiki/Favicon

Balisage avec chemin http complet du domaine pour IE et conserver 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

Pour différents appareils, navigateurs et OS, vous pouvez utiliser différentes icônes. Par exemple ci-dessous est une liste qui pourrait vous inspirer. Corrigez / modifiez la liste au fur et à mesure que les choses avancent.

<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 laissez le fichier nommé favicon.ico (et c'est un ico) dans votre racine, il sera utilisé comme favicon.

J'ai eu un peu de mal à créer mon fichier .ico avec GIMP, mais ce post donne des instructions détaillées. L'astuce semble d'abord enregistrer au format GIF pour la convertir en une table de couleurs indexée, puis la convertir au format ICO.