Icônes et logos d’applicationApp icons and logos

Chaque application dispose d’une icône ou d’un logo associés qui la représentent, et apparaissent à plusieurs endroits dans l’environnement Windows :Every app has an icon/logo that represents it, and that icon appears in multiple locations in the Windows shell:

  • Liste des applications dans le menu DémarrerThe app list in the start menu
  • Barre des tâches et Gestionnaire des tâchesThe taskbar and task manager
  • Vignettes de l’applicationYour app's tiles
  • Écran de démarrage de l’applicationYour app's splash screen
  • Microsoft StoreIn the Microsoft Store

Écran d’accueil et vignettes de Windows 10

Cet article décrit les concepts de base de la création d’icônes d’application, comment utiliser Visual Studio pour gérer celles-ci et comment les gérer manuellement si nécessaireThis article covers the basics of creating app icons, how to use Visual Studio to manage them, and how manage them manually, should you need to.

(cet article a spécialement trait aux icônes qui représentent l’application proprement dite ; pour des conseils concernant les icônes en général, voir l’article Icônes).(This article is specifically for icons that represent the app itself; for general icon guidance, see the Icons article.)

Types, emplacements et facteurs d’échelle des icônesIcon types, locations, and scale factors

Par défaut, Visual Studio stocke vos ressources d’icône dans un sous-répertoire de ressources.By default, Visual Studio stores your icon assets in an assets subdirectory. Voici la liste des différents types d’icônes, des emplacements où elles apparaissent et de leur noms.Here's a list of the different types of icons, where they appear, and what they're called.

Nom de l’icôneIcon name Apparaît dansAppears in Nom du fichier de ressourceAsset file name
Petite vignetteSmall tile Menu DémarrerStart menu SmallTile.pngSmallTile.png
Vignette moyenneMedium tile Menu Démarrer, Description dans le Microsoft Store*Start menu, Microsoft Store listing* Square150x150Logo.pngSquare150x150Logo.png
Vignette largeWide tile Menu DémarrerStart menu Wide310x150Logo.pngWide310x150Logo.png
Grande vignetteLarge tile Menu Démarrer, Description dans le Microsoft Store*Start menu, Microsoft Store listing* LargeTile.pngLargeTile.png
Icône d’applicationApp icon Liste d’applications dans le menu Démarrer, barre des tâches, Gestionnaire des tâchesApp list in start menu, task bar, task manager Square44x44Logo.pngSquare44x44Logo.png
Écran de démarrageSplash screen Écran de démarrage de l’applicationThe app's splash screen SplashScreen.pngSplashScreen.png
Logo du badgeBadge logo Vignettes de l’applicationYour app's tiles BadgeLogo.pngBadgeLogo.png
Logo de package/Logo du StorePackage logo/Store logo Programme d’installation, Espace partenaires, option « Signaler une application » dans le Store, option « Rédiger un avis » dans le StoreApp installer, Partner Center, the "Report an app" option in the Store, the "Write a review" option in the Store StoreLogo.pngStoreLogo.png

* Utilisé, sauf si vous choisissez d’afficher uniquement des images chargées dans le Store.* Used unless you choose to display only uploaded images in the Store.

Pour garantir que ces icônes s’affichent nettement sur chaque écran, vous pouvez créer plusieurs versions d’une même icône en fonction de différents facteurs d’échelle.To ensure these icons look sharp on every screen, you can create multiple versions of the same icon for different display scale factors.

Le facteur d’échelle détermine la taille d’éléments d’interface, tels que le texte.The scale factor determines the size of UI elements, such as text. Les facteurs d’échelle sont compris entre 100 % et 400 %.Scale factors range from 100% to 400%. Plus la valeur est élevée, plus les éléments d’interface utilisateur sont volumineux, ce qui augmente leur visibilité sur des écrans haute résolution.Larger values create larger UI elements, making them easier to see on high-DPI displays.

Windows définit automatiquement un facteur d’échelle pour chaque affichage en fonction de son nombre de PPP (points par pouce) et de la distance de visualisation de l’appareil.Windows automatically sets the scale factor for each display based on its DPI (dots-per-inch) and the viewing distance of the device. (Les utilisateurs peuvent remplacer la valeur par défaut en accédant à la page Paramètres > Afficher > Mise à l’échelle et disposition.)(Users can override the default value by going to the Settings > Display > Scale and layout page.)

