Windows Phone 7 Iconography

Every Windows Phone application has to deal with and provide a certain set of icons. The appearance and technical details of those icons are bound to specific certification requirements. Additional requirements exist for other optional places where you can use icons in your application. This article covers all of the icon guidelines and specifications relevant for a normal Windows Phone application, in particular:

• Tile icons [mandatory] – Contained in your application package and used for the application list and home screen.
• Marketplace icons [mandatory] – Required to represent your application in the Marketplace catalog.
• Application bar icons [optional] – Icons used for buttons in the application bar.

Let's take a look at the individual requirements for and properties of each of them.

Tile Icons

There are two different tile icons for Silverlight applications on the phone, a small one and a large one. The large icon is used when the user pins your application to their home screen, while the small one is used for the application list. The following table shows the most important data:

When you take a look at the tile icons of the built-in applications, you can see that they all loosely follow a certain pattern. They embrace the Metro design style very well, use simple and monochromatic (white) content. The big tile icons are usually designed in a way that the content only takes up roughly two fifths to one half of the available height. The small icons use the same content, but often take up a little more of the available space:

There is no requirement that you design your icons in the same way. A lot of the icons of applications in the marketplace use the whole available area of the tile, have multiple colors and sometimes even gradients or pictures. The recommendation of course is not to overdue this and to try to "metrofy" your own design.

One thing to note is that the text overlay of your application title for the large tile (like "Internet Explorer" in the above screenshot) is generated automatically. Do not add this title manually to the image, and design your icon in a way that the auto-generated title is visible and readable without any problems.

Configuration of tile icons

When you create a new application in Visual Studio, default tile icons are created for you automatically. The large version is named "Background.png" (because it is the background image of the primary tile), the small version "ApplicationIcon.png":

The use of these two images does not happen auto-magically (e.g. by looking for a specific file name); the wiring is done in the project properties of your phone application, on the "Application" tab:

So if you don't like the names of the images, want to move them or use images from a different location, you can do that by changing the configuration here.

Ultimately, changing these values alters your WMAppManifest.xml configuration file located in the "Properties" folder of your project. When you open it and take a look at the source XML, you can see that the values there directly reflect what you changed in the project settings window:

 1: <App>

 2:   <IconPath IsRelative="true"

 3:             IsResource="false">Images\Tile_62_transparent.png</IconPath>

 4:  

 5: ...

 6:  

 7:   <Tokens>

 8:     <PrimaryToken TokenID="SampleAppToken"

 9:                   TaskName="_default">

 10:       <TemplateType5>

 11:         <BackgroundImageURI IsRelative="true"

 12:                             IsResource="false">Images\Tile_173_transparent.png</BackgroundImageURI>

 13:         <Count>0</Count>

 14:         <Title>Sample App</Title>

 15:       </TemplateType5>

 16:     </PrimaryToken>

 17:   </Tokens>

One interesting thing I came across is the following: tile icons should be included in your project with a build action of "Content" - by default, when you add new or existing images to your project, their build action is set to "Resource", so you are supposed to change this. However, in my tests I found an interesting behavior: as soon as you specify an image as small or large tile icon, it is copied to the installation package automatically for you – just as if the build action was set to "Content". I'm not sure if it always was that way or if it's simply an improvement added with one of the recent Mango tooling updates.

This however does not mean you don't have to change the build action to "Content" anymore. If you leave it at the default "Resource", the image will end up both in the assembly and in the XAP – so make sure you set it to "Content" for your tile icons anyway, to avoid wasting space and the slightly worse performance of having resources in your assemblies.

Transparency for tile icons

One specialty of tile icons is that they support transparency. In the transparent areas, the current accent color of the phone is used as background. This allows you to integrate nicely with the user's system preferences. Without any additional work, your tile image will adapt to the different theme options and display like:

In this case, the base image only consists of the white cat against an otherwise transparent background.

