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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    Sliding Labels Using MooTools

    A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn't require much MooTools code either! The HTML A...

  • By
    Degradable SELECT onChange

    Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function...

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!