Construire l’icône de votre application Windows

A diagram that shows several icon locations in Windows 11.

Une fois que vous avez conçu l’icône de votre application, vous devez créer les fichiers d’icône eux-mêmes. Étant donné que Windows prend en charge plusieurs thèmes, résolutions d’affichage et facteurs d’échelle, vous devez fournir plusieurs versions de votre icône pour vous assurer qu’elle semble idéale sur chaque appareil, à n’importe quelle taille.

Tailles d’icônes (WPF, UWP, WinUI)

Windows affiche l’icône de votre application à différentes tailles en fonction de l’emplacement d’affichage de votre icône et des paramètres d’échelle d’affichage de l’utilisateur. Le tableau suivant répertorie toutes les tailles possibles que Windows peut utiliser pour afficher votre icône.

Tailles d’icône (Win32)

Les fichiers Windows ICO ont été autour depuis longtemps. Il existe des tailles standard utilisées qui sont un sous-ensemble de l’ensemble complet ci-dessus.

Mise à l’échelle des icônes

Lorsque Windows affiche l’icône de votre application, elle recherche d’abord une correspondance de taille exacte. S’il n’y a pas de correspondance exacte, il recherche la taille suivante au-dessus et le scale-down. L’inclusion de plus de tailles d’icônes avec votre application signifie que Windows aura plus souvent une correspondance parfaite en pixels et réduit la quantité de mise à l’échelle appliquée aux icônes mises à l’échelle.

Facteur d’échelle Windows 11 100 % 125% 150% 200% 250 % 300 % 400%
Menu contextuel, barre de titre, barre d’état système 16px 20px 24px 32px 40px 48px 64px
Barre des tâches, résultats de la recherche, Liste Démarrer toutes les applications 24px 30px 36px 48px 60px 72px 96px
Broches de démarrage 32px 40px 48px 64px 80px 96px 256px

Remarque

Les applications doivent avoir au minimum : 16x16, 24x24, 32x32, 48x48 et 256x256. Cela couvre les tailles d’icône les plus courantes, et en fournissant une icône 256px, garantit que Windows ne doit jamais mettre à l’échelle votre icône, jamais vers le haut.

Transparence d’arrière-plan

Les icônes s’affichent mieux avec un arrière-plan transparent. Si la personnalisation de votre application nécessite que votre icône soit plate sur un arrière-plan, c’est correct aussi. Toutefois, vous devrez réinscrire certaines fonctionnalités de thèmes que les icônes transparentes obtiennent gratuitement. Par exemple, vous pouvez fournir une version de l’icône de votre application placée sur deux arrière-plans différents, une meilleure adaptée à un thème clair et l’autre à un thème sombre.

Liste complète des icônes et des variantes

Windows utilise différentes ressources d’icône dans différents contextes d’interface utilisateur. L’utilisation a changé un peu entre Windows 10 et Windows 11.

Les listes ci-dessous définissent les noms de fichiers spécifiques que Windows s’attend à contenir chaque icône correspondante.

Icône d’application

Dans Windows 10 et 11, l’icône AppList est l’icône principale de votre application. Il sera utilisé à plusieurs endroits, notamment la barre des tâches, les broches de démarrage, la liste de toutes les applications et la liste des résultats de la recherche. Windows 11 sélectionne une icône appropriée pour la liste de toutes les applications en fonction du facteur d’échelle actuel, mais Windows 10 utilise des icônes spécifiques et définies explicitement si vous les fournissez.

Les fichiers distincts pour les trois variantes de thème (par défaut, thème clair, thème sombre) sont requis, même si l’icône est identique. Si vous ne fournissez pas ces fichiers, votre icône apparaît sur une plaque d’icône système pour garantir un rapport de contraste minimal.

