UX des favicons : ce qui fait un excellent favicon

Un excellent favicon est un symbole simple et très contrasté, généralement votre logomark ou une ou deux lettres, qui reste lisible en 16x16 pixels sur les onglets de navigateur clairs comme sombres, correspond à votre marque et change rarement. Tout le reste de ce guide (alignement sur la grille de pixels, couleur, marges, transparence, poids du fichier) sert ces objectifs : rendre votre site immédiatement repérable parmi des dizaines d'onglets ouverts.

Un favicon est minuscule, mais il apparaît à de nombreux endroits : onglets du navigateur, barres de favoris, listes d'historique, menu de recherche d'onglets, résultats de recherche Google sur mobile et ordinateur, et écrans d'accueil des téléphones. Pour les utilisateurs qui ont beaucoup d'onglets ouverts, le titre est souvent tronqué jusqu'à disparaître et l'icône est le seul repère restant. C'est donc un véritable élément de navigation, pas une simple décoration.

1. Lisibilité en 16x16

La taille classique d'un favicon est de 16x16 pixels CSS. Sur un écran standard, cela représente littéralement 256 pixels ; sur un écran Retina 2x, le navigateur choisit généralement une image de 32x32 pour le même espace. Tout ce que vous concevez doit survivre à cette réduction.

Restez simple

• Une forme ou une à deux lettres. Une seule lettre en gras, un cercle avec un symbole ou une forme géométrique simple fonctionnent bien. Trois lettres ou un mot se transformeront en bruit visuel.
• Un seul point focal. Si vous ne pouvez pas décrire l'icône en cinq mots, elle est trop compliquée.
• Pas de dégradés, d'ombres ni de textures fines. Ils deviennent des taches floues aux petites tailles.

Alignez sur la grille de pixels

En 16x16, une ligne placée à un demi-pixel de la grille est lissée sur deux rangées de pixels et paraît grise et molle. Placez les bords sur des limites de pixels entières et utilisez des largeurs paires lorsque la forme est symétrique. Si vous exportez depuis un outil vectoriel, activez l'alignement sur les pixels, ou vérifiez le résultat réduit et corrigez-le à la main.

Évitez les traits fins

Les traits de moins de 2 pixels en 16x16 (environ 12 % de la largeur de l'icône) ont tendance à disparaître ou à scintiller d'une taille à l'autre. Épaississez les traits, supprimez les détails internes et fusionnez les petits espaces. Un glyphe gras, légèrement lourd, se lit généralement mieux qu'une miniature fidèle d'un logo détaillé.

Retouchez à la main

Les fichiers ICO et PNG n'ont pas de hinting comme les polices ; l'équivalent est donc la retouche manuelle des pixels : vous ajustez des pixels individuels pour que les courbes, les diagonales et les contre-formes (les trous dans des lettres comme "a" ou "e") restent nettes. La réduction automatique est un bon premier jet, mais quelques pixels placés à la main font souvent la différence entre une tache et une lettre reconnaissable. L'éditeur de pixels MakeFav est conçu pour cela : ouvrez le canevas 16x16, corrigez les pixels problématiques et exportez.

2. Contraste sur les onglets clairs et sombres

Les navigateurs fonctionnent désormais couramment en mode sombre, et de nombreux utilisateurs ont une barre d'onglets qui diffère du thème de la page. Une icône bleu marine foncé sur fond transparent peut être parfaite sur un onglet blanc et presque invisible sur un onglet gris foncé. Testez toujours les deux.

Solutions pratiques

• Ajoutez une forme d'arrière-plan. Un carré arrondi ou un cercle plein aux couleurs de la marque garantit que le symbole possède son propre contraste, quel que soit l'onglet.
• Utilisez un fin contour ou un halo. Un bord plus clair de 1 px autour d'un glyphe foncé (ou l'inverse) maintient la silhouette visible sur les deux thèmes, mais en 16x16 il doit rester net, alors testez-le.
• Choisissez des couleurs de marque de ton moyen. Des couleurs comme un bleu vif, l'orange, le vert ou le magenta fonctionnent généralement sur des surfaces blanches comme presque noires. Le jaune très clair ou le bleu marine très foncé sont les plus risqués.
• Utilisez un favicon SVG adaptatif. Un SVG peut inclure une media query prefers-color-scheme pour que l'icône change avec le thème du système.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Notez que la media query reflète le thème du système d'exploitation ou du navigateur, que la barre d'onglets suit généralement, mais pas toujours. La prise en charge des favicons SVG varie aussi : Chrome et Firefox les gèrent, alors que Safari a historiquement pris du retard ; conservez donc toujours des solutions de repli en PNG ou ICO. Un design avec arrière-plan uni est l'option la plus robuste, car il ne nécessite aucune logique de thème.

