26

I was wondering if someone knows the exact measurements of the new Windows Phone 8 Startscreen (for 480x800), i.e. margins (top, left & right, between tiles) and the edge length of all three different tile sizes.

2
  • From the screenshot on windowsphone.com it looks like the small sized tiles are 1/4 of the normal size, and large tiles are double of the normal tile. and the margins are always the same, regardless the tile size.
    – Marco
    Oct 15, 2012 at 10:07
  • yeah, but what exactely are the margins and sizes? ;-) The "normal" tiles on the new start screen are way bigger then those in wp7.5, as there's a lot less margin to the right side of the screen.
    – Thomas
    Oct 16, 2012 at 11:02

3 Answers 3

70

For 720p (1280×720) and WXGA (1280×768):

  • Large Tile: 691 x 336 (yes, you're not reading it wrong, there's a extra pixel on the width)
  • Medium Tile: 336 x 336
  • Small Tile: 159 x 159

For WVGA (480x800):

  • Large Tile: 430 x 210
  • Medium Tile: 210 x 210
  • Small Tile: 100 x 100

For IconicTemplate (All resolutions):

Transparent icons!

  • Large Tile: 132 x 202 (IconImageURI)
  • Medium Tile: 72 x 110 (SmallImageURI)
  • Icon: 38 x 38 (DeviceLockImageURI)

For Application Icons

  • ApplicationIcon.png: 159 x 159
  • Background.png: 173 x 173

All numbers are in pixels. The horizontal margin between tiles are 10 px.

As a general piece of advice, provide your tiles in the high resolution, and they'll get downscaled by roughly a factor 1.6. Otherwise you'll find your low resolution tiles being upscaled, and the text will look very blurry.

And remember that some of the new special tile templates available in the SDK, will require different resolution images. The above is the full tile size, if you use a regular FlipTemplate.

Bonus Update: For App Bar Icons (not to be confused with the above)

  • 76x76 circle with 42x42 icons.
10
  • 3
    Updated with IconicTemplate and Application Icon sizes. Oct 31, 2012 at 13:52
  • 1
    @ClausJørgensen Where did you see the applicationicon.png is 159x159? The default template creates them as 100x100?
    – bkaid
    Nov 3, 2012 at 3:54
  • 1
    Our designers tested it on high resolution devices, and found that if you use 100x100 it gets upscaled. Instead if you use 159x159 it gets downscaled for 480x800, which provides much better quality. Nov 3, 2012 at 10:05
  • According to msdn.microsoft.com/en-us/library/windowsphone/develop/… , the DeviceLockImage should be 38 x 38 Nov 26, 2012 at 19:09
  • That's correct, we actually updated it in our app a few weeks ago. The original internal documentation forgot to use the high-resolution numbers for it ;-) Nov 26, 2012 at 19:16
9

Update:

Here's a test with different image sizes used with the iconic tiles.

Read the Claus' answer for the correct sizes.

Old answer:

For the Iconic Tile Template the 720p and WXGA sizes are:

  • Small Tile: 110 x 110
  • Medium Tile: 202 x 202
  • Wide Tile: N/A

The application's icon size is now 100x100, up from the previous 62x62.

For the Marketplace you must provide a 300x300 logo.

7
  • Sorry, your numbers for the Iconic Tile Template and application icons are way off, see my updated posts for the correct numbers. Oct 31, 2012 at 13:40
  • Hmm, I copied the numbers directly from the documentation. I suppose I wasn't reading the up-to-date docs. Any idea if the numbers changed between the RC and RTM? Oct 31, 2012 at 17:42
  • Your numbers have never been correct. The TemplateIconic never used square sizes. The height was always about 1.5 times greater than the width. And the application icon sizes been upped as well for WP8. Oct 31, 2012 at 18:42
  • 1
    I run a set of tests regarding the image sizes and added the link to my answer. Based on the tests the image sizes you mention are correct and the image used in wide tile depends if the tile has content or not. If it has content, the small image is used. Without content, the medium image is used. Nov 2, 2012 at 3:21
  • 1
    hehe, well I do work for the company. I should probably send a email to someone if the documentation is wrong. Nov 2, 2012 at 8:32
1

Microsoft has now posted the correct sizes for the Iconic template: http://msdn.microsoft.com/en-us/library/windowsphone/design/jj662924(v=vs.105).aspx

SmallIconImage:

  • recommended “best fit”: 70x110px
  • max image size: 110x110px

IconImage:

  • recommended “best fit”: 130x202px
  • max image size: 202x202px

All other images and their sizes needed for publishing can be found at: http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh184844(v=vs.105).aspx

And lock screen image: http:// msdn.microsoft.com/en-us/library/windowsphone/develop/jj207048(v=vs.105).aspx

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.