Capture d’écran de la page Affichage dans les paramètres.

Étant donné que les ressources d’icône d’application sont des images bitmap dont l’échelle ne s’adapte pas bien, nous vous recommandons de fournir une version de chaque icône pour chaque facteur d’échelle : 100 %, 125 %, 150 %, 200 % et 400 %.Because app icon assets are bitmaps and bitmaps don't scale well, we recommend providing a version each icon asset for each scale factor: 100%, 125%, 150%, 200%, and 400%. Cela fait beaucoup d’icônes !That's a lot of icons! Heureusement, Visual Studio fournit un outil qui facilite la génération et la mise à jour de ces icônes.Fortunately, Visual Studio provides a tool that makes it easy to generate and update these icons.

Image de description dans le Microsoft StoreMicrosoft Store listing image

« Comment spécifier des images pour mes applications dans la Description dans le Store ? »"How do I specify images for my app's listing in the Microsoft Store?"

Par défaut, nous utilisons certaines images de vos packages dans le Store, comme décrit dans le tableau en haut de cette page (ainsi que d’autres images que vous fournissez pendant le processus de soumission).By default, we use some of the images from your packages in the Store, as described in the table at the top of this page (along with other images that you provide during the submission process). Cependant, lorsque vous présentez votre description aux clients sur Windows 10 (y compris Xbox), vous avez également la possibilité d’empêcher le Store d’utiliser les images de logo disponibles dans les packages de votre application et de faire en sorte qu’il utilise uniquement les images que vous chargez.However, you have the option to prevent the Store from using the logo images in your app's packages when displaying your listing to customers on Windows 10 (including Xbox), and instead have the Store use only images that you upload. Cela vous permet de mieux contrôler l’apparence des différents affichages de votre application au sein du StoreThis gives you more control over your app’s appearance in various displays throughout the Store. (notez que, si votre produit prend en charge des versions antérieures du système d’exploitation, certains clients pourraient continuer à voir les images extraites de vos packages, même si vous utilisez cette option). Vous pouvez faire cela dans la section Logos du Store de l’étape Description dans le Store du processus de soumission.(Note that if your product supports earlier OS versions, those customers may still see images from your packages, even if you use this option.) You can do this in the Store logos section of the Store listing step of the submission process.

Spécification des Logos du Store pendant le processus de soumission d’application

Lorsque vous activez cette case, une nouvelle section appelée Affichage des images par le Windows Store s’affiche.When you check this box, a new section called Store display images appears. Vous pouvez y charger 3 tailles d’image que le Store utilisera à la place des images de logo extraites des packages de votre application : 300 x 300, 150 x 150 et 71 x 71 pixels.Here, you can upload 3 image sizes that the Store will use in place of logo images from your app’s packages: 300 x 300, 150 x 150, and 71 x 71 pixels. Seule la taille de 300 x 300 est requise, mais nous vous conseillons de fournir les 3 tailles.Only the 300 x 300 size is required, although we recommend providing all 3 sizes.

Pour plus d’informations, voir Afficher uniquement des images de logo chargées dans le Store.For more info, see Display only uploaded logo images in the Store.

Gestion des icônes d’application avec le Concepteur de manifeste Visual StudioManaging app icons with the Visual Studio Manifest Designer

Visual Studio fournit un outil très utile pour la gestion des icônes d’application appelé Concepteur de manifeste.Visual Studio provides a very useful tool for managing your app icons called the Manifest Designer.

Si vous ne disposez pas de Visual Studio 2019, plusieurs versions sont disponibles, dont une gratuite (Visual Studio 2019 Community Edition), les autres versions proposant des essais gratuits.If you don't already have Visual Studio 2019, there are several versions available, including a free version, (Visual Studio 2019 Community Edition), and the other versions offer free trials. Vous pouvez les télécharger ici : https://developer.microsoft.com/windows/downloadsYou can download them here: https://developer.microsoft.com/windows/downloads

Pour lancer le Concepteur de manifeste :To launch the Manifest Designer:

  1. Utilisez Visual Studio pour ouvrir un projet UWP.Use Visual Studio to open a UWP project.
  1. Dans l’Explorateur de solutions, double-cliquez sur le fichier Package.appmxanifest.In the Solution Explorer, double-click the Package.appmxanifest file.

