Choosing your app images

We describe the different images that your app needs and provide info about how to use them effectively to promote your app.

To provide a better experience on computers with different screen resolutions, you should include scaled versions of the images in your app. Note that the scaled images should be designed for the image size and not simply resized from the original image.

This topic describes these app images. Required images are shown in bold.

These images used by the Windows Store are also described:

• Screenshots

  One screenshot is required, but each app can have up to 8 screenshots.

  Screenshots images must be 1366x768 or larger in a landscape orientation or 768x1366 or larger in a portrait orientation, and in a file that is smaller than 2Mb.

• Promotional images

  Promotional images aren't required; however, you can provide up to four. If you provide only any images, at least one of them should be 414x180 pixels.

  Promotional images can also be 414x468, 558x756, and 846x468.

Required images for your app

Your app must include these images when you build it for the Windows Store.

• Store logo
• Logo
• Small logo
• Splash screen

Store logo

The store logo is the image the Windows Store uses when it displays your app's listing in search results and with the app's description in the listing page.

You specify this image in the Package/Properties/Logo element in the app manifest.

Tip  

The BackgroundColor attribute of the VisualElements element sets the background color of your app's listing page in the Windows Store. Make sure that the colors you pick for the BackgroundColor and the ForegroundText have enough contrast to be read easily. Also, make sure your logo is clearly distinguishable from the BackgroundColor.

Image details

Example

These images illustrate the different parts of the Windows Store that use the store logo image.

This image highlights the store logo that the Windows Store displays with other info about the app when the app is listed in the search results.

The app name displayed in the tile that contains the store logo comes from the DisplayName value in the app manifest. For more info about app names, see Where your app's name appears.

This image highlights the store logo that the Windows Store displays with the app's info in the category listing.

The app name displayed in the tile that contains the store logo comes from the DisplayName value in the app manifest. For more info about app names, see Where your app's name appears.

This image highlights the store logo as it appears in the Windows Store in the app's listing.

The app name displayed in the title of the listing comes from the DisplayName value in the app manifest. For more info about app names, see Where your app's name appears.

For more info about the other info that is displayed in the app listing page, see App listing info.

More info about using this image

Package/Properties/Logo element in the app manifest

Package/Properties/DisplayName element in the app manifest

Package/Properties element in the app manifest

Manifest designer

Logo

The logo image represents the square tile image of the app in the Start screen.

You specify the logo image in the app manifest in the Logo attribute of the VisualElements element.

Important  

When designing the image your logo, consider whether you want to include your app's name in the image or have Windows overlay its name on top of the image. For more info about app names, see Where your app's name appears. For more info on how to have Windows show the name or not, read about the ShowName attribute of the DefaultTile element.

Note  

Image details

Example

This image shows the logo of the Store app with the name of the app overlaid in the corner of the image.

More info about using this image

VisualElements element in the app manifest

Manifest designer

Quickstart: Creating a default tile using the Microsoft Visual Studio 11 Manifest Editor

Guidelines and checklist for tiles

Small logo

The small logo is displayed with your app's display name in search results returned on the Start screen. The small logo is also used in the list of searchable apps and when the Start page is zoomed out.

You specify the small logo image the app manifest in the SmallLogo attribute of the VisualElements element.

Image details

Example

This image highlights the small logo of the Control Panel app as it appears in the results of a search for "control" apps.

For more info about how the app name is displayed with this image, see Where your app's name appears.

And this image highlights the small logo of the Store app at the top of a list of searchable apps.

The name that is shown next to the logo is the value of the DisplayName attribute of the VisualElements element. For more info about app names, see Where your app's name appears.

More info about using this image

VisualElements element in the app manifest

Manifest designer

Splash screen

The splash screen is displayed for a short time when the user opens the app. Your app must provide a splash screen image and you can also specify a background color to use during this time. Specify the image and optional background color in the SplashScreen element of the app manifest.

