FlowingDev

Les favicons, expliqués : la petite icône aux grandes responsabilités

Apprenez ce que sont les favicons, pourquoi il en faut de toutes les tailles, et comment ils renforcent l'image de votre site dans les onglets, écrans d'accueil et favoris.

Essayer l'outil: Générateur de Favicon

En une phrase

Un favicon est la petite icône qui représente votre site web dans les onglets du navigateur, les favoris et les écrans d'accueil des mobiles, agissant comme un élément minuscule mais persistant de votre identité de marque.

Le problème que ça résout

À l'âge de pierre d'Internet, en 1999, Microsoft a introduit dans Internet Explorer 5 une fonctionnalité qui résolvait un problème simple : comment distinguer visuellement un favori dans une longue liste ? Leur solution fut l'« icône de favori », ou favicon. Un serveur web pouvait fournir un fichier nommé favicon.ico à sa racine, et IE affichait cette icône de 16x16 pixels à côté du favori. C'était un petit détail, mais une idée de génie pour l'image de marque.

Avance rapide jusqu'à aujourd'hui. On n'a plus seulement des listes de favoris. On a des dizaines d'onglets entassés dans une seule fenêtre de navigateur. On a des téléphones portables où l'on fait « Ajouter à l'écran d'accueil », transformant un site web en une sorte d'icône d'application. On a différents systèmes d'exploitation (iOS, Android, Windows), chacun avec ses propres idées sur l'apparence de ces icônes, leur taille et les effets spéciaux à appliquer.

Le problème initial de « comment identifier un favori » a explosé pour devenir un défi bien plus grand : « Comment maintenir une présence de marque cohérente et de haute qualité dans tous les contextes possibles où l'URL de mon site pourrait apparaître ? »

Se contenter de balancer un unique fichier favicon.ico sur votre serveur ne suffit plus du tout. En faisant ça, vous risquez de vous retrouver avec une bouillie de pixels floue sur un iPhone récent, ou une lettre générique dans un carré de couleur sur Android. Le problème qu'une stratégie de favicon moderne résout, c'est cette fragmentation. Il s'agit de générer toute une panoplie d'icônes et les balises HTML correspondantes dans le <head> pour s'assurer que votre petit logo soit net, pro et délibéré partout, d'un moniteur 4K à une tablette Android vieille de 6 ans.

Comment ça marche sous le capot

Créer un jeu de favicons « complet » ne se résume pas à redimensionner une image. Cela implique différents formats de fichiers, des fichiers de métadonnées et un florilège de balises <link>, chacune née d'une époque différente du web.

L'ancêtre : favicon.ico

Le format original, .ico, est un conteneur, pas juste une image. Voyez ça comme un fichier ZIP pour les images. Un seul fichier favicon.ico peut regrouper plusieurs images bitmap, généralement en 16x16, 32x32 et 48x48 pixels. Cela permettait au navigateur de choisir la meilleure résolution pour la tâche — une icône 16x16 pour la barre d'onglets, et peut-être une 32x32 pour la barre des tâches de Windows.

Pour la rétrocompatibilité, les navigateurs font encore aujourd'hui une requête non sollicitée vers /favicon.ico à la racine de votre domaine, même si vous ne le déclarez pas dans votre HTML. Pour le déclarer correctement, vous utiliseriez une balise link comme celle-ci :

<!-- Le .ico classique, avec sizes="any" pour indiquer qu'il contient plusieurs tailles -->
<link rel="icon" href="/favicon.ico" sizes="any" type="image/x-icon">

Bien que le format .ico soit ancien, c'est encore le seul moyen d'afficher une icône dans certains contextes, comme pour les utilisateurs d'Internet Explorer (oui, ils existent encore).

La touche Apple : un monde en plus haute résolution

Quand l'iPhone est sorti en 2007, sa fonctionnalité « Ajouter à l'écran d'accueil » avait besoin de quelque chose de mieux qu'une icône floue de 16x16 pixels. La solution d'Apple fut simple et pragmatique : si un utilisateur enregistre un site sur son écran d'accueil, iOS chercherait un fichier PNG à la racine du site nommé apple-touch-icon.png.

Cela contournait complètement le format .ico en utilisant un PNG de plus haute résolution. Au fil des ans, avec l'augmentation de la densité des écrans (bonjour les écrans Retina !), les exigences d'Apple ont grandi. Maintenant, pour être net sur tous les iPhones et iPads modernes, on fournit généralement un PNG de 180x180 pixels.

