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
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

  • By
    MooTools Accordion: Mouseover Style

    Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...

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!