3. Reconnaissabilité et cohérence de marque

Utilisez le logomark (le symbole ou le monogramme), pas le logo complet avec le logotype textuel. Le texte dans une icône de 16x16 est illisible, et un logo horizontal large réduit dans un carré ne laisse qu'une minuscule bande au milieu.

• Si votre marque possède un symbole, simplifiez-le pour les petites tailles plutôt que de simplement le réduire. Une « version favicon » avec moins de détails est une pratique courante.
• Si votre marque n'est qu'un logotype textuel, prenez la première lettre ou une paire de lettres distinctive et composez-la dans la police de votre marque, en graisse forte.
• Gardez des couleurs cohérentes avec votre logo, l'icône de votre application et vos avatars sur les réseaux sociaux, afin que l'utilisateur reconnaisse la même marque partout.

La distinction compte autant que la fidélité. Regardez une rangée d'onglets : si trois autres sites utilisent aussi un cercle bleu, le vôtre ne se démarquera pas. Une forme ou une couleur différente est plus utile qu'une réduction parfaitement fidèle.

4. Couleur : une palette limitée et saturée

Avec si peu de pixels, chaque couleur supplémentaire ajoute du désordre. Visez une ou deux couleurs, plus au maximum du blanc ou du noir. Les couleurs saturées passent mieux aux petites tailles que les pastels, qui ont tendance à se fondre dans l'arrière-plan de l'onglet.

Inspirez-vous un peu de l'accessibilité. Les WCAG demandent un contraste d'au moins 3:1 pour les objets graphiques significatifs (critère de succès 1.4.11, Contraste du contenu non textuel). Un favicon n'est pas formellement concerné, puisqu'il fait partie de l'interface du navigateur et non du contenu de la page, mais un contraste de 3:1 entre le glyphe et son arrière-plan, ainsi qu'entre l'icône et l'onglet, est un objectif raisonnable. Évitez aussi de transmettre une information par la seule teinte : des variantes rouge et verte de la même icône sont indiscernables pour de nombreuses personnes daltoniennes ; variez donc la forme ou ajoutez un symbole.

5. Forme, marges et zones de sécurité

Remplissez le carré

Les onglets du navigateur affichent le favicon à une petite taille fixe ; une marge supplémentaire ne fait donc que rendre votre symbole plus petit. Pour les icônes d'onglet standard, utilisez la majeure partie du canevas, avec seulement un ou deux pixels de respiration, afin que le symbole soit aussi grand que possible.

Arrondi ou carré ?

Les navigateurs ne recadrent généralement pas les favicons d'onglet : la forme que vous dessinez est donc celle que voient les utilisateurs. Un carré aux coins légèrement arrondis paraît soigné et offre un arrière-plan cohérent ; un glyphe libre ou un cercle sur fond transparent peut sembler plus léger et plus distinctif. Les deux conviennent. Choisissez-en un et gardez l'ensemble de votre jeu d'icônes cohérent.

Icônes Apple touch

iOS ajoute ses propres coins arrondis à l'apple-touch-icon (180x180 est la taille habituelle). Fournissez un carré plein cadre sans coins pré-arrondis, sinon vous risquez de voir de petits éclats sombres ou blancs dans les angles.

Icônes maskable pour Android et les PWA

Les icônes maskable sont recadrées par le système d'exploitation en cercles, en superellipses ou en d'autres formes. Gardez tout le contenu important à l'intérieur de la zone de sécurité : un cercle centré dans l'icône, d'un rayon égal à 40 % de la largeur de l'icône. Prolongez la couleur d'arrière-plan jusqu'aux bords pour que n'importe quel masque rende bien. Ne réutilisez pas comme icône maskable un favicon d'onglet serré, bord à bord, car le masque le tronquerait.

6. Transparence

La transparence convient aux favicons d'onglet, et c'est ce qui permet à une icône composée d'un simple glyphe de se placer proprement sur n'importe quelle couleur d'onglet. En revanche, c'est un problème pour les icônes Apple touch : iOS remplit les zones transparentes avec une couleur unie (généralement du noir), ce qui peut ruiner le design. Donnez toujours à l'apple-touch-icon un arrière-plan opaque aux couleurs de votre marque. Il en va de même pour les icônes maskable et la plupart des usages sur l'écran d'accueil Android, où un arrière-plan opaque donne des résultats prévisibles.

