Un favicon n’est plus une simple image : il s’agit d’un ensemble de six à dix ressources de tailles différentes, d’un conteneur ICO, d’un manifeste web et de plusieurs lignes de HTML. Ces éléments sont indispensables pour assurer un rendu soigné dans les onglets de navigateur, sur les appareils Apple, les écrans d’accueil Android, les tuiles du menu Démarrer de Windows et les écrans de lancement des PWA. Les sections suivantes expliquent pourquoi les favicons modernes doivent exister en plusieurs tailles, quelles sont les différences entre les formats PNG, ICO et SVG, et quels éléments HTML et de manifeste permettent à l’ensemble de fonctionner correctement sur toutes les plateformes.
Pourquoi les favicons modernes doivent avoir plusieurs tailles
L’époque du favicon unique s’est achevée vers 2010, quand iOS et Android ont commencé à traiter les sites web comme des applications à part entière sur l’écran d’accueil. Aujourd’hui, chaque plateforme demande différentes tailles selon le contexte. Une taille inadaptée donne un résultat visiblement médiocre : pixels doublés et flous sur les écrans Retina, image recadrée sur l’écran d’accueil iOS ou icône absente des tuiles du menu Démarrer de Windows. Pour couvrir les besoins d’un site moderne, prévoyez au minimum : 16×16 pour les onglets du navigateur (l’usage initial des favicons), 32×32 pour les favoris et les onglets Retina, 48×48 pour les raccourcis du bureau Windows, 180×180 pour les écrans d’accueil iOS (Apple Touch Icon, automatiquement recadrée en carré arrondi), 192×192 pour Android (sans recadrage : choisissez un arrière-plan transparent ou uni en conséquence) et 512×512 pour l’écran de démarrage d’une PWA. Chaque taille doit être un PNG distinct plutôt qu’une seule image redimensionnée : à 16×16, le rééchantillonnage par défaut du navigateur produit une icône floue et difficile à lire. Cet outil génère chaque taille dans un PNG séparé. Comme l’API Canvas rééchantillonne automatiquement chaque image, une illustration source simple et très contrastée est particulièrement utile pour les plus petites tailles. Le coût de quelques dizaines de kilo-octets supplémentaires est négligeable par rapport à l’amélioration visuelle.
PNG, ICO ou SVG : lequel choisir ?
Les navigateurs modernes prennent en charge trois formats de favicon, chacun ayant son utilité pour une mise en œuvre complète. Le PNG est le choix moderne par défaut : il gère la transparence, s’affiche partout et permet aux navigateurs de choisir parmi plusieurs balises `` définissant différentes tailles. Utilisez un PNG pour chaque icône de taille distincte référencée dans le HTML. Le format ICO regroupe plusieurs tailles dans un seul conteneur et reste important pour une raison précise : les navigateurs demandent automatiquement `/favicon.ico` à la racine du site, même si le HTML ne contient aucune balise ``. Placez à la racine un fichier ICO contenant des images de 16×16, 32×32 et 48×48 pour servir de solution de repli, y compris sur les pages sans lien vers un favicon. Les favicons SVG sont plus récents (Chrome les prend en charge depuis 2021) et pourraient permettre un redimensionnement universel grâce aux graphiques vectoriels. Toutefois, leur prise en charge pour les icônes reste inégale, et Safari sur iOS ne les gère pas encore. Vous pouvez ajouter le SVG en complément à l’aide d’une balise de lien `type="image/svg+xml"`, mais fournissez toujours des PNG et un ICO comme ensemble de référence. Bonne pratique : utilisez des PNG pour les favicons principaux, ajoutez favicon.ico à la racine pour les anciens navigateurs et les pages sans balisage, et proposez éventuellement un SVG en amélioration progressive.
Les éléments HTML et le manifeste qui relient le tout
Les icônes générées ne servent à rien sans les balises HTML et de manifeste qui indiquent aux navigateurs où les trouver. Pour une couverture minimale complète, ajoutez `` et les balises correspondantes pour les autres tailles, `` pour l’écran d’accueil iOS, `` pour le manifeste web, ainsi que `
` et `` pour les tuiles Windows. Cet outil génère ces balises dans l’onglet Extrait HTML ; vous pouvez coller le bloc complet directement dans l’en-tête de votre page. Le fichier `site.webmanifest` est un document JSON dont les champs comprennent le nom de l’application, `short_name` (pour les icônes avec peu de place pour le texte), un tableau `icons` (chemins, tailles et types MIME), `theme_color` (qui influence l’interface du navigateur), `background_color` (utilisé sur l’écran de démarrage PWA), `display` (`"standalone"` pour une apparence d’application) et `start_url`. Sans ce manifeste, Chrome sur Android ne proposera pas l’installation de la PWA sur l’écran d’accueil avec votre icône personnalisée et utilisera l’icône par défaut du navigateur. L’onglet Manifeste de cet outil génère automatiquement un fichier valide selon votre ensemble d’icônes et vos choix graphiques.