Le favicon (abréviation de Favorites Icon, aussi appelé icône de site ou icône de signet) est la petite icône affichée dans la barre d'onglets, la barre de favoris, l'historique et la barre d'adresse du navigateur. C'est l'un des éléments les plus basiques de l'identité de marque d'un site. Un site sans favicon affiche une icône de document vide parmi les onglets, ce qui paraît peu professionnel ; un favicon bien conçu permet aux utilisateurs de retrouver rapidement votre site parmi de nombreux onglets, c'est une ressource indispensable avant la mise en ligne d'un site.
Les sites web modernes ont besoin de plus qu'un simple favicon.ico. Avec la généralisation des appareils mobiles et le développement des PWA (applications web progressives), un pack d'icônes de site complet doit inclure plusieurs tailles et formats : le favicon.ico traditionnel pour la compatibilité avec les navigateurs anciens, les PNG 16/32 pour les onglets et favoris des navigateurs classiques, l'apple-touch-icon 180×180 pour l'option « Ajouter à l'écran d'accueil » des utilisateurs iPhone/iPad, les PNG 192/512 pour l'écran d'accueil Android et l'écran de démarrage PWA, ainsi que le fichier site.webmanifest qui indique au navigateur l'emplacement de ces icônes et la couleur du thème. Fabriquer manuellement toutes ces tailles et écrire correctement le code de référence HTML est fastidieux pour les développeurs sans formation en design.
Le favicon texte est la méthode la plus rapide : la plupart des blogs personnels, projets open source et systèmes internes n'ont pas besoin d'un logo complexe, utiliser l'initiale de la marque (par exemple G pour Google, F pour Facebook) associée à la couleur de marque donne un excellent résultat pour une icône texte simple. L'outil propose 8 polices système courantes, un réglage de taille et une personnalisation des couleurs. Pas besoin d'ouvrir Photoshop ou Figma, vous pouvez créer un favicon professionnel en une minute.
Le favicon emoji est une solution simple populaire ces dernières années : les emojis sont eux-mêmes des petites icônes conçues par des designers, avec des couleurs vives et une bonne reconnaissance. Utiliser un emoji pertinent (par exemple une fusée 🚀 pour la rapidité, une ampoule 💡 pour l'idée, une flamme 🔥 pour la popularité) comme favicon pour un projet personnel, prototype ou site de documentation est à la fois ludique et pratique, bien mieux qu'une icône vide. De plus, ils bénéficient d'une cohérence inter-plateformes (bien que le rendu varie légèrement d'un système à l'autre).
Le mode image est adapté aux scénarios où vous possédez déjà un logo. Si vous avez une image de logo de marque, téléchargez-la et l'outil la recadrera automatiquement au centre en carré pour générer toutes les tailles nécessaires. Notez qu'en petite taille, l'icône ne fait que 16 pixels de large, un logo complexe deviendra un amas flou après réduction. C'est pourquoi le favicon n'est généralement pas la version complète du logo, mais la partie symbole/identité du logo — comme le swoosh de Nike, la pomme d'Apple, le M de McDonald's : des formes simples restent clairement identifiables en petite taille.
Pourquoi générer en local sans envoi sur serveur ? Premièrement pour la confidentialité : des logos de marque non publiés, des maquettes clients sont des actifs sensibles, leur envoi sur un serveur d'outil tiers comporte un risque de fuite ; deuxièmement pour la rapidité : le tracé via Canvas en local est instantané, pas besoin d'attendre les téléchargements et chargements ; troisièmement pour la fiabilité : pas besoin de connexion, fonctionne aussi en réseau interne. Tout le traitement d'image utilise l'API native Canvas du navigateur, le packaging ZIP utilise la bibliothèque JSZip en JavaScript pur, aucun service backend n'est nécessaire.
Les trois formes (carré, coins arrondis, cercle) sont là pour s'adapter aux styles de différentes plateformes : Windows utilise traditionnellement des icônes carrées, iOS/iPadOS utilisent des rectangles à coins arrondis (Squircle), Android et certains sites utilisent des icônes circulaires. Les 22% de coins arrondis proposés par l'outil correspondent à un rayon de courbure assez universel, proche du style UI moderne. Notez que lors de l'affichage réel du favicon, le navigateur ne découpe généralement pas l'icône en cercle (sauf certains navigateurs). La forme circulaire influence principalement l'apparence après ajout à l'écran d'accueil du mobile.
Il est à noter : ① L'efficacité du favicon dépend fortement de la simplicité du design, les motifs complexes seront inévitablement flous en 16×16, il est recommandé d'utiliser un texte/forme/emoji simple ; ② Le rendu des emojis dépend de la police du système d'exploitation, l'apparence peut varier légèrement d'un système à l'autre ; ③ Le fichier ICO est généré sur la base d'un PNG 32×32 intégré, satisfaisant la plupart des besoins de compatibilité ; ④ Un fond transparent peut s'afficher sur fond noir ou blanc sur certains navigateurs très anciens, il est recommandé d'utiliser une couleur de fond pour plus de fiabilité sur le site principal.
