Pinning sites in Windows 8 – add two meta tags to make it high quality


Windows 8 IE10 allows you to pin sites to the start screen. But the site end up pinned with a favicon (if defined) and an auto generated colour.

image

That is unless you add two meta tags and create yourself a png of 144px by 144px.

<meta name="msapplication-TileImage" content="images/benthepcguy-144.png"/>
<meta name="msapplication-TileColor" content="#d83434"/>

Which can take you from this:

image

to this:

image

Simple 🙂

Related Links:

Advertisements

7 thoughts on “Pinning sites in Windows 8 – add two meta tags to make it high quality

  1. Hi Eric,

    I have observed two limitations in this scenario:

    1. The HTML shorthand colors don’t work for TileColor. For example <meta name=”msapplication-TileColor” content=”#777″ /> should be interpreted as <meta name=”msapplication-TileColor” content=”#777777″ />. Similarly, #c9f should be rendered as #cc99ff. TileColor also doesn’t support hsl() specification.

    2. When the webmaster modifies the Meta tag for ‘Pinned Tile’, the website’s tile, if pinned on the user’s Start screen, should auto-update once the user revisits the UR. For example, I had <meta name=”msapplication-TileColor” content=”#777777″ /> on my website and I pinned it on Windows 8′s Start. Next, I changed it to <meta name=”msapplication-TileColor” content=”#ff0000″ /> and revisit the website on Metro IE, it didn’t update the pinned tile. I had to manually pin the tile again. Moreover, when I pinned the tile again with exact same URL, it didn’t overwrite the existing one, but create a new tile (which was certainly not my intention). At least, it should notify that tile (with exact same URL) already exist or simply overwrites the existing one.

    – Adeel.

  2. Hi Eric,

    No matter what I do, I cannot seem to get it to render my 144×144 graphic in the pinning tile. If I have a 32×32 fav icon specified, it will use that, but it completely ignores the image I have set in my meta tags for msapplication-TileImage and the color for msapplication-TileColor. Has anyone else reported these issues?

    -cz

  3. same here… seems to be pointless to use this as you won’t be able to get it to work if you have a favicon.ico, which you cannot skip as IE does not support PNG as site icon… the only thing that works is the title tag ()…

  4. There must be some format that the PNG needs to be in that I haven’t figured out yet. But if you check out this site, you can upload your image and it will change it to the format you need to use. After downloading the changed PNG, you can put it on your server and get it working (Even if you have a FavIcon)….

    http://www.buildmypinnedsite.com/

    The problem I’m having is that my text always shows up in black. I am trying to be white, but haven’t figured that out yet. Anyone else figure that out??

  5. I got mine to work, though I have no transparency in the png, which is probably what you need to do. if you are selecting the background color outside the icon, you can just use the same color on the png.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s