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
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • 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 1.2 Tooltips: Customize Your Tips

    I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...

  • By
    Style Textarea Resizers

    Modern browsers are nice in that they allow you to style some odd properties.  Heck, one of the most popular posts on this blog is HTML5 Placeholder Styling with CSS, a tiny but useful task.  Did you know you can also restyle the textarea resizer in WebKit...

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!