Microsoft does provide a lot of information to Windows Phone App developers about the Windows 8 and 8.1 User Interface, but they don’t tell you how big your icons should be or where exactly they should be placed within the tiles to match Microsoft’s own Application Tiles.

This guide provides those answers so you can correctly emulate the Windows 8 coloured tile icon style.

An example of Windows 8.1 Tile Sizes

In this earlier post I discussed the Tile sizes required by Windows Phone 8.1 which are as follows:

However, for Windows Phone 8.1 only 4 sizes are commonly used, as highlighted above, so it is those sizes we will concentrate on.

As you can see from the examples above, the white metro icons are horizontally centred but vertically offset. Extrapolating from Windows’ own default icon tiles, the following icon sizes and proportions can be calculated.

  • 24 x 24 pixels – Badge Logo
  • 30 x 30 pixels – Small Logo
  • 50 x 50 pixels – Store Logo
  • 70 x 70 pixels – Square Logo
  • 150 x 150 pixels – Square Logo
  • 310 x 150 pixels – Wide Logo
  • 310 x 310 pixels – Square Logo
  • 620 x 300 pixels – Splash Screen

Want a new Windows 8 or 10 tile icon?

We can bring your software up to date with clean, contemporary Windows tile icons

Windows icon designers

Bear in mind these dimensions are approximate based on a square icon. The relative weight and proportions of your icon should be taken into consideration, rather than trying to match the dimensions suggested below.
Windows Phone 8.1 Tile Icon Size Guide

So to summarise:

  • 70 x 70 pixels – Square Logo – Icon 40x40px centred in X & Y Axis
  • 150 x 150 pixels – Square Logo- Icon 70x70px centred in X, +10px in Y axis
  • 310 x 150 pixels – Wide Logo- Icon 70x70px centred in X, +10px in Y axis
  • 310 x 310 pixels – Square Logo- Icon 70x70px centred in X, +20px in Y axis

Just remember Microsoft does not provide these dimensions and I provide these as a guide. Feel free to experiment with different proportions and offsets, and remember the text you decide to include will also have an impact on positioning.

Always render your finished Tiles as transparent PNGs with your white icon correctly positioned within the file.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.