none
What should be the image icon size for app tile

    Question

  • Hello,

    For App Icon Tile, what should the Icon size for 150*150 square tile. Is there any padding that need to be consider?

    Currently I created Icon with 150*150 size, and it's overlapping App name in the tile.

    I refer to this link and it has nice explanation on the icon size to be used, but that is for the desktop  applications, is there something like that for Metro app as well.

    I also refer this link which has some guidelines for that, but using that 70*70 icon for 150*150 Tile size, it loos very small.

    Also tried this msdn article but it does not have information regarding it. Could you please help me by suggesting Icons size for every tiles.

    Thanks in advance.


    • Edited by zee_patel Tuesday, September 22, 2015 1:06 PM
    Tuesday, September 22, 2015 1:06 PM

Answers

  • Hi zee_patel,

    According to Guidelines for tile and icon assets, for horizontally or vertically oriented icons, you'd better limit the icon width to 66% and height to 50% of tile size and center the icon in the tile. This prevents overlapping of elements in the branding bar. So 66% and 50% are the largest size for your icon's width and height suggested by the article.

    And if your icon is square, your icon width and height may be 33% of the tile with 33% padding on all sides. Although icons won't always fit the size, the visual volume of an icon should be roughly equivalent to the provided examples.

    Hope this will be helpful for you.

    Regards,

    Jay

    • Marked as answer by zee_patel Monday, September 28, 2015 10:07 AM
    Friday, September 25, 2015 6:52 AM

All replies

  • Hi zee_patel,

    You may refer to this article to see what icon size should be used for Windows Phone Store apps. And in this artical you have mentioned, it recommends a few basic padding guidelines for tiles in Windows 10 Universal Windows Platform. it uses the area where the two purple overlays intersect to represent the ideal footprint for an icon. For example:

    Medium tile sizing:

    Hope this will be helpful for you.

    Regards,

    Jay

    Wednesday, September 23, 2015 1:53 AM
  • Hi Jay,

    Thanks for your reply, so according to the article that you suggested, Icon width for medium tile should be 66% and height 50% with padding 33% on all sides right?

    Friday, September 25, 2015 6:17 AM
  • Hi zee_patel,

    According to Guidelines for tile and icon assets, for horizontally or vertically oriented icons, you'd better limit the icon width to 66% and height to 50% of tile size and center the icon in the tile. This prevents overlapping of elements in the branding bar. So 66% and 50% are the largest size for your icon's width and height suggested by the article.

    And if your icon is square, your icon width and height may be 33% of the tile with 33% padding on all sides. Although icons won't always fit the size, the visual volume of an icon should be roughly equivalent to the provided examples.

    Hope this will be helpful for you.

    Regards,

    Jay

    • Marked as answer by zee_patel Monday, September 28, 2015 10:07 AM
    Friday, September 25, 2015 6:52 AM