Favicon : définition, formats et mise en place

Favicon : définition, formats acceptés, taille idéale et code HTML. Comment créer son icône de site, et pourquoi elle n'apparaît pas toujours sur Google.

Ce qu'est un favicon et sa fonction

Le mot vient de « favorite icon ». À l'origine, le navigateur affichait cette image quand l'internaute ajoutait une page à ses favoris. Aujourd'hui, son utilisation est bien plus large : onglets ouverts, raccourcis, historique, et résultats de recherche sur mobile. Un visiteur qui garde dix onglets ouverts retrouve le vôtre à l'image, pas au texte, et ce détail participe à l'expérience de navigation.

Formats, taille et poids du fichier

Un favicon reste un fichier image comme un autre, simplement très petit. Les navigateurs acceptent plusieurs formats et il est inutile de tous les produire. Un PNG carré de 48 pixels, sans fond, couvre déjà la majorité des usages. Prévoyez une version plus grande, en 180 × 180, pour l'écran d'accueil des téléphones.

Les formats que les navigateurs acceptent

.ico : le format historique, capable de contenir plusieurs tailles dans un seul fichier
.png : le plus simple à produire, idéal pour un favicon sans fond
.svg : vectoriel, net sur tous les écrans, et compatible avec le mode sombre
apple-touch-icon en 180 × 180 pixels, pour l'écran d'accueil des mobiles iOS

Créer un favicon et l'ajouter au site

Partez du symbole de votre logo, pas du logo entier. Recadrez-le en carré, retirez le texte, gardez une forme lisible à 16 pixels de côté. Un générateur de favicon en ligne se charge ensuite de la conversion et produit chaque dimension utile. Vous pouvez aussi créer l'image dans n'importe quel éditeur, à condition d'exporter un carré.

Le code HTML à placer dans l'en-tête

L'ajout se fait dans la balise head, avec un élément link dont l'attribut rel vaut icon et href pointe vers le fichier. Les CMS évitent cette manipulation : WordPress propose un champ « Icône du site » dans l'outil de personnalisation, Shopify un réglage d'image dans l'éditeur de thème. Sur un site développé sur mesure, c'est le travail de l'intégrateur, et l'un des détails que nous traitons à chaque création de site internet.

Quand le favicon ne s'affiche pas

Le navigateur met ces icônes en cache de façon agressive. Après un changement, videz le cache ou allez tester l'affichage en navigation privée avant de conclure au bug. Vérifiez aussi que le fichier existe bien à l'adresse déclarée : absent, il renvoie une erreur 404, comme n'importe quel autre code de réponse HTTP.

Google applique ses propres règles. Son robot lit l'icône déclarée sur la page d'accueil, et un lien canonique mal posé peut l'envoyer ailleurs. L'image doit rester accessible au crawl, carrée, et dans un multiple de 48 pixels. Comptez plusieurs jours avant de voir le résultat.

Favicon et logo : deux images, deux usages

Le logo raconte, le favicon signale. Le premier vit dans l'en-tête du site et sur les supports imprimés. Le second n'a que quelques pixels pour exister, donc il simplifie. Les marques sérieuses intègrent les deux dans leur charte : c'est le même raisonnement que pour les données structurées, une aide apportée au moteur de recherche pour présenter correctement votre marque.

Questions fréquentes

C'est l'icône miniature qu'un navigateur associe à un site. Elle apparaît dans l'onglet, à gauche du titre de la page, puis dans les favoris et l'historique. Techniquement, il s'agit d'un simple fichier image déclaré dans le code de la page.

Exportez le symbole de votre logo en carré, puis passez-le dans un générateur en ligne. Vous récupérez un .ico et des PNG aux bonnes dimensions en une minute. Il reste à déposer les fichiers à la racine du site et à déclarer le lien dans l'en-tête.

C'est le format d'icône historique de Windows, repris par le web. Il peut contenir plusieurs résolutions dans un seul fichier et tous les navigateurs le lisent. Placé à la racine sous le nom favicon.ico, il est même trouvé sans déclaration HTML.