C'est la plus petite image de votre site, et pourtant elle est vue partout : dans l'onglet du navigateur, dans les favoris, dans l'historique, sur l'écran d'accueil des téléphones et même dans les résultats de recherche de Google. Le favicon est un élément d'identité à part entière, trop souvent négligé ou laissé à l'icône par défaut du CMS.
Où apparaît le favicon ?
Le favicon s'affiche dans de nombreux contextes :
- Les onglets du navigateur, où il aide à retrouver votre site parmi plusieurs onglets ouverts ;
- Les favoris et l'historique de navigation ;
- Les résultats de recherche Google, à côté du nom de votre site, surtout sur mobile ;
- L'écran d'accueil des smartphones, lorsqu'un visiteur ajoute votre site en raccourci ;
- Les aperçus de liens dans certaines applications.
Simplifier le logo
À 16 ou 32 pixels de côté, un logo complet devient illisible. Le favicon doit donc être une version très simplifiée de votre identité : le symbole seul, une initiale, une forme caractéristique, dans vos couleurs principales. Il doit rester reconnaissable même à la plus petite taille. Évitez les textes, sauf une lettre unique, et les détails fins.
Les formats et tailles nécessaires
Les appareils et navigateurs utilisent des formats différents. Un jeu de favicons complet comprend aujourd'hui généralement :
- Une icône SVG, nette à toutes les tailles dans les navigateurs récents ;
- Un fichier ICO de 32 pixels, pour la compatibilité avec les anciens navigateurs ;
- Une icône de 180 pixels pour l'écran d'accueil des iPhone et iPad ;
- Des icônes de 192 et 512 pixels déclarées dans le manifeste, pour Android et les applications web.
Le favicon dans les résultats de Google
Google affiche le favicon à côté du nom de votre site dans ses résultats, notamment sur mobile. Il doit respecter quelques règles : être carré, d'une taille multiple de 48 pixels, représenter fidèlement votre marque et être accessible au robot de Google. Un favicon conforme rend votre résultat plus reconnaissable et peut améliorer le taux de clic. La documentation de Google sur les favicons précise ces exigences.
Penser au mode sombre
Dans les navigateurs en thème sombre, un favicon noir sur fond transparent devient presque invisible dans l'onglet. Le format SVG permet d'adapter automatiquement les couleurs selon le thème du système. À défaut, un fond coloré derrière le symbole garantit une bonne visibilité dans tous les cas.
Les icônes d'écran d'accueil
Lorsqu'un visiteur ajoute votre site sur l'écran d'accueil de son téléphone, l'icône utilisée doit ressembler à une icône d'application : un fond plein, un symbole centré avec une marge suffisante. Sur Android, les icônes peuvent être découpées en cercle ou en carré arrondi : gardez une zone de sécurité autour du symbole pour qu'il ne soit pas coupé.
Vérifier l'affichage
Après la mise en place, testez votre favicon dans plusieurs navigateurs, en thème clair et sombre, sur ordinateur et mobile, et vérifiez l'icône lors d'un ajout à l'écran d'accueil. Pensez aussi au cache : les navigateurs conservent longtemps l'ancien favicon, un rechargement forcé ou une navigation privée permet de voir la nouvelle version.
Mon conseil
Regardez les onglets de votre navigateur : votre site est-il immédiatement reconnaissable ? Si votre favicon est absent, flou ou générique, faites-le réaliser à partir de votre logo simplifié, en SVG et dans les quelques tailles utiles. C'est une petite tâche, mais elle renforce votre identité à chaque visite et dans chaque résultat de recherche.