To specify an image, set the Image attribute to the images' path in the app's package. The image will be displayed on a background color defined by the BackgroundColor attribute. You can display just a color by only specifying a value for the BackgroundColor attribute.

Note  If you don't specify the BackgroundColor attribute in the SplashScreen element, the color specified in the BackgroundColor attribute in the VisualElements element will be used.

Image details

Example

This is a splash screen image for an app.

More info about using this image

SplashScreen element in the app manifest

Adding a splash screen

Manifest designer

Optional images for your app

Your app can also include more images when you build it for the Windows Store. These optional images can help your app provide a richer user experience.

• Wide logo
• Badge logo

Wide logo

Defining a wide logo enables your app to show a wide tile on the Start screen. While the wide logo isn't required, if you don't include one with your app, your app will not be able to be resized to wide nor will it be able to show wide-formatted notifications.

You specify the wide logo image in the app manifest in the WideLogo attribute of the DefaultTile element.

Important  

When designing the image your logo, consider whether you want to include your app's name in the image or have Windows overlay its name on top of the image. For more info about the app name that is displayed on this image, see Where your app's name appears. For more info on how to have Windows show the name or not, read about the ShowName attribute of the DefaultTile element.

Image details

Example

This image shows the wide logo of the Desktop with its name overlaid in the corner of the image.

More info about using this image

DefaultTile element in the app manifest

Manifest designer

How to specify a square and wide tile in the same notification (JavaScript and HTML)

How to specify a square and wide tile in the same notification (VB/C#/C++ and XAML)

Badge logo

The badge logo is an image that is shown next to the badge notification to identify the app on the lock screen. It isn't used anywhere else.

You specify the badge logo image in the BadgeLogo attribute of the LockScreen element of the app manifest.

Image details

Note  The image must be monochromatic.

Example

This image shows the badge logo of an app and a badge notification in the lock screen

More info about using this image

LockScreen element in the app manifest

Manifest designer

Images that you submit with your app

You need these images ready for when you submit your app to the Windows Store.

Screenshots

Screenshots are the images of your app that are displayed to your customers in the app listing overview.

Make each screenshot image highlight your app's key feature or features.

You must provide at least one screenshot image when you submit your app, and you can submit up to 8 screenshots. Each image must have a short caption that describes the image in 200 characters or less. Each screenshot image that you upload must be at least 1366 x 768 or 768 x 1366 pixels and be a .png file with a file size that is less than 2 MB.

Image details

Example

This image highlights the screenshot displayed in the app listing page of the Labyrinth app.

Promotional images

The Windows Store editorial team uses promotional images when they feature your app in the Windows Store. Providing promotional images for your app doesn't guarantee that your app will be featured. But not providing them almost guarantees that it won't be.

You can provide several image sizes. Providing an image in each size gives the Windows Store editorial team the most flexibility if they decide to feature your app.

We generally choose images that are iconic for the app. We prefer to show images that feature logos, branding, and characters from games rather than screenshots. If you do submit screenshots, make sure they are sized correctly.

Don't use black or white as primary background colors for your featured image. Instead, use a color that complements the logo or the dominant element in your image.

When the Windows Store displays your promotional images, it adds your app's name, price, and rating to the bottom of the image. You don't need to put this info in your image.

Image details

Note  

You must size the promotional images exactly as described. While these images aren't required, if you provide only one image, make it 414x180 pixels.

Example

This is an example of a vertical promotional image, which can be 414x468, or 558x756, or both.

This is an example of a horizontal promotional image, which can be 414x180, or 846x468, or both.

If you use a logo in your image, center it horizontally and place it slightly above the center vertically.

The dimensions shown in these examples are for reference only. Don't include them in your images. The specific padding around your logo will probably be different when you use your app's logo. But make sure your logo has at least 30 pixels of padding on the left and right.

These examples also show the app info that the Store adds to the bottom of the image. Don't include that info in your image.

Build date: 3/19/2013