Add metro-tile.png #1136

Kroc opened this Issue Jul 4, 2012 · 3 comments


None yet

3 participants

Kroc commented Jul 4, 2012


I have recently implemented this with NoNonsenseForum and I have learnt a couple of things:

  • Windows8 canonicalises the colour, so the colour you give is not necessary the colour you get; therefore the image you provide must have a transparent background
  • Reusing apple-touch-icon is a no-go. Background must be transparent, and the logo should nearly fill the whole image because Metro provides its own spacing for the image
  • THE PNG MUST BE 32-BIT I've discovered that there's a bug in the Windows 8 Preview Release in that it won't render 8-bit, indexed PNGs for the metro tile. You cannot use a PNG8+Alpha. When you use image optimisation tools like, they often reduce the colour depth where possible. You can manually optimise the image using particular command line switches to keep the bit-depth

In Summary:

  • Create a 144x144 image of the H5BP logo, filling all of the canvas (no, or little padding), with a transparent background
  • Save this image as a 32-bit PNG and optimise manually without reducing colour-depth, naming it whatever you want, but I call for "metro-tile.png" as standard
  • Add the HTML metas to apply the tile and colour

Here's an image of what it looks like for my project, NoNonsenseForum: - pin menu in IE - Metro tile on the Start Screen

Edit: Oh, and you can’t use shorthand colour notation (i.e. "#222") for the colour, it has to be the full form ("#222222").

necolas commented Jul 4, 2012

Fantastic! We should create a new wiki page with this info for people making their own metro tiles.
BTW, nice to see you here and thanks for getting involved in some issues.

Kroc commented Jul 4, 2012

Also suggest if you have access to Microsoft Connect to file the bug with them; I can’t do it because I don’t agree to the terms and conditions required to register with Microsoft Connect.


Nice work, @Kroc!

Looks like rgb() and CSS color names are allowed too:

The tile color can be specified as a hex RGB color using CSS’s #rrggbb notation, via CSS color names, or by the CSS rgb() function.

@necolas necolas added a commit that closed this issue Aug 10, 2012
@necolas necolas Docs: add info about using Metro tiles
Thanks to @Kroc for raising this issue and providing extra details. It
has been included in the 'extend' documentation alongside other IE tips.

Close gh-1136
@necolas necolas closed this in 02bdaea Aug 10, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment