Seize pixels sur seize : c'est tout l'espace qu'un navigateur laisse à un logo une fois réduit en favicon, et pendant longtemps j'ai cru qu'il suffisait de rapetisser un fichier pour obtenir ce petit carré propre. Ce carnet rassemble ce que j'ai fini par comprendre sur la simplification de logo appliquée à ce format minuscule, à partir des vraies questions qu'on me pose depuis que je bricole l'identité visuelle de projets de proches à Rouen. Je n'ai suivi aucune formation en design graphique classique pour ça — j'ai appris en ratant plusieurs favicons avant d'en sortir un qui tienne debout.
Un favicon n'est pas une simple réduction du logo
Non, et c'est la première question que je me suis posée en aidant Luce Pérard à mettre ses confitures en ligne. Elle voulait garder l'esprit dessiné à la main de ses étiquettes, alors j'ai pris son logo — une branche de fruits tracée au feutre puis vectorisée — et je l'ai simplement compressé dans un redimensionneur en ligne. Le résultat tenait plus de la tache que de l'icône : une bouillie grisâtre, illisible dès qu'on quittait le zoom à 100 %.
C'est là que j'ai compris que le favicon — ce nom vient de favorite icon — n'est pas une version réduite du logo, c'est une icône à part entière, avec ses propres règles. Le défi tient dans une contrainte simple à énoncer et redoutable à tenir : faire passer l'identité d'une marque dans une taille standard minimale de 16x16 pixels. Autant dire peindre une enseigne sur un timbre-poste.
Le texte ne survit jamais à seize pixels
Le texte est la première victime. Un nom de boutique, une accroche, un monogramme travaillé : à seize pixels, une police de caractères devient une ligne de fourmis écrasées, même les polices les plus épaisses. Avant de l'accepter, j'avais acheté un pack de polices sur Etsy sans trop savoir laquelle choisir, persuadée qu'une bonne police sauverait n'importe quel format. Perte de temps : aucune lettre, aussi soignée soit-elle, ne survit à cette échelle, et ça rejoint une question de lisibilité typographique plus large — au-delà d'une certaine taille, ce n'est plus la police qui compte, c'est la silhouette.
Pour les étiquettes de Luce, j'ai donc supprimé le nom de la boutique, retiré les brins secondaires du dessin, et gardé uniquement la forme centrale de la branche. C'est un bon exercice pour bien choisir entre un logo texte ou un symbole graphique, parce que ça oblige à trouver l'élément le plus reconnaissable de toute l'identité visuelle.
Simplifier un logo sans vider son identité visuelle
Trouver la bonne limite entre épurer et vider a pris plusieurs essais ratés. Un soir, en travaillant sur la grille de pixels dans Illustrator, zoomée à 800 % pour aligner un contour sans qu'il tombe entre deux pixels — ce flou qu'on appelle l'anti-aliasing —, j'ai fini par envoyer une version « propre » à Lisette Arnoux, la libraire pour qui j'avais refait le logo. Sa réponse est arrivée en dix minutes : un petit carré gris ne ressemblait à rien de sa vitrine. Lisette a une règle qu'elle répète à chaque logo qu'on lui montre : si ça ne reste pas lisible à la taille d'un cachet postal, ça ne tient pas. J'avais confondu minimalisme et vide.
J'ai donc réintégré une légère courbure dans le tracé, en exagérant les contrastes plutôt qu'en les adoucissant. Un trait qui fait un pixel de large sur le logo normal doit parfois en occuper deux ou trois sur le favicon pour rester visible — la proportion compte plus que la fidélité exacte au fichier source. Il a aussi fallu apprendre à lire l'espace vide autour de la forme, pas seulement la forme elle-même, et vérifier que la couleur tenait aussi bien sur un fond clair que sur un fond sombre, un sujet qui mériterait un chapitre à lui seul. Pour ça, j'ai imprimé plusieurs essais à leur taille réelle sur des petites planches de test : à la sortie de l'imprimante, le papier encore chaud entre les doigts, j'ai remarqué, pour la première fois, que les couleurs du papier et celles de l'écran se répondaient enfin, alors qu'avant l'une virait toujours plus terne que l'autre. C'est ce genre de vérification qui permet de vérifier la lisibilité d'un logo en petite taille avant de le publier partout.
ICO, SVG, PNG : le format qui compte vraiment
Le format a longtemps été pour moi une simple formalité technique, jusqu'à ce que je comprenne ce qu'il change concrètement. Le .ico fonctionne comme un conteneur : il peut ranger plusieurs tailles — 16, 32, 48 pixels — dans un seul fichier, et le navigateur choisit celle dont il a besoin selon l'écran. Pour les écrans haute résolution, mieux vaut prévoir une taille de 32x32 pixels dès le départ ; l'affichage final reste petit, mais la densité de pixels rend l'icône nette au lieu de la laisser baver. C'est aussi la question que me posent le plus souvent les personnes pour qui je fais un premier logo : quel fichier envoyer, au juste, pour que ça marche partout.
La vraie surprise a été le SVG, que la plupart des navigateurs récents acceptent désormais comme favicon. Comme c'est du vectoriel, la taille ne pose plus aucun problème de netteté, et le fichier ne pèse presque rien comparé à un PNG multi-résolutions. Ça a aussi changé ma manière de choisir mes outils : autant travailler la version vectorielle dès la première ébauche du logo plutôt que de partir d'un export bitmap qu'il faut redétourer ensuite.
L'icône pour l'écran d'accueil du téléphone
Oui, et c'est une déclinaison à part entière, pas un simple copier-coller du favicon. Si quelqu'un ajoute le site à l'écran d'accueil de son téléphone, c'est une Apple Touch Icon de 180x180 pixels qui s'affiche, avec ses coins arrondis appliqués automatiquement par le système. Prévoir cette taille dès le départ évite de repartir de zéro plus tard — c'est le genre de détail qui distingue un projet où l'identité visuelle a été pensée pour plusieurs supports d'un projet qui s'arrête au logo affiché sur la page d'accueil.
Ce qui me dit qu'un favicon est prêt
Après plusieurs versions, j'ai fini par retenir un seul critère fiable : si un logo ne peut pas être résumé en un carré minuscule sans perdre son identité, c'est probablement qu'il est encore trop chargé à la base — trop de détails, trop de contraste inutile, trop d'éléments qui ne servent qu'à la version grand format. Je teste chaque favicon dans un onglet réel, sur fond clair et sur fond sombre, avant de le valider ; c'est souvent là qu'apparaissent les défauts qu'un simple zoom à l'écran ne montre pas.
Cette étape est devenue une sorte de test de vérité pour tout le reste du travail, et elle rejoint directement mes étapes pour refaire son logo de boutique sans tout gâcher : reprendre une identité visuelle par le favicon oblige à revoir chaque version avec un œil plus sévère, jusqu'à ce que la forme tienne toute seule. Après trois ans à bricoler des logos pour des proches plutôt que pour des clients d'agence, c'est encore cette vérification qui me semble la plus utile : un favicon raté se voit tout de suite, alors qu'un logo trop complexe peut mettre des mois à révéler ses failles.
Le logo de Luce, lui, a fini par passer le test : réduit à seize pixels, on distingue encore la courbe de la branche, et ça lui suffit largement pour que ses clientes reconnaissent l'onglet parmi une dizaine d'autres ouverts.