Tile icon pitfall

One problem you might run into is that the tile icon image file needs to be physically present in your project folder structure. When I was trying to share an application code base between a Mango and RTM version of the same application using Visual Studio's "Add as link" feature, I suddenly received deployment errors for my project. Unfortunately, the error message is really not helpful, because it simply says:

Deployment of application to device failed.
The parameter is incorrect.

Once you change that and create a physical copy of the image file in your project, everything is back to normal. It took me a moment to find out that this is the reason, and I hope you remember this article should you ever run into the same problem ;).

Marketplace icons

When you submit your application, you need to provide three icons of different sizes. The requirement for these icons is that they "must match closely the icon provided in the XAP package" – which means you are not really free to design this completely different from the above mentioned application/tile icons. The users should recognize the icon they have in the application list from what they saw in the Marketplace and vice versa. A fourth optional image can be provided for the case your application is featured in the Marketplace.

The following table shows the key data for the Marketplace icons.

Those icons are presented to the user when they browse the Marketplace, either on the phone (the mobile icons), or on the PC (e.g. using the Zune client). The small icon is used in lists, whereas the large icon is shown in the detail view for an application, for example.

The most important difference here is that you cannot use transparency for these icons. So if you used transparency for your application tile icons as shown above, you have to add an opaque background first before you can e.g. reuse the large tile icon as large Marketplace icon.

Application bar icons

The operating system has some built-in features for handling the application bar that are applied automatically and cannot be controlled or influenced by your application. The result of this is that there are some detailed requirements you need to follow closely when you create your own application bar icons. Again, let's first look at a table that shows the most important technical details:

What you get from the operating system as built-in features this is the following:

• Automatic handling of the light and dark theme of the phone. You do not need to provide a second version version of the icon for the light theme, it will be generated on the fly.
• The bounding circle that is part of every application bar icon is also drawn automatically for you – which in turn means that you do not include that circle in your icon; do not draw this manually.
• The icon is properly rotated using a nice animation when the phone orientation changes so it always faces the user correctly (supposed the current page supports multiple orientations of course).

The following shows a sample icon and the automatic inversion when the user switches to the light theme. Please note that the source image does not contain the circle:

The following screenshot shows how the icon is automatically rotated on orientation changes:

Designing application bar icons

The Windows Phone SDK provides a set of icons you can use right away in your application. These icons can be found here:

%ProgramFiles(x86)%\Micosoft SDKs\Windows Phone\[Version]\Icons\dark

Where "[Version]" is the version of the phone SDK you have installed, either "v7.1" or "v7.0", and "%ProgramFiles(x86)%" means the 32-bit program files folder, which usually is "C:\Program Files (x86)" on English 64-bit Windows, and simply "C:\Program Files" on 32-bit systems.

At some point however you will find yourself in the situation that the included set of icons is not sufficient anymore and you need to create your own icons. An excellent tutorial about how to create an application bar icon using Expression Design was written by Austin Andrews can be found on templarian.com. He also offers additional icons on this site for download.

One particular limitation I want to mention explicitly is that because of the fact every application bar icon has a circle around it, and that this circle is created automatically with no possibility to influence it, the available area for your own content when you design an icon is limited. The recommended maximum size for your icon content is 26x26 pixels in the center area of the image. A visualization of this looks like:

As long as you stick to this recommendation, you always have a small safe margin to the circle. You can use the image file "appbar.basecircle.rest.png" from the folder mentioned above as a help during the design process, because it contains an empty application bar icon circle (I used it to create the above image too). That way you can get an impression of what the final icon will look like without actually using it in a sample phone application. Again: remember to not include the circle in the final image.

Conclusion

I hope this article gave you a good overview of the various types of mandatory and optional icons of a Windows Phone 7 application as well as how and when they are used, and what you need to take into consideration when you create your own icons. Feel free to provide any feedback in the comments below, or contact me directly.