Tile and toast visual assets (Windows Runtime apps)

Artículo
08/31/2015

This topic discusses the size requirements for image file assets used on tiles and toasts.

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 tiles:

Small (70x70) (Windows only)
Small (71x71) (Windows Phone only)
Medium (150x150)
Wide (310x150)
Large (310x310) (Windows only)

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 needed, at a minimum. 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.

Note For Windows Phone Store apps 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.

Other visual assets

Tiny (30x30) (Windows only)
Tiny (44x44) (Windows Phone only)

Tiny and small assets 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.

How images are scaled in a Windows Runtime app

The Start screen on a Windows device supports four scale values that affect image dimensions: 80%, 100%, 140%, and 180%. Windows Phone Store apps 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. While it won't give the best results, if you wish to provide only a single image asset and rely entirely on scaling then supply the 180% asset for Windows and the 240% asset for a Windows Phone Store app.

Logo images supplied 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.

Details on sizing, padding, scaling, and transparency for Windows Phone Store apps

As already mentioned, provide the scale-240 assets at a minimum for a Windows Phone Store app; preferably scale-140 and scale-100 also.

The image file assets themselves should have a transparent background, as indicated by the chequerboard effect in the illustrations below (the illustrations also hint at how the color that happens to be beneath will show through). In your app manifest, set the value of the appropriate property to "Assets\<assetname>.png", and set a value for VisualElements@BackgroundColor. You can either use your app's brand background color, or set the background color to "transparent" to match the appearance of the built-in apps.

Property name in app manifest

<assetname>.scale-100.png

<assetname>.scale-140.png

<assetname>.scale-240.png

Square71x71Logo

(Start screen small tile)

asset 71x71px

padding 19,19px

logo 32x32px

asset 99x99px

padding 27,27px

logo 45x45px