Onglets, favoris, PWA, dark mode : le favicon est partout et presque toujours bâclé. Le set minimal moderne tient en trois fichiers et cinq lignes.

C'est le plus petit livrable de tout le web : 16 pixels de côté. C'est aussi le plus visible : présent dans chaque onglet, chaque favori, chaque historique, chaque résultat Google mobile. Et pourtant, une quantité déconcertante de sites affichent encore le globe gris par défaut, l'équivalent numérique d'une sonnette étiquetée « occupant ». Réglons ça proprement, et pour de bon.

Le grand ménage : oublie les tutos de 2015

L'époque des vingt fichiers (apple-touch-icon-57x57, -60x60, -72x72, jusqu'à l'absurde) est révolue. Le set moderne minimal, popularisé par l'analyse d'Evil Martians, tient en peu de choses :

<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">
  • favicon.ico (32×32) à la racine : le filet de sécurité universel : vieux navigateurs, lecteurs RSS, outils qui le cherchent en dur à la racine.
  • icon.svg : la star moderne. Vectoriel, net partout, et surtout stylable.
  • apple-touch-icon.png (180×180) : l'icône d'écran d'accueil iOS : fond plein obligatoire, Apple n'aime pas la transparence sur son étagère.
  • Le manifest référence deux PNG (192 et 512 px) pour Android et les PWA.

Trois images sources, quatre lignes. Le reste des tutoriels à rallonge relève de l'archéologie.

Le favicon SVG : le bonus dark mode

Le format SVG apporte un tour de magie que peu de sites exploitent : une media query DANS l'icône.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="..."></path>
</svg>

Ton logo sombre devient clair quand l'utilisateur passe son navigateur en thème sombre. Fini l'icône noire invisible sur onglet noir : le genre de détail que la plupart des sites ratent, donc le genre de détail qui te distingue.

Le design : simplifier, pas réduire

L'erreur classique : exporter le logo complet en 16 pixels et obtenir une tache de Rorschach. À cette taille, on ne réduit pas un logo, on le redessine :

  • Garde UN élément : le monogramme, le symbole, la première lettre. Le texte intégral d'un logo en 16 px, c'est un bloc inélégant digne d'une crotte de nez qui veux pas partir...
  • Épaissis les traits : ce qui est élégant en 200 px disparaît en 16.
  • Teste sur onglet clair ET sombre, dans une vraie barre d'onglets bourrée : c'est là qu'il vivra, coincé entre 40 congénères.

Le favicon a d'ailleurs un rôle fonctionnel sous-estimé : c'est LUI qu'on cherche des yeux pour retrouver un onglet parmi cinquante. Un favicon distinctif est une fonctionnalité de navigation, pas une coquetterie.

Les à-côtés qui vont avec

Pendant que tu y es, deux voisins de palier :

  • meta name="theme-color": colore l'interface du navigateur mobile aux couleurs du site. Une ligne, effet immédiat.
  • L'image Open Graph (og:image, 1200×630) : la « favicon des réseaux sociaux » : c'est elle qu'on voit quand ton lien est partagé. Un lien sans image OG dans une conversation, c'est un colis sans étiquette : ça inspire moyennement le clic.

Le fond de l'histoire

Le favicon est un test de caractère : un détail invisible dans le cahier des charges, jamais facturé à part, que seuls les gens soigneux traitent bien. Comme les ourlets en couture ou les chants en menuiserie, il signale tout le reste. Un site au favicon net, adapté au dark mode, avec sa theme-color accordée, annonce la couleur avant même le premier scroll : ici, quelqu'un fait attention. 16 pixels de réputation : au tarif au pixel, c'est ta surface la plus rentable.

FAQ

Quels fichiers favicon sont nécessaires aujourd'hui ?

favicon.ico 32×32 à la racine, un SVG, un apple-touch-icon 180×180 et deux PNG (192/512) via le manifest. Le reste est obsolète.

Un favicon peut-il s'adapter au dark mode ?

Oui : le format SVG accepte une media query prefers-color-scheme interne qui change les couleurs selon le thème du navigateur.

Comment concevoir un bon favicon ?

Redessiner plutôt que réduire : un seul élément (monogramme, symbole), traits épaissis, test sur onglets clair et sombre.

← Retour au playground