Concepteur de manifeste Visual Studio 2019

Visual Studio affiche le concepteur de manifeste.Visual Studio displays the Manifest Designer.

Capture d’écran du concepteur de manifeste montrant l’onglet Application.

  1. Cliquez sur l’onglet Ressources visuelles.Click the Visual Assets tab.

Capture d’écran du concepteur de manifeste montrant l’onglet Ressources visuelles.

Génération de toutes les ressources à la foisGenerating all assets at once

La première option de menu sous l’onglet Ressources visuelles, Toutes les ressources visuelles, fait exactement ce que son nom indique. Elle vous permet de générer toutes ressources visuelles dont votre application a besoin en appuyant sur un bouton.The first menu item in the Visual Assets tab, All Visual Assets, does exactly what its name suggests: generates every visual asset your app needs with the press of a button.

Générer toutes les ressources visuelles dans Visual Studio

Il vous suffit de fournir une image. Ensuite, Visual Studio génère la petite vignette, la vignette moyenne, la grande vignette, la vignette large, l’icône de l’application, l’écran de démarrage et les ressources de logo du package pour chaque facteur d’échelle.All you need to do is supply a single image, and Visual Studio will generate the small tile, medium tile, large tile, wide tile, large tile, app icon, splash screen, and package logo assets for every scale factor.

Pour générer toutes les ressources à la fois :To generate all assets at once:

  1. Cliquez sur ... en regard du champ Source, puis sélectionnez l’image à utiliser.Click the ... next to the Source field and select the image you want to use. Si vous utilisez une image bitmap, assurez-vous que sa taille est d’au moins 400 x 400 pixels afin d’obtenir des résultats nets.If you're using a bitmap image, make sure it's at least 400 by 400 pixels so that you get sharp results. Ce sont les images vectorielles qui fonctionnent le mieux. Visual Studio vous permet d’utiliser l’intelligence artificielle (Adobe Illustrator) et des fichiers PDF.Vector-based images work best; Visual Studio lets you use AI (Adobe Illustrator) and PDF files.

  2. (Facultatif) Dans la section Paramètres d’affichage, configurez les options suivantes :(Optional.) In the Display Settings section, configure these options:

    a.a. Nom court : spécifiez un nom court pour votre application.Short name: Specify a short name for your app.

    b.b. Afficher le nom : indiquez si vous souhaitez afficher le nom court sur les vignettes de petite taille, de taille et moyenne ou de grande taille.Show name: Indicate whether you want to display the short name on medium, wide, or large tiles.

    c.c. Arrière-plan de la vignette : spécifiez la valeur hexadécimale ou le nom de la couleur d’arrière-plan de la vignette.Tile background: Specify the hex value or a color name for the tile background color. Par exemple, #464646.For example, #464646. La valeur par défaut est transparent.The default value is transparent.

    d.d. Arrière-plan de l’écran de démarrage : spécifiez la valeur hexadécimale ou le nom de la couleur d’arrière-plan de l’écran d’accueil.Spash screen background: Specify the hex value or color name for the spash screen background.

  3. Cliquez sur Générer.Click Generate.

Visual Studio génère les fichiers de votre image et les ajoute au projet.Visual Studio generates your image files and adds them to project. Si vous souhaitez modifier vos ressources, répétez simplement le processus.If you want to change your assets, simply repeat the process.

Les ressources d’icône mises à l’échelle suivent cette convention d’affectation de noms de fichier :Scaled icon assets follow this file naming convention:

filename-scale-scale factor.pngfilename-scale-scale factor.png

Par exemple,For example,

Square150x150Logo-scale-100.png, Square150x150Logo-scale-200.png, Square150x150Logo-scale-400.pngSquare150x150Logo-scale-100.png, Square150x150Logo-scale-200.png, Square150x150Logo-scale-400.png

Notez que Visual Studio ne génère pas de logo du badge par défaut.Notice that Visual Studio doesn't generate a badge logo by default. C’est parce que votre logo du badge est unique et ne doit probablement pas correspondre à vos autres icônes d’application.That's because your badge logo is unique and probably shouldn't match your other app icons. Pour plus d’informations, voir l’article Notifications de badge pour les applications Windows.For more info, see the Badge notifications for Windows apps article.

