Icône d'application : en quoi elle diffère d'un favicon
Une icône d'application est l'image qui représente une application installée sur un écran d'accueil, un lanceur, un dock ou un sélecteur d'applications, par opposition à un favicon, qui représente un site à l'intérieur d'un navigateur. Sur le web, le même visuel sert les deux : iOS prend l'icône d'application dans la balise link apple-touch-icon, tandis qu'Android et les PWA de bureau la prennent dans le tableau icons du manifeste d'application web. Chaque plateforme la rogne et la masque à sa propre forme, donc le visuel doit être dessiné pour survivre à cela.
Même visuel, rôle différent
Un favicon vit à l'intérieur de l'interface du navigateur, à 16 ou 32 pixels, à côté d'un titre de page qui porte l'essentiel du sens. Une icône d'application vit sur un écran d'accueil à 100 pixels ou plus, seule, à côté d'une douzaine de concurrentes, et elle est la seule chose qui vous identifie. Elle dispose de plus d'espace et fait l'objet de plus d'attention.
La différence pratique tient à l'endroit où la plateforme la lit et à ce qu'elle en fait ensuite. Les navigateurs dessinent un favicon tel quel. Les systèmes d'exploitation rognent les icônes d'application à une forme, ajoutent une ombre, et parfois les teintent ou les assombrissent, donc une marque qui court jusqu'au bord du canevas se retrouve coupée.
Où chaque plateforme lit l'icône d'application
| Plateforme | Source | Taille à livrer |
|---|---|---|
| iOS / iPadOS | link rel="apple-touch-icon" | PNG 180x180, opaque |
| Android | Tableau icons du manifeste | PNG 192x192 et 512x512 |
| PWA de bureau | Tableau icons du manifeste | PNG 512x512 |
| Masque de forme du lanceur Android | Entrée de manifeste avec purpose maskable | PNG 512x512, zone de sécurité 80 % |
| Raccourci Windows | favicon.ico | Entrée 48x48 |
Les deux déclarations qui comptent
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">iOS lit la première, Android et les PWA de bureau lisent le tableau icons dans le fichier référencé par la seconde. Entre elles, elles couvrent toutes les surfaces d'application installée.
FAQ sur l'icône d'application
Ai-je besoin de visuels distincts pour l'icône d'application et le favicon ?
Généralement pas de visuels distincts, mais souvent un traitement distinct. L'icône d'application veut un fond rempli et un rembourrage généreux ; le favicon veut la marque aussi grande et simple que possible. Même logo, deux exports.
Pourquoi mon icône d'écran d'accueil ressemble-t-elle à une capture d'écran ?
iOS se rabat sur une capture d'écran de la page lorsqu'il ne trouve ni balise link apple-touch-icon ni /apple-touch-icon.png à la racine du site. Ajouter l'un ou l'autre corrige le problème, même si l'ancienne icône peut persister jusqu'à ce que le raccourci soit recréé.
Quelle taille le visuel source doit-il avoir ?
1024x1024 ou plus, carré, sans coins arrondis intégrés. Chaque taille de plateforme se réduit proprement à partir de là, et les plateformes appliquent leurs propres formes de coins.