Vous le déclarez en utilisant un attribut rel spécial :

<!-- Pour iPhone, iPad, etc. C'est le plus important pour les versions modernes d'iOS. -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

Vous pourriez voir du code plus ancien avec apple-touch-icon-precomposed.png. C'était pour dire aux anciennes versions d'iOS de ne pas ajouter les coins arrondis et l'effet brillant par défaut. Aujourd'hui, iOS n'applique plus ces effets, donc la version « precomposed » est devenue quasiment obsolète.

La méthode Android & Chrome : le Web App Manifest

Au lieu d'inventer une énième balise link propriétaire, Google a adopté une approche plus extensible avec le Web App Manifest. C'est un simple fichier JSON, généralement nommé manifest.json ou site.webmanifest, qui fournit une foule de métadonnées sur votre application web. C'est la pierre angulaire des Progressive Web Apps (PWA).

Dans ce manifest, vous définissez un tableau d'icônes de différentes tailles. Android et Chrome peuvent alors choisir la plus appropriée pour l'appareil et le contexte de l'utilisateur, que ce soit une icône d'écran d'accueil, un écran de démarrage ou une icône de notification.

D'abord, vous liez le manifest dans votre HTML :

<link rel="manifest" href="/site.webmanifest">

Ensuite, le fichier site.webmanifest lui-même décrit les icônes :