7. Stabilité : ne le changez pas trop souvent

Un favicon construit la reconnaissance par la répétition. Le changer fréquemment oblige les utilisateurs à réapprendre quel onglet est le vôtre, et cela crée aussi des casse-têtes techniques. Les navigateurs mettent les favicons en cache de façon agressive, et Google les récupère et les stocke séparément de vos pages ; une nouvelle icône peut donc mettre des jours, voire des semaines, à apparaître dans les résultats de recherche. Google demande également une URL de favicon stable, une icône dont la taille est un multiple de 48 pixels (48x48, 96x96, etc.) et un fichier qu'il peut explorer (non bloqué par robots.txt). Traitez un changement de favicon comme une décision de niveau refonte de marque, pas comme une décoration saisonnière.

8. États de notification et favicons dynamiques

Certaines applications web modifient le favicon pour indiquer des messages non lus, un état d'enregistrement ou une erreur. Bien fait, c'est utile ; en excès, c'est irritant.

• Utilisez un petit badge (un point ou un court nombre) dans un coin, et non une refonte complète. L'icône de base doit rester reconnaissable.
• Restez sobre. Réservez les badges aux événements qui demandent une action de l'utilisateur. N'animez pas l'icône en continu.
• Plafonnez les nombres. En 16x16, seuls un ou deux chiffres sont lisibles ; affichez "9+" ou un simple point plutôt que "137".
• Réinitialisez rapidement lorsque l'utilisateur a traité l'élément, et rétablissez l'icône par défaut.
• Ne vous appuyez pas sur la couleur seule. Un point rouge doit aussi être doublé par le titre de la page, par exemple "(3) Boîte de réception", afin que l'information soit accessible à tous.

Les favicons dynamiques sont généralement dessinés sur un canevas puis substitués en mettant à jour le href de l'élément link de l'icône. Limitez la fréquence des mises à jour, car changer constamment le favicon peut consommer du CPU et distraire les utilisateurs.

9. Performances

Les favicons sont petits, mais ce sont quand même des requêtes qui peuvent être mal gérées.

• Gardez des fichiers légers. Un favicon PNG pèse généralement de quelques centaines d'octets à quelques kilo-octets. Un SVG simple peut faire moins de 1 Ko.
• Évitez les fichiers ICO surchargés. Un ICO multi-tailles avec des images de 16, 32 et 48 pixels suffit. Intégrer une image de 256x256 multiplie la taille du fichier sans bénéfice visible dans les onglets du navigateur.
• Définissez des en-têtes de cache. Servez les icônes avec une longue durée Cache-Control, par exemple public, max-age=31536000, immutable, et utilisez un nom de fichier versionné ou haché lorsque vous les modifiez.
• Déclarez explicitement les icônes. Les navigateurs demandent /favicon.ico par défaut ; fournissez-en donc un même si vous déclarez d'autres icônes, afin d'éviter le bruit de 404 dans vos journaux.
• Compressez. Passez les PNG dans un optimiseur sans perte et minifiez les SVG.

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

Si vous voulez générer tous ces fichiers à partir d'une seule image source, le générateur de favicons MakeFav produit le jeu standard, et la page développeurs présente les options d'intégration.

10. Accessibilité

Un favicon n'a pas de texte alternatif et les lecteurs d'écran ne l'annoncent pas ; les outils d'accessibilité habituels, comme les attributs alt, ne s'appliquent donc pas. Voici ce qui compte :

• Le titre de la page porte le sens. Rédigez des éléments <title> uniques et descriptifs. Ne comptez jamais sur l'icône pour indiquer un état ; reprenez tout badge dans le titre.
• Visibilité pour les personnes malvoyantes. Un contraste élevé, une forme en gras et un grand symbole aident les utilisateurs qui parcourent visuellement les onglets.
• Indépendance vis-à-vis de la couleur. Assurez-vous que ce sont les formes ou les lettres, et pas seulement la teinte, qui distinguent les états.
• Moins de distraction. Évitez les favicons clignotants ou animés, qui peuvent poser problème aux utilisateurs sensibles au mouvement.

Checklist UX du favicon

Checklist de tests

Ne vous fiez pas à la grande prévisualisation de votre outil de design. Testez la vraie icône dans des conditions réelles :