Informations supplémentaires sur les ressources d’icônes d’applicationMore about app icon assets

Visual Studio va générer toutes les ressources d’icônes de l’application requises pour votre projet mais, si vous souhaitez les personnaliser, il est utile de comprendre en quoi elles diffèrent d’autres ressources de l’application.Visual Studio will generate all the app icon assets required by your project, but if you'd like to customize them, it helps to understand how they're different from other app assets.

La ressource d’icône d’application apparaît dans de nombreux endroits : barre des tâches Windows, affichage des tâches, Alt+Tab et angle inférieur droit des vignettes de démarrage.The app icon asset appears in a lot of places: the Windows taskbar, the task view, ALT+TAB, and the lower-right corner of Start tiles. Étant donné que la ressource d’icône d’application apparaît dans tant d’emplacements, elle offre des options de dimensionnement et de plaque supplémentaires que n’ont pas les autres ressources : des ressources de « taille cible » et de ressources « sans plaque ».Because the app icon asset appears in so many places, it has some additional sizing and plating options the other assets don't have: "target-size" assets and "unplated" assets.

Ressources d’icône application de taille cibleTarget-size app icon assets

Outre les tailles de facteur d’échelle standard (« Square44x44Logo.scale-400.png »), nous vous suggérons de créer des ressources de « taille cible ».In addition to the standard scale factor sizes ("Square44x44Logo.scale-400.png"), we also recommend creating "target-size" assets. Nous les appelons de cette manière parce qu’elles ciblent des tailles spécifiques, telles 16 pixels, plutôt que des facteurs d’échelle spécifiques, tels que 400.We call these assets target-size because they target specific sizes, such as 16 pixels, rather than specific scale factors, such as 400. Les ressources de taille cible sont destinées aux surfaces qui n’utilisent pas le système de plateau de mise à l’échelle :Target-size assets are for surfaces that don't use the scaling plateau system:

  • Liste des raccourcis du menu Démarrer (bureau)Start jump list (desktop)
  • Coin inférieur de la vignette du menu Démarrer (bureau)Start lower corner of tile (desktop)
  • Raccourcis (bureau)Shortcuts (desktop)
  • Panneau de configuration (bureau)Control Panel (desktop)

Voici la liste des ressources de taille cible :Here's the list of target-size assets:

Taille de la ressourceAsset size Exemple de nom de fichierFile name example
16 x 16*16x16* Square44x44Logo.targetsize-16.pngSquare44x44Logo.targetsize-16.png
24 x 24*24x24* Square44x44Logo.targetsize-24.pngSquare44x44Logo.targetsize-24.png
32 x 32*32x32* Square44x44Logo.targetsize-32.pngSquare44x44Logo.targetsize-32.png
48 x 48*48x48* Square44x44Logo.targetsize-48.pngSquare44x44Logo.targetsize-48.png
256 x 256*256x256* Square44x44Logo.targetsize-256.pngSquare44x44Logo.targetsize-256.png
20 x 2020x20 Square44x44Logo.targetsize-20.pngSquare44x44Logo.targetsize-20.png
30 x 3030x30 Square44x44Logo.targetsize-30.pngSquare44x44Logo.targetsize-30.png
36 x 3636x36 Square44x44Logo.targetsize-36.pngSquare44x44Logo.targetsize-36.png
40 x 4040x40 Square44x44Logo.targetsize-40.pngSquare44x44Logo.targetsize-40.png
60 x 6060x60 Square44x44Logo.targetsize-60.pngSquare44x44Logo.targetsize-60.png
64 x 6464x64 Square44x44Logo.targetsize-64.pngSquare44x44Logo.targetsize-64.png
72 x 7272x72 Square44x44Logo.targetsize-72.pngSquare44x44Logo.targetsize-72.png
80 x 8080x80 Square44x44Logo.targetsize-80.pngSquare44x44Logo.targetsize-80.png
96 x 9696x96 Square44x44Logo.targetsize-96.pngSquare44x44Logo.targetsize-96.png

* Nous vous conseillons de fournir au minimum ces tailles.* At a minimum, we recommend providing these sizes.

Vous n’avez pas besoin d’ajouter du remplissage à ces ressources ; Windows s’en charge si nécessaire.You don't have to add padding to these assets; Windows adds padding if needed. Ces ressources doivent avoir une empreinte minimale de 16 pixels.These assets should account for a minimum footprint of 16 pixels.

