Tile and toast image sizes (Windows Runtime apps)

Applies to Windows and Windows Phone

This topic discusses the size requirements for tile images.

General image requirements

Tile and toast source images must have dimensions less than or equal to 1024x1024 pixels, have a file size of less than or equal to 200 KB, and be of type .png, .jpg, .jpeg, or .gif. There are no bit-depth or color requirements for an image as long as it meets the other requirements.

Square and wide tiles

Tiles are shown on the Start screen and can be either wide (310x150 pixels at a 100% scale) or square. There are several sizes of square tiles:

  • Tiny (30x30) (Windows only)
  • Tiny (44x44) (Windows Phone only)
  • Small (70x70) (Windows only)
  • Small (71x71) (Windows Phone only)
  • Medium (150x150)
  • Large (310x310) (Windows only)

Tiny and small tiles are not live tiles; they only show the tile's logo as specified in the app's manifest. The small tile is used on the Start screen, but the tiny tile is used only in search results and the Apps list.

A user can resize your tile only to sizes for which a logo image is provided in the app's manifest file (package.appxmanifest). A medium tile logo is the minimum that you can supply. If you supply no others, your app's tile will always be medium (150x150) and only payloads for medium tile templates in the app's tile notifications will be shown. This might be sufficient in some scenarios.

If multiple logo images are provided in the manifest, you can specify either a medium or wide tile as the default to be used when the tile is pinned to the Start screen.

  • Applies to Windows Phone

On a Windows Phone this option does not exist. A tile is always pinned to the Start screen as a medium tile, though the user can then resize it.

The user can change your tile's size at any time, there is no programmatic way to know which size is currently being used, and only notifications that match its current size are displayed. Therefore, each tile notification sent to your app should include one template for each supported size. For instance, if you include only a wide template in a notification and the user has chosen to display the medium tile, that notification will not be shown unless the user resizes to wide before the notification expires.

Choosing a tile shape

  • Use the medium tile for a static tile; that is, if your app will not use notifications to send updates to the tile.
  • Use the medium tile with a badge if your app supports only scenarios with short summary notifications. For instance, a short message service (SMS) app tile that shows only the number of new messages received.
  • Use the wide or large tile only if your app has new and interesting content to display to the user, and the notifications that deliver that content are sent frequently (weekly at the very least). Wide and large tile content is meant to be fresh and "alive". Have a good reason to take up the extra space.

How Windows and Windows Phone 8.1 scaled images

The Start screen on a Windows device supports four scale values that affect image dimensions: 80%, 100%, 140%, and 180%. Windows Phone supports 100%, 140%, and 240% through the manifest, but also 120%, 160%, 180%, 200%, 220%, 300%, and 400% in practice.

You can provide a separate image asset for each scale value or you can provide only a subset of those images and let the system scale the closest image to fit. Because of the variety of devices that can display your tile, it is a best practice to include scaled image versions in your app package so that the system can choose the most appropriate version for the device and its settings. However, you can provide only one image asset and rely entirely on scaling. In that case, supply the 180% asset for Windows and the 240% asset for Windows Phone.

Logo images suppplied through the manifest must have the exact pixel dimensions that it asks for. Images supplied in a tile or toast notification do not have that requirement, as long as they meet the general image requirements above. If an image does not fit the dimensions of the notification's image area, the system will scale and crop it accordingly.

For more information on naming and organizing your image assets, see Defining app resources.

Related topics

Application resources and localization samples
Design for a global market
The tile template catalog
Guidelines and checklist for tiles
Quickstart: Creating a default tile using the Visual Studio manifest editor
Quickstart: Sending a tile update
Tiles XML schema
App tiles and badges sample
Tile and tile notification overview
Choosing your app images
Defining app resources

 

 

Show:
© 2014 Microsoft