Taille cible de la liste des applications (obligatoire)

  • AppList.targetsize-16.png
  • AppList.targetsize-20.png
  • AppList.targetsize-24.png
  • AppList.targetsize-30.png
  • AppList.targetsize-32.png
  • AppList.targetsize-36.png
  • AppList.targetsize-40.png
  • AppList.targetsize-48.png
  • AppList.targetsize-60.png
  • AppList.targetsize-64.png
  • AppList.targetsize-72.png
  • AppList.targetsize-80.png
  • AppList.targetsize-96.png
  • AppList.targetsize-256.png

Thème sombre (obligatoire)

  • AppList.targetsize-16_altform-unplated.png
  • AppList.targetsize-20_altform-unplated.png
  • AppList.targetsize-24_altform-unplated.png
  • AppList.targetsize-30_altform-unplated.png
  • AppList.targetsize-32_altform-unplated.png
  • AppList.targetsize-36_altform-unplated.png
  • AppList.targetsize-40_altform-unplated.png
  • AppList.targetsize-48_altform-unplated.png
  • AppList.targetsize-60_altform-unplated.png
  • AppList.targetsize-64_altform-unplated.png
  • AppList.targetsize-72_altform-unplated.png
  • AppList.targetsize-80_altform-unplated.png
  • AppList.targetsize-96_altform-unplated.png
  • AppList.targetsize-256_altform-unplated.png

Thème clair (obligatoire)

  • AppList.targetsize-16_altform-lightunplated.png
  • AppList.targetsize-20_altform-lightunplated.png
  • AppList.targetsize-24_altform-lightunplated.png
  • AppList.targetsize-30_altform-lightunplated.png
  • AppList.targetsize-32_altform-lightunplated.png
  • AppList.targetsize-36_altform-lightunplated.png
  • AppList.targetsize-40_altform-lightunplated.png
  • AppList.targetsize-48_altform-lightunplated.png
  • AppList.targetsize-60_altform-lightunplated.png
  • AppList.targetsize-64_altform-lightunplated.png
  • AppList.targetsize-72_altform-lightunplated.png
  • AppList.targetsize-80_altform-lightunplated.png
  • AppList.targetsize-96_altform-lightunplated.png
  • AppList.targetsize-256_altform-lightunplated.png

Mise à l’échelle de la liste des applications (Windows 10) (facultatif)

  • AppList.scale-100.png
  • AppList.scale-125.png
  • AppList.scale-150.png
  • AppList.scale-200.png
  • AppList.scale-400.png

Thème clair (Windows 10) (facultatif)

  • AppList.scale-100_altform-colorful_theme-light.png
  • AppList.scale-125_altform-colorful_theme-light.png
  • AppList.scale-150_altform-colorful_theme-light.png
  • AppList.scale-200_altform-colorful_theme-light.png
  • AppList.scale-400_altform-colorful_theme-light.png

Remarque

Si vous n’incluez pas les ressources targetsize-*-altform-unplated au-dessus de votre icône sera mise à l’échelle vers une taille plus petite et obtiendra une plaque arrière indésirable derrière l’icône dans la barre des tâches et démarrer.

Mosaïques

Windows 10 prend en charge quatre tailles de vignette : petite, moyenne, large et grande.

Thème par défaut / sombre (partiellement requis)

  • SmallTile.scale-100.png
  • SmallTile.scale-125.png
  • SmallTile.scale-150.png
  • SmallTile.scale-200.png
  • SmallTile.scale-400.png
  • MedTile.scale-100.png
  • MedTile.scale-125.png
  • MedTile.scale-150.png
  • MedTile.scale-200.png
  • MedTile.scale-400.png
  • WideTile.scale-100.png
  • WideTile.scale-125.png
  • WideTile.scale-150.png
  • WideTile.scale-200.png
  • WideTile.scale-400.png
  • LargeTile.scale-100.png
  • LargeTile.scale-125.png
  • LargeTile.scale-150.png
  • LargeTile.scale-200.png
  • LargeTile.scale-400.png

