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.

Thomas
  • 3,399
  • 4
  • 33
  • 66
  • From the screenshot on http://www.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 '12 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 '12 at 11:02

3 Answers3

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.
Claus Jørgensen
  • 25,167
  • 9
  • 75
  • 139
  • 3
    Updated with IconicTemplate and Application Icon sizes. – Claus Jørgensen Oct 31 '12 at 13:52
  • 1
    @ClausJørgensen Where did you see the applicationicon.png is 159x159? The default template creates them as 100x100? – bkaid Nov 03 '12 at 03: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. – Claus Jørgensen Nov 03 '12 at 10:05
  • According to http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207048(v=vs.105).aspx , the DeviceLockImage should be 38 x 38 – Nirmit Kavaiya Nov 26 '12 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 ;-) – Claus Jørgensen Nov 26 '12 at 19:16
  • @ClausJørgensen Is 158 for the small tile correct (vs. 159 like the app icon and the sample icon included in the visual studio project)? – Markus Bruckner Feb 22 '13 at 08:48
  • It used to be 158. I'll check with our designers when I get back from Africa. – Claus Jørgensen Feb 22 '13 at 09:22
  • For Tile and app icons, you have to include images only for WXGA resolution. The phone automatically scales the images to the correct size for WVGA, 720p, and 1080p screens. – Ouadie Nov 19 '13 at 16:00
  • @Ouadie it upscales the images, which results in a degration in quality, compared to supplying the 1.6 (or 2.25 for 1080p) and then having the OS downscale the images. That's the rationale behind the numbers. – Claus Jørgensen Nov 19 '13 at 19:47
  • Check the [Icon templates for Windows Phone 8 (zip file)](http://go.microsoft.com/fwlink/?LinkId=266547) from the MSDN article "[Iconic Tile template design guidelines for Windows Phone](http://msdn.microsoft.com/en-us/library/windowsphone/design/jj662924(v=vs.105).aspx)". The archive contains a lot of PSD files with all needed templates. I have downloaded it and found it useful. A PDF file with explanations and sizes is also included into the package. – Mar Dec 24 '13 at 05:21
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.

Mikael Koskinen
  • 10,213
  • 4
  • 44
  • 62
  • Sorry, your numbers for the Iconic Tile Template and application icons are way off, see my updated posts for the correct numbers. – Claus Jørgensen Oct 31 '12 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? – Mikael Koskinen Oct 31 '12 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. – Claus Jørgensen Oct 31 '12 at 18:42
  • Though here's a screenshot from the docs: http://mikaelkoskinen.net/image.axd?picture=image_159.png Regarding the large iconic tile, the WMAppManifest.xml doesn't support adding a large tile with the iconic template. Also, the IconicTileData-class doesn't have a property for the large tile. It only includes "IconImage" and "SmallIconImage". – Mikael Koskinen Nov 01 '12 at 05:40
  • Correct. The IconImage is for the large tile, the SmallIconImage is for the small tile. And the Icon is for the device lock screen. Also, if you provide the images in that resolution they'll be upscaled, instead of downscaled. If you use my numbers, it'll be downscaled for low-resolution devices, resulting in better quality tiles. – Claus Jørgensen Nov 01 '12 at 09:53
  • 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. – Mikael Koskinen Nov 02 '12 at 03:21
  • 1
    hehe, well I *do* work for the company. I should probably send a email to someone if the documentation is wrong. – Claus Jørgensen Nov 02 '12 at 08: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

user2239457
  • 61
  • 1
  • 5