Skip to content
This repository

Add metro-tile.png #1136

Closed
Kroc opened this Issue July 04, 2012 · 3 comments

3 participants

Kroc Camen Nicolas Gallagher Mathias Bynens
Kroc Camen
Kroc commented July 04, 2012

See: https://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx?Redirected=true

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 ImageOptim.app, 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:
http://camendesign.com/_stuff/metro-tile1.png - pin menu in IE
http://camendesign.com/_stuff/metro-tile2.png - 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").

Nicolas Gallagher
Owner

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 Camen
Kroc commented July 04, 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.

Mathias Bynens
Owner

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.

Nicolas Gallagher necolas closed this issue from a commit August 10, 2012
Nicolas Gallagher 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
02bdaea
Nicolas Gallagher necolas closed this in 02bdaea August 10, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.