Le favicon : à quoi il sert et quelles tailles préparer
Où apparaît l'icône de l'onglet et quelles tailles elle doit couvrir
Avec dix onglets ouverts dans votre navigateur, comment reconnaissez-vous lequel correspond à quel site ? Les titres sont écrasés au point que la seule chose vraiment visible est le minuscule carré à gauche. Cette icône s'appelle un favicon, et c'est la plus petite pièce de votre site — en même temps que la plus souvent vue.
Presque tous ceux qui montent un site la laissent pour la fin, puis découvrent une feuille blanche dans l'onglet sans savoir quoi en faire. Cet article ferme deux questions d'un coup : ce qu'est exactement ce fichier, et comment le produire aux bonnes tailles à partir du logo que vous avez déjà.
Une seule icône, quatre endroits différents
Un favicon ne sert pas qu'aux onglets. La même marque réapparaît à plusieurs endroits, à des tailles différentes, et chaque endroit dispose de sa propre place.
Dans l'onglet, l'icône se présente à sa plus petite taille ; ce qui doit y rester lisible n'est pas le détail mais la silhouette. Ajoutée aux favoris, elle s'affiche un peu plus grande, à côté du nom. Si un visiteur ajoute votre site à l'écran d'accueil de son téléphone, l'icône est affichée en grand, comme celle d'une application. Le quatrième endroit, celui que la plupart des gens oublient, ce sont les résultats de recherche : sur mobile, votre icône apparaît à côté du nom du site.
Ces quatre endroits n'ont pas les mêmes dimensions, et c'est précisément pour cela qu'un favicon ne se pense pas comme une image unique mais comme un jeu de quelques tailles de la même marque.
Quelles tailles vous faut-il vraiment ?
En pratique, le noyau utile se compose de carrés de 16, 32 et 48 points. L'onglet utilise le 16, les favoris et la barre d'adresse le 32, les raccourcis du bureau le 48. Quand un site est souvent épinglé sur le bureau des visiteurs, une version 64 peut s'ajouter au lot.
L'icône des résultats de recherche obéit à une règle à part. Google demande que l'icône affichée dans ses résultats mesure au moins 48 points de côté et soit préparée en carré, dans un multiple de 48 ; si vous ne proposez rien de plus grand, votre icône peut ne pas apparaître du tout dans les résultats. Autrement dit, un fichier à l'ancienne ne contenant que du 16 et du 32 fera son travail dans l'onglet tout en vous laissant invisible dans la recherche.
Les raccourcis ajoutés à l'écran d'accueil d'un téléphone utilisent, eux, un PNG séparé et plus grand ; ce fichier est indépendant de l'icône de l'onglet et se prépare en général autour de 180 points.
| Où elle apparaît | Taille nécessaire | D'où elle vient |
|---|---|---|
| Onglet du navigateur | 16 points | La plus petite version rangée dans le fichier d'icône |
| Favoris et barre d'adresse | 32 points | La version intermédiaire du même fichier |
| Raccourci du bureau | 48 points | La grande version du même fichier |
| Résultat de recherche | Au moins 48 points, carré, multiple de 48 | Un PNG à part ou un fichier d'icône assez grand |
| Écran d'accueil du téléphone | Autour de 180 points | Un fichier PNG séparé |
Les exigences publiées par Google pour l'icône de site affichée dans les résultats →
Pourquoi toutes ces tailles tiennent dans un seul fichier
Un fichier d'icône peut contenir plusieurs tailles de la même image côte à côte, et le navigateur choisit lui-même celle dont il a besoin à l'intérieur. C'est à la fois plus court et plus solide que de déposer un fichier par taille et d'écrire une ligne pour chacun dans la page.
La seconde raison tient à l'habitude. L'une des plus vieilles conventions du web veut qu'un navigateur aille tout seul chercher, dans le dossier principal du site, un fichier portant le nom favicon.ico. Cette requête part même si vous n'écrivez rien dans votre page ; si le fichier manque, vos journaux de serveur se remplissent d'erreurs « introuvable ».
L'installation la plus robuste consiste donc à faire les deux : un fichier d'icône qui contient plusieurs tailles dans le dossier principal, et à côté un PNG assez grand pour la recherche comme pour les téléphones.
Dessiner une marque qui se lit en tout petit
La seule difficulté du dessin d'un favicon, c'est l'échelle. Le carré d'un onglet est à peine plus grand qu'une lettre de cette ligne ; votre logo complet n'y entrera pas.
Le geste juste n'est pas de rétrécir le logo mais de le simplifier. Prenez la première lettre du nom de l'entreprise, une seule pièce de l'emblème, ou la forme la plus reconnaissable du logo, isolée. Épaississez les traits fins, supprimez les détails, contentez-vous de deux ou trois couleurs. Un logo réduit avec sa typographie devient une tache illisible ; l'emblème seul du même logo reste parfaitement net.
La façon pratique de contrôler : réduisez le carré que vous avez préparé à environ la moitié de votre ongle sur l'écran et regardez-le. Si vous ne distinguez pas ce que vous voyez à cette échelle, vos visiteurs ne le distingueront pas non plus.
- Utilisez une seule lettre ou un seul emblème, pas le logo entier
- Évitez les traits fins et les ombres, ils disparaissent en petit
- Laissez le fond transparent pour qu'aucun carré blanc n'apparaisse en thème sombre
- Remplissez bien le carré, sans marge inutile sur les bords
- Ne choisissez pas une marque qui ressemble à celle d'un concurrent
Fabriquer le fichier d'icône à partir de votre logo
L'ordre des opérations est simple. Préparez d'abord la version la plus grande et la plus carrée possible de votre logo ; un PNG à fond transparent est l'idéal. Si vous disposez d'un fichier vectoriel, en exporter un PNG carré généreusement large est le meilleur départ, parce que réduire est toujours sans risque alors qu'agrandir ne l'est pas.
Confiez ensuite ce PNG à l'outil Du PNG au favicon (ICO) ; il rassemble le jeu de tailles que vous choisissez dans un fichier d'icône unique. Déposez le résultat dans le dossier racine de votre site et la plupart des navigateurs le trouveront d'eux-mêmes.
Vous pouvez aussi rencontrer la situation inverse : vous avez un fichier d'icône mais il vous faut l'image qu'il contient sous forme de PNG ordinaire. L'outil Convertir un fichier ICO en PNG sépare les versions rangées à l'intérieur et vous les rend ; c'est le chemin à prendre pour poser la marque dans une présentation, un document ou un fichier de mise en page.
Un dernier avertissement : après avoir changé l'icône, vous risquez de continuer à voir l'ancienne dans l'onglet. Les navigateurs gardent ce fichier longtemps dans leur propre mémoire. Pour voir la nouvelle version, fermez l'onglet et rouvrez-le ; si cela ne suffit pas, tapez l'adresse de votre site suivie de favicon.ico dans la barre d'adresse pour ouvrir le fichier directement, puis actualisez la page.
Questions fréquentes
Quelle taille doit faire un favicon ?
Le jeu de base est 16, 32 et 48 points ; l'onglet, les favoris et les raccourcis du bureau s'en servent. Si vous voulez apparaître dans les résultats de recherche, gardez en plus une version d'au moins 48 points de côté, carrée et dans un multiple de 48.
Comment créer un favicon ?
Préparez un PNG carré de votre logo à fond transparent et confiez-le à l'outil Du PNG au favicon (ICO) ; il rassemble les tailles dans un seul fichier. Il vous suffit ensuite de déposer ce fichier dans le dossier racine de votre site.
J'ai changé mon icône mais l'onglet affiche toujours l'ancienne, pourquoi ?
Le navigateur conserve ce fichier en mémoire. Fermez l'onglet et rouvrez-le ; si cela persiste, tapez l'adresse de votre site suivie de favicon.ico dans la barre d'adresse pour ouvrir le fichier directement, puis actualisez.
Je n'ai pas de site web, ce fichier me sert-il quand même ?
Un blog, une page portfolio ou une simple page de présentation apparaissent eux aussi dans un onglet. Un site sans icône y reste sous la forme d'une feuille blanche, ce qui complique la tâche du visiteur qui vous cherche parmi ses onglets.
Puis-je ressortir les images contenues dans un fichier ICO ?
Oui. L'outil Convertir un fichier ICO en PNG vous rend les versions rangées dans le fichier sous forme d'images séparées ; vous pouvez ne prendre que la plus grande ou toutes à la fois.
Dernière mise à jour : 27 août 2026