1. Plusieurs navigateurs. Vérifiez Chrome, Firefox, Safari et Edge, car chacun choisit les icônes et les tailles légèrement différemment.
2. Mode clair et mode sombre. Changez le thème du système et du navigateur et regardez la barre d'onglets à chaque fois.
3. Écrans Retina et standard. Vérifiez sur un moniteur 1x et sur un écran 2x ou 3x, et zoomez dans le navigateur.
4. Barre de favoris. Ajoutez la page aux favoris et vérifiez que l'icône reste lisible à côté d'autres sites.
5. Beaucoup d'onglets. Ouvrez 20 onglets et voyez si vous retrouvez le vôtre d'un coup d'œil.
6. Aperçu dans les SERP de Google. Vérifiez un résultat de recherche sur mobile une fois l'icône réexplorée. N'oubliez pas que la mise à jour peut prendre du temps.
7. Écran d'accueil. Ajoutez le site aux écrans d'accueil iOS et Android et confirmez que l'icône n'est pas tronquée, n'a pas de coins noirs et n'est pas trop petite dans son masque.
8. Vérification technique. Passez votre domaine dans le vérificateur de favicons MakeFav pour confirmer que les fichiers existent, renvoient un statut 200, ont les bonnes tailles et sont correctement déclarés dans votre HTML.

Un flux de travail pratique

1. Partez de votre logomark et simplifiez-le en une forme ou une lettre.
2. Créez un canevas carré avec un arrière-plan uni ou en forme qui fonctionne dans les deux thèmes.
3. Exportez les tailles 32x32 et 16x16 et peaufinez la petite version à la main dans l'éditeur de pixels.
4. Générez le jeu complet (ICO, PNG, apple-touch-icon, icônes du manifeste) avec le générateur.
5. Ajoutez les balises link, définissez les en-têtes de cache, déployez, puis vérifiez avec le vérificateur.

Un favicon est l'un des plus petits éléments de votre site et l'un des plus souvent vus. Quelques décisions soignées sur le contraste, la simplicité et la cohérence le font fonctionner dans chaque onglet, chaque thème et chaque appareil.

Questions fréquentes

Quelle taille doit avoir un favicon ?

Concevez en 16x16 et 32x32 pour les onglets du navigateur (le navigateur utilise le 32x32 sur les écrans haute densité), fournissez une apple-touch-icon de 180x180 pour iOS, et des PNG de 192x192 et 512x512 pour Android et les PWA. Pour les résultats de recherche Google, utilisez une icône carrée dont la taille est un multiple de 48 pixels, comme 48x48 ou 96x96. Une source SVG s'adapte à toutes ces tailles.

Dois-je utiliser mon logo complet comme favicon ?

En général, non. Les logos complets avec logotype textuel sont trop détaillés et trop larges pour une icône carrée de 16x16. Utilisez le logomark ou un monogramme d'une ou deux lettres, et simplifiez-le pour qu'il reste reconnaissable en tout petit.

Comment faire fonctionner un favicon en mode sombre ?

L'approche la plus sûre consiste à donner à l'icône sa propre forme d'arrière-plan unie ou un contour contrasté, afin qu'elle ne dépende pas de la couleur de l'onglet. Vous pouvez aussi utiliser un favicon SVG avec une media query prefers-color-scheme pour échanger les couleurs, et conserver des solutions de repli PNG ou ICO pour les navigateurs qui ne prennent pas en charge les icônes SVG. Testez toujours dans les thèmes clair et sombre.

Pourquoi mon nouveau favicon n'apparaît-il pas ?

Les navigateurs mettent les favicons en cache longtemps, et Google conserve sa propre copie, qu'il actualise selon son propre calendrier, ce qui prend souvent des jours ou des semaines. Actualisez la page en forçant le rechargement, videz le cache du navigateur, utilisez un nouveau nom de fichier versionné et assurez-vous que les balises link et un /favicon.ico à la racine pointent vers le bon fichier. Vous pouvez vérifier la configuration avec le vérificateur MakeFav.

Est-ce une bonne idée d'afficher des badges de notification sur un favicon ?

Oui, s'ils sont utilisés avec parcimonie. Un petit point ou un nombre à un ou deux chiffres aide les utilisateurs à remarquer ce qui demande une action, mais une animation constante ou de grands nombres nuisent à la lisibilité et à l'attention. Reprenez toujours l'état dans le titre de la page, rétablissez l'icône par défaut lorsque l'élément est traité et ne vous appuyez pas uniquement sur la couleur.