Bonnes pratiques favicon

Longueur du texte

Un seul caractère fonctionne le mieux. Les favicons s’affichent très petits (16×16 à 32×32 pixels) : une ou deux lettres restent lisibles. Un texte plus long devient illisible et encombré.

Choix de la police

Choisissez des polices encore lisibles en petite taille :

• Polices grasses : Plus efficaces que les graisses fines ou light
• Polices sans empattement : En général plus lisibles en petite taille
• Évitez les polices décoratives ou script, illisibles une fois réduites
• Tester la lisibilité : Prévisualisez toujours le favicon à taille réelle (16×16 pixels) avant de le valider

Contraste des couleurs

Utilisez un fort contraste entre le texte et le fond. Les favicons s’affichent sur des fonds de navigateur très différents (clair, sombre, coloré) : le dessin doit rester visible partout. Évitez les couleurs trop proches, qui se fondent en petite taille.

Simplicité

Gardez un dessin simple, sans encombrement. Les détails complexes disparaissent en petite taille. Un seul élément visuel, clair, qui représente la marque ou le site.

Choix du format

Tailles nécessaires

Fournissez plusieurs tailles pour un affichage correct sur tous les appareils et dans tous les contextes :

• 16×16 pixels : Taille standard de l’onglet du navigateur
• 32×32 pixels : Écrans haute densité et certains contextes de navigateur
• 180×180 pixels : Apple touch icon pour l’écran d’accueil iOS
• 192×192 et 512×512 pixels : Icônes d’écran d’accueil Android et prise en charge PWA

Remarque : concevez toujours à la plus grande taille (512×512) puis réduisez, plutôt que d’agrandir une petite image. La qualité reste meilleure à toutes les tailles.

Compatibilité navigateurs

Testez le favicon dans plusieurs navigateurs (Chrome, Firefox, Safari, Edge) et sur plusieurs appareils (ordinateur, mobile, tablette). Chaque navigateur le traite un peu différemment : des tests complets assurent un rendu cohérent.

Utiliser le logo entier

Évitez le logo complet de l’entreprise, sauf s’il est extrêmement simple. La plupart des logos ont trop de détails pour rester lisibles en 16×16. Préférez une version simplifiée, un monogramme, ou un symbole fort de la marque.

Contraste trop faible

Un faible contraste entre les éléments rend le dessin invisible en petite taille. Prévoyez assez de contraste pour rester lisible selon les thèmes et fonds du navigateur.

Mauvais emplacement des fichiers

Placez les fichiers dans le bon dossier (en général public ou static) et faites pointer les balises link HTML vers les bons chemins.

Tailles manquantes

Une seule taille limite la compatibilité. Incluez toujours plusieurs tailles (16×16, 32×32, 180×180, 192×192, 512×512) pour un affichage correct partout.

Ne pas tester

Testez toujours le favicon dans plusieurs navigateurs et sur plusieurs appareils avant de déployer. Ce qui convient dans l’un peut mal s’afficher dans l’autre. Les outils de développement du navigateur permettent de vérifier le chargement.