Windows 8 Pin METAs

By  on  

Windows 8 allows for adding websites as apps (or maybe "bookmarks" is a better term) to the home screen, much in the vein that iOS allows users to do the same.  Like iOS devices, Windows 8 allows  users to accomplish this same task using custom META tags embedded within the page HTML:

<meta name="msapplication-TileColor" content="#FF0000" />
<meta name="msapplication-TileImage" content="/windows8-icon.png" />

The image size should be 144x144 and you'll want to define a custom background color with the META tag above.  Tags like these are invaluable -- very little HTML to add but a giant convenience to users.  Remember that the easier it is to get to your site, the more likely they will come back often!

Recent Features

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    JavaScript Battery API

    Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its...

  • By
    MooTools TwitterGitter Plugin

    Everyone loves Twitter. Everyone loves MooTools. That's why everyone should love TwitterGitter, a MooTools plugin that retrieves a user's recent tweets and allows the user to format them however the user would like. TwitterGitter allows the user to choose the number of...

Discussion

  1. MaxArt

    I wonder if there are HTTP headers that allows to do the same.

  2. How do you actually go about adding the website as an app in windows 8?

  3. Stephen

    Even though we *can* do this… it really bugs me that we have 8 different ways to set this kind of stuff per browser/device.

    IMHO, it would have been much better if all browsers used the same “link” “favicon” in PNG/GIF/JPG format… and it had attributes for different size icons (device/browser to choose the best size for its needs)

    Instead we have IE searching the at the server root for an icon in *.ico format, special meta tags for iOS, different tags for Windows8, etc. From a *lightweight* mobile perspective… cramming umpteen meta tags in to handle all the potential devices is totally counter productive!

    Oh well… I guess this is progress!

  4. why iOS allows users to do the same.

  5. Magnus

    I agree with Stephen, with every other OS and social media site adding their own meta tags it’s bloating up the element.

  6. Magnus

    That should have read head element.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!