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.
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
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.