Thème clair (facultatif)

  • SmallTile.scale-100_altform-colorful_theme-light.png
  • SmallTile.scale-125_altform-colorful_theme-light.png
  • SmallTile.scale-150_altform-colorful_theme-light.png
  • SmallTile.scale-200_altform-colorful_theme-light.png
  • SmallTile.scale-400_altform-colorful_theme-light.png
  • MedTile.scale-100_altform-colorful_theme-light.png
  • MedTile.scale-125_altform-colorful_theme-light.png
  • MedTile.scale-150_altform-colorful_theme-light.png
  • MedTile.scale-200_altform-colorful_theme-light.png
  • MedTile.scale-400_altform-colorful_theme-light.png
  • WideTile.scale-100_altform-colorful_theme-light.png
  • WideTile.scale-125_altform-colorful_theme-light.png
  • WideTile.scale-150_altform-colorful_theme-light.png
  • WideTile.scale-200_altform-colorful_theme-light.png
  • WideTile.scale-400_altform-colorful_theme-light.png
  • LargeTile.scale-100_altform-colorful_theme-light.png
  • LargeTile.scale-125_altform-colorful_theme-light.png
  • LargeTile.scale-150_altform-colorful_theme-light.png
  • LargeTile.scale-200_altform-colorful_theme-light.png 8 LargeTile.scale-400_altform-colorful_theme-light.png

Remarque

Windows 11 n’utilise pas les ressources de vignette, mais actuellement au minimum les ressources de vignette moyenne à 100 % sont requises pour publier sur le Microsoft Store. Si votre application est compatible avec Windows 10 et 11, il est recommandé d’inclure autant de ressources de vignette que possible.

Écran de démarrage

Les écrans de démarrage peuvent également être un thème clair et sombre, comme les ressources de l’icône d’application.

Par défaut

  • SplashScreen.scale-100.png
  • SplashScreen.scale-125.png
  • SplashScreen.scale-150.png
  • SplashScreen.scale-200.png
  • SplashScreen.scale-400.png

Thème sombre (facultatif)

  • SplashScreen.scale-100_altform-colorful_theme-dark.png
  • SplashScreen.scale-125_altform-colorful_theme-dark.png
  • SplashScreen.scale-150_altform-colorful_theme-dark.png
  • SplashScreen.scale-200_altform-colorful_theme-dark.png
  • SplashScreen.scale-400_altform-colorful_theme-dark.png

Thème clair (facultatif)

  • SplashScreen.scale-100_altform-colorful_theme-light.png
  • SplashScreen.scale-125_altform-colorful_theme-light.png
  • SplashScreen.scale-150_altform-colorful_theme-light.png
  • SplashScreen.scale-200_altform-colorful_theme-light.png
  • SplashScreen.scale-400_altform-colorful_theme-light.png

Les icônes de badge sont utilisées sur l’écran de verrouillage de Windows 10 et pour la plupart des applications ne sont pas requises.

Windows 10 (facultatif)

  • BadgeLogo.scale-100.png
  • BadgeLogo.scale-125.png
  • BadgeLogo.scale-150.png
  • BadgeLogo.scale-200.png
  • BadgeLogo.scale-400.png

Ces ressources sont requises pour publier sur le Microsoft Store.

Thème par défaut / Sombre (obligatoire)

  • StoreLogo.scale-100.png
  • StoreLogo.scale-125.png
  • StoreLogo.scale-150.png
  • StoreLogo.scale-200.png
  • StoreLogo.scale-400.png

Thème clair (facultatif)

  • StoreLogo.scale-100_altform-colorful_theme-light.png
  • StoreLogo.scale-125_altform-colorful_theme-light.png
  • StoreLogo.scale-150_altform-colorful_theme-light.png
  • StoreLogo.scale-200_altform-colorful_theme-light.png
  • StoreLogo.scale-400_altform-colorful_theme-light.png