Les favicons
Histoire et évolution
Les favicons sont nés en 1999 avec Internet Explorer 5, qui a introduit le support des fichiers ICO 16×16 pixels associés aux favoris. D'abord propriété de Microsoft, le W3C a rapidement standardisé la balise <link rel="icon"> et les autres navigateurs ont adopté le format.
Avec l'essor des appareils mobiles et des écrans haute densité, les besoins ont évolué : Apple a introduit l'Apple Touch Icon (2007) pour iOS, Android a requis des icônes 192×192 px, et les navigateurs bureau ont demandé des versions 32×32 et 48×48 px.
En 2015, le format manifest.json a standardisé la gestion des icônes pour les Progressive Web Apps (PWA). Aujourd'hui un favicon moderne est un ensemble d'icônes en plusieurs tailles, de 16×16 px pour les onglets à 512×512 px pour les PWA.
Bonnes pratiques
Pour implémenter correctement les favicons, il faut tenir compte des standards actuels et des spécificités de chaque plateforme :
Générez plusieurs tailles. Préparez au minimum : 16×16 et 32×32 px pour les navigateurs bureau, 180×180 px pour l'Apple Touch Icon, 192×192 et 512×512 px pour Android et PWA.
Concevez pour les petites dimensions. À 16×16 px les détails fins disparaissent. Simplifiez : utilisez des formes iconiques claires, des couleurs contrastées et évitez le texte petit.
Implémentez correctement les balises HTML. Placez favicon.ico à la racine du domaine et déclarez les autres versions avec des balises <link> dans le <head>.
Versionnez vos fichiers lors des mises à jour. Les navigateurs cachent les favicons agressivement. Ajoutez un paramètre de version (ex : favicon.ico?v=2) pour forcer le rechargement.
Cas d'utilisation
Les favicons jouent un rôle pratique immédiat dans la gestion de plusieurs onglets. Quand un utilisateur a des dizaines d'onglets ouverts, il reconnaît visuellement chaque service grâce à son icône. Des applications de productivité comme Gmail, Notion ou Figma soignent leur favicon car leurs utilisateurs travaillent avec de nombreux onglets simultanément.
Dans les environnements de développement professionnel, il est courant d'utiliser des favicons différenciés par environnement (production, staging, local), avec des couleurs ou icônes légèrement distinctes, pour éviter des erreurs coûteuses. Pour les boutiques en ligne et les sites institutionnels, un favicon cohérent renforce la confiance des visiteurs.
Curiosités
- Le premier favicon documenté était l'étoile à 5 branches de MSN en 1999, quand Internet Explorer 5 a introduit le support des icônes dans les favoris.
- Twitter change dynamiquement son favicon pour afficher le nombre de notifications en attente, une technique popularisée au début des années 2010.
- Le format ICO peut contenir plusieurs résolutions dans un seul fichier. La plupart des outils génèrent automatiquement des variantes de 16, 32 et 48 pixels dans un unique favicon.ico.
- Les favicons SVG, scalables vectoriellement, sont supportés par les navigateurs modernes depuis 2020 et peuvent s'adapter au mode sombre du système d'exploitation.