Voici un exemple de ces ressources telles qu’elles apparaissent dans les icônes de la barre des tâches Windows :Here's an example of these assets as they appear in icons on the Windows taskbar:

Ressources dans la barre des tâches Windows

Ressources sans plaqueUnplated assets

Par défaut, Windows utilise une ressource basée sur une cible superposée à une plaque de couleur.By default, Windows uses a target-based asset on top of a colored backplate by default. Si vous le souhaitez, vous pouvez fournir une ressource sans plaque basée sur une cible.If you want, you can provide a target-based unplated asset. « Sans plaque » signifie que la ressource s’affiche sur un arrière-plan transparent."Unplated" means the asset will be displayed on a transparent background. N’oubliez pas que ces ressources apparaîtront sur une diverses couleurs d’arrière-plan.Keep in mind that these assets will appear over a variety of background colors.

Ressources non plaquées et plaquées

Voici les surfaces qui utilisent des ressources d’icône d’application sans plaque :Here are the surfaces that use unplated app icon assets:

  • Barre des tâches et miniature de la barre des tâches (bureau)Taskbar and taskbar thumbnail (desktop)
  • Liste des raccourcis de la barre des tâchesTaskbar jumplist
  • Vue des tâchesTask view
  • ALT+TABALT+TAB

Ressources et thèmes sans plaqueUnplated assets and themes

Le thème sélectionné de l’utilisateur détermine la couleur de la barre des tâches.The user's selected theme determines the color of the taskbar. Si l’élément multimédia sans plaque n’est pas spécifiquement qualifié pour le thème actuel, le système vérifie la ressource pour le contraste.If the unplated asset isn't specifically qualified for the current theme, the system checks the asset for contrast. Si le contraste avec la barre des tâches est suffisant, le système utilise la ressource.If it has enough contrast with taskbar, the system uses it. Sinon, le système recherche une version hautement contrastée de la ressource.Otherwise, the system looks for a high-contrast version of the asset. S’il n’en trouve pas, le système dessine la forme sur plaque de la ressource à la place.If it can't find one, the system draws the plated form of the asset instead.

Dimensionnement cible et sans plaqueTarget and unplated sizing

Voici des recommandations de taille pour les ressources basées sur une cible, à l’échelle de 100 % :Here are the size recommendations for target-based assets, at 100% scale:

Dimensionnement des ressources basé sur la cible à l’échelle 100 %

Informations supplémentaires sur les ressources d’écran de démarrageMore about splash screen assets

Pour plus d’informations sur les écrans de démarrage, consultez Écrans de démarrage des applications Windows.For more info about splash screens, see Windows app splash screens.

Informations supplémentaires sur les ressources de logo de badgeMore about badge logo assets

Lorsque vous utilisez le Générateur de ressources pour générer toutes les ressources dont vous avez besoin, il ne génère pas les logos de badge par défaut  parce qu’ils sont très différents d’autres ressources d’application.When you use the asset generator to generate all the assets you need, there's a reason why it doesn't generate badge logos by default: they're very different from other app assets. Le logo de badge est une image d’état qui s’affiche dans les notifications et sur les vignettes de l’application.The badge logo is a status image that appears in notifications and on the app's tiles.

Pour plus d’informations, consultez Notifications de badge pour les applications Windows.For more information, see Badge notifications for Windows apps.

Personnalisation de la marge intérieure de ressourceCustomizing asset padding

Par défaut, le Générateur de ressources Visual Studio recommande d’appliquer une marge intérieure à toute image.By default, Visual Studio asset generator applies recommended padding to whatever image. Si vos images contiennent déjà une marge intérieure ou si vous souhaitez des images pleine page qui s’étendent jusqu’au bord de la vignette, vous pouvez désactiver cette fonctionnalité en décochant la case à cocher Appliquer le remplissage recommandé.If your images already contain padding or you want full bleed images that extend to the end of the tile, you can turn this feature off by unchecking the Apply recommended padding check box.

Recommandations de marge intérieure de vignetteTile padding recommendations

Si vous souhaitez spécifier votre propre marge intérieure, voici nos recommandations pour les vignettes.If you want to provide your own padding, here are our recommendations for tiles.

