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
    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...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    WebSocket and Socket.IO

    My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently...

  • By
    Disable Autocomplete, Autocapitalize, and Autocorrect

    Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features.  Unfortunately these features can sometimes get in the way;  we don't always want or need the help they provide.  Luckily most browsers allow...

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!