Favicons et manifeste d'application web : les fichiers à livrer et comment les déclarer

Ce que c'est

Le HTML Standard indique qu'en l'absence d'un link portant le mot-clé icon, un agent utilisateur peut récupérer /favicon.ico relatif à l'URL du document et l'utiliser comme icône. C'est pourquoi une requête vers ce chemin apparaît dans chaque journal d'accès, et pourquoi ce fichier devrait exister même lorsque des icônes sont déclarées. Les icônes déclarées se présentent comme <link rel="icon" href="..." sizes="..." type="..."> ; lorsque plusieurs sont déclarées, le standard précise que l'agent utilisateur doit sélectionner la plus appropriée selon les attributs type, media et sizes, et qu'à égalité d'adéquation, la dernière déclarée l'emporte. Les contextes installés et épinglés lisent le manifeste d'application web, dont le tableau icons liste des objets avec src, sizes (48x48 96x96) et purpose. MDN documente les valeurs de purpose : any (par défaut), maskable (conçue avec des masques d'icône et une zone de sécurité pour que la plateforme puisse rogner les bords) et monochrome (le canal alpha utilisé comme masque sur un remplissage uni). Pour les résultats de recherche, la documentation de Google indique qu'elle prend en charge un favicon par site, un site étant défini comme un nom d'hôte, que l'icône doit être carrée et d'au moins 8x8px, une taille supérieure à 48x48px étant recommandée, que l'URL du favicon doit être stable, et que le fichier d'icône comme la page d'accueil doivent être explorables.

Pourquoi c'est important

Les icônes sont petites, mais elles apparaissent partout : onglets, favoris, écrans d'accueil, résultats de recherche, sélecteurs de tâches. Une icône absente ou erronée est remarquée par les utilisateurs et ne coûte rien à corriger une bonne fois, tandis qu'une déclaration défectueuse peut persister pendant des années, car rien n'échoue.

Comment l'appliquer

• Livrer /favicon.ico (un ICO multi-tailles), une icône SVG déclarée avec rel="icon" type="image/svg+xml", un PNG pour les navigateurs sans prise en charge des icônes SVG, et un PNG apple-touch-icon à la taille que spécifie la documentation d'Apple.
• Ajouter un manifeste avec au moins deux tailles de PNG (une icône de lanceur et une grande pour les écrans de démarrage) aux tailles documentées par les plateformes cibles ; fournir une icône maskable distincte, avec le graphisme à l'intérieur de la zone de sécurité, plutôt que de réutiliser l'icône any.
• Servir le manifeste avec le bon type de média et le déclarer avec <link rel="manifest"> sur chaque page, pas seulement la page d'accueil.
• Garder les URL d'icônes stables ; lorsque le graphisme change, conserver le chemin et laisser les caches expirer, ou changer le chemin partout en même temps.
• Vérifier avec le panneau d'application du navigateur et en requêtant chaque URL déclarée avec curl.

Pièges

Déclarer des icônes qui renvoient 404 ou une redirection vers du HTML. Utiliser une icône maskable dont le logo touche les bords, que les plateformes rognent. Bloquer /favicon.ico ou le manifeste dans robots.txt.