Définir des icônes et une couleur de thème

Article
04/04/2023

Les PWA installées sur Windows peuvent être personnalisées de la façon dont elles apparaissent dans le système d’exploitation. Une PWA peut définir un ensemble d’icônes et une couleur de thème pour la barre de titre.

Définir des icônes

Dans Windows, les applications sont reconnaissables aux utilisateurs par leurs icônes. Les icônes s’affichent dans la barre des tâches, dans le menu Démarrer et à d’autres endroits tels que les paramètres système.

Une PWA peut configurer les fichiers image que le système d’exploitation doit utiliser pour afficher une icône dans ces différents emplacements. Le système d’exploitation peut choisir plusieurs images, en fonction du contexte.

Dans le fichier manifeste de l’application web, les icônes d’application sont définies avec le icons membre :

{
    "icons": [
        {
            "src": "/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Chaque icône du icons tableau doit être accompagnée au moins des src propriétés et sizes . Une icône peut également avoir les type propriétés et purpose .

Propriété	Description
`src`	Chemin d’accès au fichier image, qui peut être un chemin d’accès relatif à partir du dossier racine de l’application ou une URL absolue.
`sizes`	Liste séparée par des espaces des tailles pour lesquelles l’image correspondante peut être utilisée.
`type`	Indicateur facultatif permettant au système d’exploitation de détecter rapidement le type d’image.
`purpose`	Indicateur facultatif pour aider le système d’exploitation à choisir l’image d’icône appropriée, en fonction du contexte. La valeur peut être `monochrome`, `maskable`ou `any`.

En savoir plus sur le membre icônes.

Tailles d’image d’icône

Votre PWA peut être amélioré sur Windows en fournissant les images avec des dimensions spécifiques dans le manifeste de votre application web. Nous vous recommandons de choisir l’une des options ci-dessous :

Niveau 1 : (Prise en charge des images de base : 512 x 512) Il s’agit de l’image de base à partir de laquelle générer des images manquantes.
Niveau 2 : (Vignettes) À ce niveau, votre manifeste d’application web contient des images de vignette pour l’échelle d’affichage par défaut (1x). Chacune des images doit être au format PNG et avoir l’objectif any défini. Voici une liste d’images et de tailles recommandées.
- 44x44 - icône d’application
- 71x71 - petite vignette
- 150x150 - vignette moyenne
- 310x150 - vignette large
- 310x310 - grande vignette
- 50x50 - logo du magasin
- 620x300 - écran de démarrage
Niveau 3 : (Vignettes avec échelles d’affichage) À ce niveau, votre manifeste d’application web doit contenir des images de vignette pour toutes les tailles d’échelle d’affichage Windows. L’échelle d’affichage est une configuration utilisateur dans Windows (les utilisateurs peuvent la modifier en accédant à Paramètres>Échelle d’affichage>). Les icônes de manifeste de votre application web doivent inclure des images avec les dimensions suivantes :
- 44x44 - icône d’application
- 55 x 55 - icône d’application 1,25x échelle d’affichage
- 66 x 66 - icône d’application 1,5x échelle d’affichage
- 88x88 - icône d’application 2x échelle d’affichage
- 176 x 176 - icône d’application 4x échelle d’affichage
- 71x71 - petite vignette
- 89x89 - petite vignette 1,25x échelle d’affichage
- 107x107 - petite vignette 1.5x échelle d’affichage
- 142x142 - petite vignette 2x échelle d’affichage
- 284 x 284 - petite vignette 4x échelle d’affichage
- 150x150 - vignette moyenne
- 188 x 188 - vignette moyenne 1,25 x échelle d’affichage
- 225 x 225 - vignette moyenne 1,5x échelle d’affichage
- 300 x 300 - vignette moyenne 2x échelle d’affichage
- 600x600 - vignette moyenne 4x échelle d’affichage
- 310x150 - vignette large
- 388 x 188 - échelle d’affichage de vignette large 1,25 x
- 465 x 225 - vignette large 1,5x échelle d’affichage
- 620x300 - vignette large 2x échelle d’affichage
- 1240 x 600 - vignette large 4x échelle d’affichage
- 310x310 - grande vignette
- 388 x 388 - grande vignette 1,25x échelle d’affichage
- 465 x 465 - grande vignette 1.5x échelle d’affichage
- 620 x 620 - grande vignette 2x échelle d’affichage
- 1240x1240 - grande vignette 4x échelle d’affichage
- 50x50 - Vignette de stockage
- 63 x 63 - échelle d’affichage 1,25 x 63
- 75 x 75 - Échelle d’affichage 1,5 x 75 pour les vignettes de magasin
- 100x100 - stocker la vignette 2x l’échelle d’affichage
- 200x200 - stocker la vignette 4x l’échelle d’affichage
- 620x300 - écran de démarrage
- 775x375 - Écran de démarrage 1,25x échelle d’affichage
- 930x450 - écran de démarrage 1,5x échelle d’affichage
- 1240 x 600 - écran de démarrage 2x échelle d’affichage
- 2480x1200 - écran de démarrage 4x échelle d’affichage
Niveau 4 (vignettes, échelles d’affichage et tailles cibles) À ce niveau, vous fournissez des images pour les vignettes avec des échelles d’affichage et des images de taille cible pour les afficher dans différentes surfaces dans Windows, notamment la barre des tâches, le menu Démarrer, le gestionnaire des tâches, le sélecteur de tâches ALT+Tab, etc. Cela offre la meilleure expérience pour vos utilisateurs, mais nécessite également le plus d’efforts de développement. Les icônes de manifeste de votre application web doivent inclure des images avec les dimensions suivantes :
- 44x44 - icône d’application
- 55 x 55 - icône d’application 1,25x échelle d’affichage
- 66 x 66 - icône d’application 1,5x échelle d’affichage
- 88x88 - icône d’application 2x échelle d’affichage
- 176 x 176 - icône d’application 4x échelle d’affichage
- 71x71 - petite vignette
- 89x89 - petite vignette 1,25x échelle d’affichage
- 107x107 - petite vignette 1.5x échelle d’affichage
- 142x142 - petite vignette 2x échelle d’affichage
- 284 x 284 - petite vignette 4x échelle d’affichage
- 150x150 - vignette moyenne
- 188 x 188 - vignette moyenne 1,25 x échelle d’affichage
- 225 x 225 - vignette moyenne 1,5x échelle d’affichage
- 300 x 300 - vignette moyenne 2x échelle d’affichage
- 600x600 - vignette moyenne 4x échelle d’affichage
- 310x150 - vignette large
- 388 x 188 - échelle d’affichage de vignette large 1,25 x
- 465 x 225 - vignette large 1,5x échelle d’affichage
- 620x300 - vignette large 2x échelle d’affichage
- 1240 x 600 - vignette large 4x échelle d’affichage
- 310x310 - grande vignette
- 388 x 388 - grande vignette 1,25x échelle d’affichage
- 465 x 465 - grande vignette 1.5x échelle d’affichage
- 620 x 620 - grande vignette 2x échelle d’affichage
- 1240x1240 - grande vignette 4x échelle d’affichage
- 50x50 - Vignette de stockage
- 63 x 63 - échelle d’affichage 1,25 x 63
- 75 x 75 - Échelle d’affichage 1,5 x 75 pour les vignettes de magasin
- 100x100 - stocker la vignette 2x l’échelle d’affichage
- 200x200 - stocker la vignette 4x l’échelle d’affichage
- 620x300 - écran de démarrage
- 775x375 - Écran de démarrage 1,25x échelle d’affichage
- 930x450 - écran de démarrage 1,5x échelle d’affichage
- 1240 x 600 - écran de démarrage 2x échelle d’affichage
- 2480x1200 - écran de démarrage 4x échelle d’affichage
- 16x16 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 20x20 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 24x24 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 30x30 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 32 x 32 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 36 x 36 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 40 x 40 - taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 44x44 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 48 x 48 - taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 60x60 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 64x64 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 72 x 72 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 80x80 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 96x96 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches
- 256 x 256 : taille cible pour la barre des tâches, le menu Démarrer, le gestionnaire de tâches

Résumé au niveau de l’image

Considérez, par exemple, comment l’icône de votre application peut afficher un contenu différent en fonction de la surface d’exposition disponible :

Petite surface : icône d’application (44 x 44) dans la barre des tâches, affichant un petit logo abrégé :

Surface plus grande : vignette moyenne (150 x 150) dans le menu Démarrer, affichant le logo complet de l’application :

Surface large : vignette large dans le menu Démarrer, montrant une icône d’application plus articulée :

Notez comment le contenu de l’icône a changé. Cela n’est possible que par l’utilisation de niveaux supérieurs de prise en charge des icônes. Nous recommandons aux développeurs de choisir des niveaux plus élevés pour offrir la meilleure expérience à vos utilisateurs Windows.

Descriptions des icônes

Vous trouverez ci-dessous une description de chaque icône d’application et son emplacement dans Windows.

Icône d’application normale affichée dans le menu Démarrer, la barre des tâches ou le gestionnaire de tâches.

44x44
55 x 55 (échelle 1,25 x)
66 x 66 (échelle 1,5 x)
88 x 88 (échelle 2x)
176 x 176 (échelle 4x)

La petite vignette s’affiche dans le menu Démarrer lorsque l’utilisateur définit la vignette de votre application sur une petite taille.

71x71
89 x 89 (échelle 1,25 x)
107 x 107 (échelle 1,5 x)
142 x 142 (échelle 2x)
284 x 284 (échelle 4x)

L’icône de vignette moyenne s’affiche dans le menu Démarrer lorsque l’utilisateur définit la vignette de votre application sur la taille moyenne.

150x150
188 x 188 (échelle 1,25 x)
225 x 225 (échelle 1,5 x)
300 x 300 (échelle 2x)
600 x 600 (échelle 4x)

L’icône de vignette large s’affiche dans le menu Démarrer lorsque l’utilisateur définit la vignette de votre application sur une grande taille.

310x150
388 x 188 (échelle 1,25 x)
465 x 225 (échelle 1,5 x)
620 x 300 (échelle 2x)
1240 x 600 (échelle 4x)

La grande icône de vignette se trouve dans le menu Démarrer lorsque l’utilisateur définit la vignette de votre application sur une grande taille.

310x310
388 x 388 (échelle 1,25 x)
465 x 465 (échelle 1,5 x)
620 x 620 (échelle 2x)
1240 x 1240 (échelle 4x)

L’icône du logo du Store s’affiche dans le programme d’installation d’application, l’Espace partenaires Windows, l’option « Signaler une application » dans le Windows Store et l’option « Écrire une révision » dans le Windows Store.

50x50
63 x 63 (échelle 1,25 x)
75 x 75 (échelle 1,5 x)
100x100 (échelle 2x)
200 x 200 (échelle 4x)

L’élément multimédia de l’écran de démarrage s’affiche en tant qu’écran de démarrage pour votre application. Actuellement pris en charge uniquement dans le package classique. À l’avenir, nous pourrions également ajouter la prise en charge du package d’application hébergée moderne.

620x300
775 x 375 (échelle 1,25 x)
930 x 450 (échelle 1,5 x)
1240 x 600 (échelle 2x)
2480 x 1200 (échelle 4x)

Images de taille cible

En plus des tailles de facteur d’échelle standard décrites ci-dessus, nous vous recommandons de créer des ressources « taille cible ». Nous appelons ces ressources taille cible, car elles ciblent des tailles spécifiques, telles que 16 pixels, plutôt que des facteurs d’échelle spécifiques, tels que 400. Les ressources de taille cible sont destinées aux surfaces Windows qui n’utilisent pas le système de plateau de mise à l’échelle.

Par exemple, le paramètre Applications & fonctionnalités Windows utilise des icônes d’application avec des tailles spécifiques

16x16 (recommandé)
20x20
24x24 (recommandé)
30x30
32x32 (recommandé)
36 x 36
40x40
48x48 (recommandé)
60x60
64x64
72x72
80x80
96x96
256 x 256 (recommandé)

Choisir une couleur de thème

Sur Windows, les PWA ont leur propre fenêtre d’application, avec une barre de titre qui contient le nom de l’application et les icônes de fermeture, d’agrandissement et de réduction du système.

Le contenu web créé par la PWA remplit toute la surface d’exposition de la fenêtre, à l’exception de la zone de barre de titre, qui peut être personnalisée avec une couleur de thème.

L’image suivante montre à quoi ressemble la barre de titre d’un PWA lorsque vous n’utilisez pas de couleur de thème et lorsque vous utilisez une couleur de thème qui correspond à la couleur main de l’application :

Pour définir une couleur de thème, utilisez le membre de manifeste de l’application theme_color web :

{
    "theme_color": "#0d4c73"
}

Les pages web individuelles peuvent également définir une couleur de thème à l’aide de la theme-color balise meta. Lorsque cette balise meta est présente sur la page, sa couleur définie remplace la couleur trouvée dans le manifeste de l’application web.

Afficher le contenu de l’application dans la zone de barre de titre

Vous pouvez afficher le contenu de votre application dans la zone de barre de titre à l’aide de la fonctionnalité Superposition des contrôles de fenêtre. Consultez Afficher le contenu dans la zone de la barre de titre à l’aide de la superposition des contrôles de fenêtre.

Partager via

Définir des icônes et une couleur de thème