Retour aux tutoriels

Qu’est-ce qu’un favicon ?

Un guide pour comprendre les favicons, leur rôle, et comment ils renforcent la marque et la navigation. Idéal si vous voulez en créer un pour votre site.

Définition du favicon

Un favicon, de l’anglais « favorite icon », est une petite icône qui représente un site ou une page. Il apparaît à plusieurs endroits dans les navigateurs et sur les appareils : le plus souvent à côté du titre dans l’onglet, dans les favoris, l’historique, et sur l’écran d’accueil mobile quand le site est enregistré en raccourci.

Les favicons sont en général des images carrées, souvent 16×16, 32×32 ou 48×48 pixels. Les sites modernes prévoient aussi des tailles plus grandes, jusqu’à 512×512, pour les écrans haute résolution et le mobile.

Où apparaissent les favicons

Les favicons s’affichent à plusieurs endroits pour aider à reconnaître et retrouver votre site :

  • Onglets : L’endroit le plus visible : à côté du titre dans l’onglet du navigateur
  • Favoris : À côté du nom du favori dans la liste des favoris
  • Historique : Dans le menu d’historique du navigateur
  • Barre d’adresse : Certains navigateurs l’affichent dans la barre d’adresse
  • Écrans d’accueil mobiles : Quand on ajoute le site à l’écran d’accueil, le favicon sert d’icône d’application
  • Résultats de recherche : Certains moteurs de recherche l’affichent à côté des résultats
Exemples de favicons dans les onglets, les favoris et la barre d’adresse

Exemple : favicons dans les onglets et les favoris

Pourquoi les favicons comptent

Les favicons jouent un rôle important pour la marque et l’expérience de navigation :

Reconnaissance de la marque

Un favicon bien conçu permet d’identifier votre site parmi plusieurs onglets ouverts. Il renforce l’identité visuelle et rend le site plus mémorable.

Apparence soignée

Un favicon personnalisé donne un aspect plus professionnel. Sans lui, le navigateur affiche une icône générique, et le site peut sembler inachevé.

Navigation plus simple

Les favicons aident à retrouver le site dans les favoris, l’historique et parmi les onglets ouverts. C’est surtout utile pour les visiteurs réguliers.

Expérience mobile

Sur mobile, le favicon sert d’icône d’application quand on ajoute le site à l’écran d’accueil. Une icône claire et reconnaissable améliore l’expérience.

Formats et tailles

Un site moderne devrait fournir plusieurs formats et tailles, pour rester compatible avec tous les navigateurs et appareils :

Format ICO

Le format traditionnel favicon.ico, en général 16×16 ou 32×32 pixels. C’est le plus largement pris en charge, et il fonctionne dans tous les navigateurs.

Format PNG

Les favicons PNG servent pour plusieurs tailles : 16×16, 32×32, 48×48, 96×96, 180×180, 192×192 et 512×512 pixels. Ils offrent une meilleure qualité et la transparence, par rapport à l’ICO.

Format SVG

Les favicons SVG (Scalable Vector Graphics) sont indépendants de la résolution et restent nets à n’importe quelle taille. Les navigateurs modernes les prennent en charge, ce qui les rend adaptés aux écrans haute résolution.

Apple Touch Icon

Les appareils Apple utilisent apple-touch-icon.png, en général 180×180 pixels, pour l’écran d’accueil. Ainsi le site reste soigné une fois enregistré sur iOS.

Exemples de tailles

Exemple de favicon 16×16 pixels16×16
Exemple de favicon 32×32 pixels32×32
Exemple de favicon 48×48 pixels48×48
Exemple de favicon 96×96 pixels96×96

Exemple : le même favicon à différentes tailles

Conseils de design

Pour concevoir un favicon, gardez ces principes en tête :

  • Simplicité : Les favicons sont petits : un dessin simple fonctionne mieux. Évitez les détails fins, invisibles en petite taille
  • Fort contraste : Choisissez des couleurs contrastées pour rester lisible sur les différents fonds de navigateur
  • Cohérence de marque : Le favicon doit refléter l’identité visuelle et rester reconnaissable dans l’ensemble du design
  • Évolutivité : Concevez un favicon qui tient de 16×16 à 512×512 pixels
  • Tests : Testez le favicon dans plusieurs navigateurs et sur plusieurs appareils pour vérifier l’affichage
Exemples de favicons simples et à fort contraste

Bons exemples : favicons simples, à fort contraste

Exemples de favicons trop complexes ou trop peu contrastés

À éviter : designs trop complexes ou trop peu contrastés

Comment créer un favicon

Créer un favicon est plus simple qu’avant. Que vous partiez de zéro ou d’un visuel existant, vous pouvez :

Utiliser un générateur en ligne

Des outils comme logo87.com permettent d’en créer un rapidement. Saisissez le texte, choisissez couleurs et polices, puis téléchargez un paquet complet avec les tailles et formats nécessaires. C’est la méthode la plus simple, même sans expérience en design.

Convertir une image existante

Si vous avez déjà un logo ou une image, utilisez SVG vers PNG pour la convertir aux formats et tailles requis, afin d’obtenir un favicon aligné avec votre marque.

Concevoir de zéro

Les designers peuvent aussi le créer dans un logiciel de graphisme, pixel par pixel, à toutes les tailles nécessaires. Cette méthode donne un contrôle total.

Conclusion

Le favicon est un petit élément, mais il compte pour l’identité du site. Il aide à le reconnaître, renforce la marque et améliore la navigation. En fournissant plusieurs formats et tailles, le site reste soigné et s’affiche correctement partout.

Que vous utilisiez un générateur, une image existante ou un design de zéro, prendre le temps de le faire correctement est un investissement dans le professionnalisme et l’expérience. Une icône claire aide à construire une identité plus forte en ligne.