Il existe 4 tailles de vignettes : petite (71 x 71), moyenne (150 x 150), large (310 x 150) et grande (310 x 310).There are 4 tile sizes: small (71 x 71), medium (150 x 150), wide (310 x 150), and large (310 x 310).

Chaque ressource de vignette a la même taille que la vignette sur laquelle elle est positionnée.Each tile asset is the same size as the tile on which it is placed.

Vignette pleine page

Si vous ne souhaitez pas que votre icône s’étende jusqu’au bord de la vignette, vous pouvez utiliser des pixels transparents dans votre ressource pour créer une marge intérieure.If you don't want your icon to extend to the edge of the tile, you can use transparent pixels in your asset to create padding.

Vignette et plaque de fond

Pour les petites vignettes, limitez la largeur et la hauteur de l’icône à 66 % de la taille de la vignette :For small tiles, limit the icon width and height to 66% of the tile size:

Ratios de dimensionnement d’une petite vignette

Pour les vignettes moyennes, limitez la largeur de l’icône à 66 % et la hauteur de l’icône à 50 % de la taille de la vignette.For medium tiles, limit the icon width to 66% and height to 50% of tile size. Ceci empêche le chevauchement des éléments dans la barre de marque :This prevents overlapping of elements in the branding bar:

Ratios de dimensionnement d’une vignette moyenne

Pour les vignettes larges, limitez la largeur de l’icône à 66 % et la hauteur de l’icône à 50 % de la taille de la vignette.For wide tiles, limit the icon width to 66% and height to 50% of tile size. Ceci empêche le chevauchement des éléments dans la barre de marque :This prevents overlapping of elements in the branding bar:

Ratios de dimensionnement d’une vignette large

Pour les grandes vignettes, limitez la largeur de l’icône à 66 % et la hauteur à 50 % de la taille de la vignette :For large tiles, limit the icon width to 66% and height to 50% of tile size:

Ratios de dimensionnement d’une grande vignette

Certaines icônes sont conçues pour être positionnées à l’horizontale ou à la verticale, alors que d’autres ont des formes plus complexes qui les empêchent de respecter les dimensions cibles.Some icons are designed to be horizontally or vertically oriented, while others have more complex shapes that prevent them from fitting squarely within the target dimensions. Les icônes qui apparaissent centrées peuvent déborder d’un côté.Icons that appear to be centered can be weighted to one side. Dans ce cas, certaines parties de l’icône peuvent se retrouver en dehors de l’emplacement recommandé, à condition que l’icône offre le même attrait visuel qu’une icône aux bonnes dimensions :In this case, parts of an icon may hang outside the recommended footprint, provided it occupies the same visual weight as a squarely fitted icon:

Trois icônes centrées

Pour les ressources pleine page, prenez en compte les éléments qui interagissent avec les marges et les bords des vignettes.With full-bleed assets, take into account elements that interact within the margins and edges of the tiles. Conservez des marges équivalentes à au moins 16 % de la hauteur ou de la largeur de la vignette.Maintain margins of at least 16% of the height or width of the tile. Ce pourcentage représente le double de la largeur des marges pour la plus petite taille de vignette :This percentage represents double the width of the margins at the smallest tile sizes:

Vignette pleine page avec marges

Dans cet exemple, les marges sont trop étroites :In this example, margins are too tight:

Vignette pleine page avec marges trop étroites

Optimisation pour des thèmes, langues et autres conditions spécifiquesOptimizing for specific themes, languages, and other conditions

Cet article décrit comment créer des ressources pour des facteurs d’échelle spécifiques, mais vous pouvez également créer des ressources pour un vaste éventail de conditions et combinaisons de conditions.This article described how to create assets for specific scale factors, but you can also create assets for a wide variety of conditions and combinations of conditions. Par exemple, vous pouvez peut créer des icônes pour des écrans très contrastés ou pour des thèmes clairs et sombres.For example, you can can create icons for high contrast displays or for the light themes and dark themes. Vous pouvez même créer des ressources pour des langues spécifiques.You can even create assets for specific languages.

Pour en savoir plus, voir Personnaliser vos ressources pour la langue, l’échelle, le contraste élevé et d’autres qualificateurs.For instructions, see Tailor your resources for language, scale, high contrast, and other qualifiers.