Un favicon c'est quoi ?
À quoi ça sert, comment le créer.
C'est la petite icône de votre site, dans l'onglet du navigateur et à côté de votre nom dans Google. Voici ce qu'elle doit respecter, et le code à copier pour l'installer.
Pierre Billard, consultant SEO et GEO, sur le web depuis 2013. Publié le · Mis à jour le · 5 min de lecture
En bref
Un favicon est la petite icône carrée qui représente un site : dans l'onglet du navigateur, les favoris, l'écran d'accueil du téléphone et les résultats de Google. Il se crée à partir du logo, en 48 × 48 pixels (ou un multiple) ou en SVG, et se déclare dans le code de chaque page avec une balise <link rel="icon">.
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é, à une taille multiple de 48 pixels (48 × 48, 96 × 96, 144 × 144…), ou en SVG ;
- 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 ?
| Pour… | Taille | Format |
|---|---|---|
| Google et les onglets | 48 × 48 pixels ou un multiple | ICO, PNG ou SVG |
| Tous les écrans, d'un seul fichier | Aucune : l'image s'adapte | SVG (navigateurs récents) |
| L'écran d'accueil des iPhone | 180 × 180 pixels | PNG (apple-touch-icon) |
| L'écran d'accueil Android | 192 × 192 pixels | PNG |
Le format ICO est le plus ancien : il est lu partout et peut contenir plusieurs tailles dans un seul fichier. Le SVG est le plus moderne : une seule image nette à toutes les tailles. Le plus sûr est de proposer les deux, 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.svg" type="image/svg+xml"> <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
- Partez de votre logo, et gardez seulement le symbole ou la première lettre : à 16 pixels, un texte devient illisible.
- Faites un carré d'au moins 512 × 512 pixels, avec un fond plein ou transparent et des couleurs contrastées.
- Exportez en PNG aux tailles du tableau, en SVG si votre logo est vectoriel, et en ICO. Un logiciel d'image gratuit comme GIMP suffit.
- Vérifiez l'icône en tout petit, sur fond clair et sur fond sombre (le mode sombre des navigateurs).
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 : 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.
Questions fréquentes
Un favicon est-il obligatoire ?
Non, mais sans favicon, le navigateur et Google affichent une icône grise par défaut : votre site se repère moins bien dans les onglets, les favoris et les résultats de recherche.
Le favicon aide-t-il le référencement ?
Pas directement : ce n'est pas un critère de classement. Mais Google l'affiche à côté du nom de votre site dans ses résultats ; une icône claire aide les internautes à vous reconnaître, et à cliquer.
Quelle taille choisir ?
Pour Google, un carré de 48 × 48 pixels ou un multiple (96, 144, 192…), ou un fichier SVG. Ajoutez une image de 180 × 180 pixels pour l'écran d'accueil des iPhone.
Pourquoi mon favicon n'apparaît-il pas dans Google ?
Google met parfois plusieurs semaines à le prendre en compte. Vérifiez qu'il est carré, à une taille multiple de 48 pixels, que son adresse ne change pas, et qu'il n'est pas bloqué par le fichier robots.txt de votre site.