I'm pretty new to making graphics for a specific platform but not to graphic design in general.

I have a logo I made using Illustrator and had scaled it accordingly by using the Save to Web feature of Illustrator and then added it to a canvas in Fireworks.

In Fireworks the icon looks really crisp, even when I view it in Windows by using the built-in image Preview context menu. Its a square logo sitting at 70x70 pixels.

However, when I add it to my application and I pin it to the metro start menu in Windows, it looks blurry.

What do I need to do to make my image look sharp, crisp, and overall correct on the Windows Metro OS?

  • What version of Illustrator do you have? Newer versions have a "Pixel grid" which may come in handy, but older versions are suitable too.
    – Kromster
    Dec 20, 2013 at 4:56
  • 1
    @KromStern I am using my Adobe Creative Cloud version of it, so its the CC edition. Actually, I found a workaround...so in Illustrator, I had to export the image at high (300 PPI) quality to a PNG file instead of saving it for the web...then I loaded it into Fireworks. In Fireworks, I used the Image Size button to use bilinear down-scaling of the image to whatever size I wanted it to be, and it came out really crisp! Crisper than saving for web...not sure why. Maybe it has to do with the way Windows Store Apps render images.
    – Alexandru
    Dec 20, 2013 at 13:57
  • What about icon fonts? Is that a possibility? Apr 22, 2014 at 14:03

2 Answers 2


maybe you could make the resolution of the picture the same as the size of the button.

Windows XP:

  • Explorer views:
    • Details / List: 16
    • Icons: 32
    • Tiles / Thumbnails: 48
  • Right-click->Properties / choosing a new icon: 32
  • Quickstart area: 16
  • Desktop: 32

Windows 7:

  • Explorer views:
    • Details / List / Small symbols: 16
    • All other options: 256 (resized, if necessary)
  • Right-click->Properties / choosing a new icon: 32
  • Pinned to taskbar: 32
    • Right-click-menu: 16
  • Desktop:
    • Small symbols: 32
    • Medium symbols: 48
    • Large symbols: 256 (resized, if necessary)
    • Zooming using Ctrl+Mouse wheel: 16, 32, 48, 256

Windows Runtime: (from here)

  • Main tile: 150x150, 310x150 (wide version)
  • Small logo: 30x30
  • Badge (for lockscreen): 24x24, monochromatic
  • Splashscreen: 620x300
  • Store: 50x50

Source: Daniel Rose


From the MSDN forum

For a desktop app's icon include the full set of sizes (16x16, 32x32, 48x48, and 256x256) and Windows will choose the most appropriate version. If the right size isn't available then Windows will try to scale a larger one down. If you include only small sizes and Windows has to scale it up then it will end up blurry.

See also: https://msdn.microsoft.com/en-us/library/windows/desktop/dn742485.aspx

Your Answer

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

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