Une image, toutes les tailles
Chargez une image et l'outil en génère les déclinaisons aux formats attendus par les navigateurs et les systèmes : 16, 32, 48, 64 et 192 pixels de côté, prêtes à télécharger.
Le traitement s'effectue dans votre navigateur : votre image n'est envoyée à aucun serveur.
Concevoir pour 16 pixels, pas pour 512
C'est l'erreur qui gâche la quasi-totalité des favicons. On prend le logo de l'entreprise, on le réduit, et on obtient une tache indistincte dans l'onglet.
Un carré de 16 pixels de côté, c'est 256 pixels en tout. À cette taille, un logo comportant du texte, un dégradé ou un tracé fin devient illisible. Le nom de la marque en petites lettres se transforme en pâté gris.
La bonne méthode consiste à concevoir spécifiquement pour la petite taille : prenez l'initiale de la marque, ou le symbole isolé du logo, ou une forme géométrique simple aux couleurs de l'identité. Puis vérifiez le résultat à 16 pixels avant de valider — pas à 200.
Penser aux deux fonds
Les navigateurs affichent les onglets sur fond clair ou sur fond sombre selon le thème du système. Une favicon noire disparaît en thème sombre, une favicon blanche disparaît en thème clair.
Deux solutions. La plus simple : utiliser une couleur qui contraste avec les deux, ce qui exclut le noir et le blanc purs. La plus soignée : donner à l'icône un fond plein aux couleurs de la marque, formant une pastille visible quel que soit l'environnement.
À quoi servent les différentes tailles
Le 16 pixels est la taille de l'onglet, la plus vue. Le 32 sert aux écrans à haute densité et à certains raccourcis. Le 48 apparaît dans les raccourcis de bureau, le 64 dans certaines vues système.
Le 192 pixels a un rôle différent : c'est l'icône utilisée quand un visiteur ajoute votre site à l'écran d'accueil de son téléphone. Elle s'affiche en grand, aux côtés des applications installées — négligez-la et votre site fera pauvre à côté des autres icônes.
Déclarer les icônes dans le site
Déposez les fichiers à la racine du site et déclarez-les dans l'en-tête HTML avec des balises de lien précisant la taille de chacune.
Historiquement, les navigateurs cherchaient automatiquement un fichier nommé
favicon.ico à la racine. Ce comportement subsiste et sert de filet de sécurité, mais
la déclaration explicite reste préférable : elle vous laisse la main sur les formats servis.
Pour l'icône d'écran d'accueil, un fichier manifeste complète le dispositif en indiquant également le nom affiché et les couleurs de l'application.
Pourquoi votre nouvelle favicon ne s'affiche pas
C'est la question la plus fréquente, et la réponse est presque toujours la même : le cache.
Les navigateurs conservent les favicons avec un acharnement particulier, bien plus longtemps que les autres ressources, et un simple rechargement forcé ne suffit souvent pas.
Deux moyens d'y remédier : afficher directement l'adresse du fichier d'icône dans le navigateur pour forcer son rechargement, ou changer le nom du fichier. La seconde méthode est la plus fiable, puisqu'une nouvelle adresse ne peut pas être en cache.
Ce que la favicon dit de vous
C'est un détail minuscule, et c'est précisément pourquoi il compte. Un onglet portant l'icône générique du navigateur signale un site négligé, ou pas tout à fait terminé.
Un visiteur qui garde plusieurs onglets ouverts retrouve le vôtre à son icône, pas à son titre tronqué. Sur un site marchand ou un service consulté régulièrement, cette reconnaissance immédiate vaut largement les quelques minutes que prend l'exercice.