{
  "name": "FlowingDev",
  "short_name": "FlowingDev",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

La propriété purpose: "maskable" est une astuce bien pensée. Elle indique au navigateur que l'icône est conçue pour fonctionner avec des « zones de sécurité », afin qu'Android puisse la recadrer dans différentes formes (comme des cercles ou des squircles) sans couper les parties importantes de votre logo.

La touche de modernité : les icônes SVG

Dans un monde parfait, on aurait un seul fichier vectoriel scalable à l'infini pour tout. C'est la promesse de l'utilisation d'un SVG pour votre favicon. Une icône SVG peut être minuscule en taille de fichier et sera parfaitement nette à n'importe quelle résolution. Le support des navigateurs pour cela est maintenant excellent.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Le plus cool là-dedans ? Vous pouvez intégrer une media query CSS directement dans le SVG pour qu'il s'adapte au thème système de l'utilisateur.

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

Cependant, vous ne pouvez pas compter uniquement sur le SVG. Il ne fonctionne pas pour apple-touch-icon ou dans de nombreux autres contextes plus anciens. La meilleure pratique aujourd'hui est d'utiliser un SVG comme icône principale de haute qualité et de fournir des fallbacks PNG et ICO pour les navigateurs et plateformes plus anciens.

Histoires vécues

Le lancement chaotique de la startup

Une petite startup, « CodeLeap », était sur le point de lancer son nouvel outil pour développeurs. Le logo, une grenouille bondissante astucieuse, était super sur le site. Pour le favicon, le fondateur a rapidement enregistré un PNG 32x32 en tant que favicon.ico, l'a jeté dans le répertoire racine et est passé à autre chose. Le lancement fut un succès. Quelques jours plus tard, une investisseuse qu'ils essayaient de séduire a ajouté leur site à l'écran d'accueil de son iPhone pour y jeter un œil en déplacement. Au lieu du logo net de la grenouille, elle a vu un carré flou et pixélisé qui était en fait une capture d'écran de mauvaise qualité de la page web. Ça faisait amateur.

Leçon : Les premières impressions comptent partout. Oublier les icônes spécifiques à une plateforme comme apple-touch-icon peut saper le professionnalisme de votre marque à un moment critique. Vous ne créez pas seulement un site web ; vous créez un actif de marque qui vit sur les appareils des utilisateurs.

Le mystère des paniers abandonnés en e-commerce

Une boutique en ligne, « GadgetGrove », a remarqué quelque chose de bizarre. Les utilisateurs ajoutaient des articles à leur panier mais ne finalisaient souvent pas leur achat, surtout pendant les grosses saisons de shopping. Ils avaient un favicon correct — un « G » vert sur fond blanc. Le problème ? Leur principal concurrent, « GearGalaxy », utilisait un « G » bleu. Dans un navigateur rempli de 20 onglets de comparaison de produits, les utilisateurs s'embrouillaient et fermaient accidentellement l'onglet GadgetGrove alors qu'ils voulaient fermer celui d'un concurrent. L'équipe a généré un nouveau jeu de favicons basé sur leur logo unique de sac de shopping. Il était instantanément reconnaissable. La confusion entre les onglets a diminué, et les utilisateurs pouvaient retrouver leur chemin vers leur panier.

Leçon : Un favicon n'est pas juste de la déco ; c'est un micro-outil de navigation vital. Dans un monde surchargé d'onglets, une icône distinctive et reconnaissable peut avoir un impact direct sur l'expérience utilisateur et même sur les conversions.

La PWA qui ne faisait pas très « App »

Un développeur a créé une fantastique Progressive Web App (PWA) pour suivre ses habitudes de lecture. Elle fonctionnait hors ligne et était ultra-rapide. Il encourageait les utilisateurs à l'« installer » via la fonction « Ajouter à l'écran d'accueil » de Chrome. Mais quand ils le faisaient, l'icône qui apparaissait était une lettre générique dans un carré de couleur fade, générée automatiquement par Chrome. L'application ressemblait moins à une « vraie » app qu'à un simple favori. L'engagement des utilisateurs était faible. Le développeur a réalisé qu'il avait oublié le fichier site.webmanifest. Il en a rapidement généré un, avec des icônes haute résolution et une couleur de thème. La fois suivante où les utilisateurs l'ont installée, ils ont eu une belle icône de marque. La qualité perçue a grimpé en flèche.

Leçon : Pour les applications web modernes, le Web App Manifest et ses icônes ne sont pas négociables. Ils sont le pont entre un site web et une expérience quasi-native sur l'écran d'accueil d'un utilisateur.

Erreurs et pièges courants

  • Partir d'une source en basse résolution. Si votre image source est un JPG de 64x64 pixels, toutes les icônes générées seront floues et pleines d'artefacts. Partez toujours de la source avec la plus haute résolution possible, idéalement un PNG carré de 512x512 pixels (ou plus) ou un SVG.
  • Ignorer la transparence. Utiliser une image source avec un fond opaque (comme un carré blanc) fera apparaître ce carré dans l'onglet du navigateur ou sur l'écran d'accueil de l'utilisateur. Sauf si c'est votre intention, utilisez une image source avec un fond transparent.
  • Créer une icône trop complexe. Un favicon est affiché à des tailles minuscules. Le logo complet de votre entreprise avec son slogan va devenir une tache illisible. Les meilleurs favicons sont des symboles simples, à fort contraste, dérivés du logo principal.
  • Oublier de vider le cache. C'est la cause N°1 de frustration pour les développeurs avec les favicons. Les navigateurs les mettent en cache de manière très agressive. Si vous avez mis à jour votre favicon mais ne voyez pas le changement, pas de panique. Forcez un rafraîchissement complet (Ctrl+Shift+R ou Cmd+Shift+R), videz le cache de votre navigateur, ou essayez un autre navigateur pour confirmer que le changement est bien en ligne.
  • Utiliser des chemins relatifs au lieu d'absolus. L'attribut href de vos balises <link> devrait généralement être un chemin absolu depuis la racine de votre domaine (par ex., /images/favicon-32x32.png, et non images/favicon-32x32.png). Cela garantit que ça fonctionne, peu importe la profondeur de l'URL de la page actuelle.

Pourquoi vous devriez vous y intéresser

Vous devriez penser à votre stratégie de favicon dès que vous commencez un projet web. Ce n'est pas une fioriture « sympa à avoir » à ajouter à la fin ; c'est une pièce fondamentale de l'identité de votre site.

Un jeu de favicons complet et bien exécuté :

  • Renforce votre marque. C'est souvent l'élément le plus fréquemment vu de votre identité visuelle.
  • Améliore l'ergonomie. Il aide les utilisateurs à naviguer dans des barres d'onglets bondées et à retrouver votre site dans leur historique.
  • Est un signe de professionnalisme. Un favicon manquant ou mal rendu donne l'impression qu'un site est incomplet ou peu fiable.
  • Améliore l'expérience « applicative ». Pour les PWA, c'est la clé pour ressembler à une application native sur l'appareil d'un utilisateur.

En bref, passer dix minutes à générer un jeu de favicons correct est l'une des activités avec le meilleur retour sur investissement (ROI) que vous puissiez faire pour la qualité perçue et l'expérience utilisateur de votre site web.

Pour aller plus loin

Théorie bouclée. Place à la pratique — 100 % dans ton navigateur.

Essayer l'outil: Générateur de Favicon