Icônes de manifeste : le tableau icons d'un manifeste d'application web
Une icône de manifeste est une entrée du tableau icons d'un manifeste d'application web, le fichier JSON qui décrit votre site lorsqu'il est installé. Chaque entrée fournit un src, une chaîne sizes, généralement un type, et éventuellement un purpose, et le navigateur choisit la correspondance la plus proche pour l'écran d'accueil, le lanceur d'applications, le sélecteur de tâches et l'écran de démarrage. Déclarez au minimum un PNG de 192x192 et un de 512x512.
À quoi sert le tableau
Le manifeste d'application web est un fichier JSON lié depuis votre en-tête qui indique à un navigateur comment votre site doit se comporter une fois installé : son nom, son URL de démarrage, son mode d'affichage, sa couleur de thème et ses icônes. Les icônes de manifeste sont celles utilisées en dehors de l'interface du navigateur : le lanceur, le sélecteur d'applications, l'invite d'installation, l'écran de démarrage.
Contrairement aux balises link de favicon, le tableau est une liste de candidats plutôt qu'un ensemble d'instructions. Vous décrivez ce qu'est chaque fichier, et le navigateur choisit selon la surface. Cela signifie que déclarer plus d'entrées est peu coûteux : rien n'est téléchargé tant qu'une surface n'en a pas besoin.
Un manifeste minimal
{
"name": "Example App",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"theme_color": "#0b0b0b",
"background_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Liez-le depuis l'en-tête avec <link rel="manifest" href="/manifest.json">. Le fichier peut aussi s'appeler manifest.webmanifest ; c'est la balise link qui compte.
Champs d'une entrée d'icône
| Champ | Ce qu'il fait |
|---|---|
| src | Chemin vers l'image, résolu relativement à l'URL du manifeste. Obligatoire. |
| sizes | Dimensions sous la forme "LARGEURxHAUTEUR", ou plusieurs séparées par des espaces pour un fichier multi-tailles. |
| type | Type MIME, par exemple image/png. Permet à un navigateur d'ignorer les formats qu'il ne peut pas décoder. |
| purpose | "any" (par défaut), "maskable" pour les icônes que l'on peut rogner sans risque, ou "monochrome". |
FAQ sur les icônes de manifeste
Pourquoi 192 et 512 précisément ?
192x192 est la taille qu'Android utilise pour l'icône de l'écran d'accueil sur les densités d'écran courantes, et 512x512 est la taille utilisée pour l'écran de démarrage et l'invite d'installation. Ensemble, elles satisfont les critères d'installabilité des navigateurs Chromium.
Les icônes de manifeste remplacent-elles mon favicon ?
Non. Elles ne couvrent que les surfaces d'application installée. Les onglets, favoris et l'historique du navigateur proviennent toujours de vos balises link rel="icon" et de /favicon.ico, alors livrez les deux.
iOS lit-il les icônes du manifeste ?
Safari lit le manifeste pour des choses comme le nom et le mode d'affichage, mais l'icône de l'écran d'accueil provient de la balise link apple-touch-icon. Déclarez les deux si vous voulez que l'icône soit correcte sur iOS et Android.