The IconWithBadge template displays a small image in the center of the Tile, and incorporates Windows Phone design principles. And now in Windows 10, it is supported on both phone and desktop.

Quickstart: How to create an iconic Tile

The following steps will walk you through everything needed to create an iconic Tile for Windows 10. Essentially, you first need your iconic image asset, and then you need to send a notification to the tile using the iconic template, and finally you send a badge notification providing the number to be displayed.

Step 1: Create your image assets

Create icon assets for your iconic tile, and place it in your project resources like your other assets. Read the section below for more info about the image resolution sizes. At the least, create a 200x200 icon, which will work for both Mobile and Desktop, and for both Small and Medium tile sizes.

The following image describes sizing info for the iconic image assets in Windows 10.

Note: Desktop only supports square assets. Mobile allows for taller image assets, useful for something like a phone icon which is taller than it is wide.

Note: Windows Phone displays all non-transparent pixels as white. Thus, use a transparent PNG and keep in mind that any color in your image will be stripped out and simply displayed as white.

Step 2: Create your base Tile

You can use the iconic template on both primary and secondary Tiles. If you're using it on a secondary Tile, you'll first have to create the secondary Tile or use an already pinned secondary Tile. Primary tiles are implicitly pinned and can always be sent notifications.

Step 3: Send a Tile notification to your Tile

Depending on whether you're sending the notification locally or via push, these steps may vary. However, the XML payload you send is identical in either case.

To send a local Tile notification, create a TileUpdater for your tile (either primary or secondary), and then send a notification to the tile that uses the iconic tile template as seen below (ideally you should also include bindings for wide and large tile sizes, using adaptive Tile templates).

XML Payload

<tile><visual><binding template="TileSquare150x150IconWithBadge"><image id="1" src="Iconic.png" alt="alt text"/></binding><binding template="TileSquare71x71IconWithBadge"><image id="1" src="Iconic.png" alt="alt text"/></binding></visual></tile>

This iconic tile template XML payload uses an image element that points to the image you originally created in Step 1.

Now your tile is ready to display the badge next to your icon! All that's left is sending badge notifications.

Step 4: Send a Badge notification to your Tile

This step also depends on how you are sending your badge notifications. You can send badge notifications from your server via push, or locally from your app. Regardless, the XML payload you send is identical.

To send a local badge notification, create a BadgeUpdater for your tile (either primary or secondary), and then send a badge notification with your desired value (or clear the badge).

XML Payload

<badge value="2"/>

Your tile's badge will update accordingly.

Putting it all together

The following image shows how the various API's and payloads are associated with each aspect of the iconic Tile template. A tile notification (which contains those <binding> elements) is used to specify the iconic template and the image asset, a badge notification specifies the number value, and your tile's display name, color, and more are controlled by the tile properties.