Un favicon c'est quoi ?
À quoi ça sert, comment le créer.

Un favicon, c'est quoi exactement ?

Le mot vient de l'anglais favorite icon, « l'icône des favoris ». C'est une image de quelques pixels, souvent le logo du site ou sa première lettre, qui aide à le reconnaître d'un coup d'œil :

• dans l'onglet du navigateur, à côté du titre de la page ;
• dans les favoris et l'historique ;
• sur l'écran d'accueil d'un téléphone, quand on y ajoute le site ;
• dans les résultats de Google, à côté du nom du site.

Le favicon dans les résultats de Google

Google affiche les favicons dans ses résultats depuis 2019 sur téléphone, et depuis 2020 sur ordinateur. Ce n'est pas un critère de classement, mais c'est souvent la première image que voit un internaute : une icône nette et reconnaissable donne confiance et aide à cliquer.

Google pose quelques règles. Le favicon doit :

• être carré, d'au moins 8 × 8 pixels ; Google conseille plus de 48 × 48 pour une icône nette ;
• être dans un format accepté : ICO, PNG, GIF, JPEG ou BMP. Google n'affiche ni le SVG ni le WebP ;
• avoir une adresse stable, qui ne change pas à chaque mise à jour du site ;
• ne pas être bloqué par le fichier robots.txt du site ;
• représenter le site : pas de contenu choquant, sinon Google le remplace par une icône par défaut.

Quelles tailles et quels formats ?

Le format ICO est le plus ancien : il est lu partout, par Google aussi, et peut contenir plusieurs tailles dans un seul fichier. Le SVG reste net à toutes les tailles dans les onglets, mais Google ne l'affiche pas dans ses résultats : gardez-le seulement en complément. Le plus sûr : un ICO et un PNG, plus l'image pour iPhone.

Le code HTML à copier

Placez ces lignes dans la partie <head> de chaque page, avec les fichiers à la racine de votre site :

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Sur WordPress, pas besoin de code : cherchez le réglage « Icône du site » (dans Réglages, Général, ou dans Apparence, Personnaliser, Identité du site, selon votre thème), et choisissez une image carrée d'au moins 512 × 512 pixels.

Comment créer son favicon

1. Partez de votre logo, et gardez seulement le symbole ou la première lettre : à 16 pixels, un texte devient illisible.
2. Faites un carré d'au moins 512 × 512 pixels, avec un fond plein ou transparent et des couleurs contrastées.
3. Exportez en ICO et en PNG aux tailles du tableau, plus un SVG si vous le souhaitez pour les onglets. Un logiciel d'image gratuit comme GIMP suffit.
4. Vérifiez l'icône en tout petit, sur fond clair et sur fond sombre (le mode sombre des navigateurs).

Essayez votre favicon

Choisissez une image : vous la voyez dans un onglet clair et sombre, dans les résultats de Google et sur un écran d'iPhone. Elle reste dans votre navigateur : rien n'est envoyé.

Mon favicon ne s'affiche pas

• Dans le navigateur : il garde l'ancienne icône en mémoire. Ouvrez le site dans une fenêtre de navigation privée.
• Dans Google : vérifiez le format (une icône SVG ou WebP n'y apparaît pas), puis comptez quelques jours à quelques semaines. Vous pouvez demander une nouvelle exploration de l'accueil dans la Google Search Console.
• Nulle part : vérifiez l'adresse du fichier dans le code, et ouvrez-la directement dans le navigateur pour voir s'il répond.

Dernier test, gratuit : ouvrez dix onglets et cherchez le vôtre. Si vous ne le repérez pas en une seconde, votre icône a encore besoin d'être simplifiée.