Application Pinning with META Tags

By  on  
Application Pin

If there's one thing I want you to learn from the wide range of blog posts I've written, it's that it's the small things matter when you're creating your websites. Whether it's a one-page showcase, a business website, or an enterprise web application, there are always small details you can add that will really help someone out...even if that someone is on a Windows PC. One of those small details is setting your website up for "pinning", a functionality that debuted in Windows 7. Let me show you what it is and how you can implement it on your websites!


There are a variety of META tags used. Here are the base tags:

<meta name="application-name" content="David Walsh Blog" />
<meta name="msapplication-tooltip" content="David Walsh Blog" />
<meta name="msapplication-starturl" content="/" />

These initial tags provide basic information about the site to be pinned. With those self-explanatory tags in place, you can now add "tasks" which can be links to any URL:

<!-- format:  name={};action-uri={};icon-uri={} -->
<meta name="msapplication-task" content="name=David Walsh Blog;action-uri=;icon-uri=" />
<meta name="msapplication-task" content="name=David Walsh on Twitter;action-uri=;icon-uri=" />
<meta name="msapplication-task" content="name=David Walsh on Facebook;action-uri=;icon-uri=" />
<meta name="msapplication-task" content="name=David Walsh on LinkedIn;action-uri=;icon-uri=" />

For the purposes of a blog like mine, the tasks could be links to my Twitter feed, Facebook page, and my LinkedIn profile. For a business website, tasks could be shortcuts to the user's cart, different store departments, or a store locator!

As I mentioned above, this isn't a groundbreaking website addition but it can be just another small detail that makes your website a bit more useful than the rest. Providing users quick ways to accomplish tasks on your website makes your web application a bit more useful!

Recent Features

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    WebKit Marquee CSS:  Bringin&#8217; Sexy Back

    We all joke about the days of Web yesteryear.  You remember them:  stupid animated GIFs (flames and "coming soon" images, most notably), lame counters, guestbooks, applets, etc.  Another "feature" we thought we had gotten rid of was the marquee.  The marquee was a rudimentary, javascript-like...

  • By
    Create a Brilliant Sprited, CSS-Powered Firefox Animation

    Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited.  Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well.  The...


  1. Alex

    I’m too lazy to (but maybe I will) create a demo to see how it works.
    Does it work only when a page is viewed with IE?

  2. Martin Morel

    I wanted to try this by using davidwalsh’s website, but it seems I’m either blind or the homepage don’t have these meta tag…

  3. So I saw this on a Microsoft company blog earlier this week and I have 1 question.

    How many average Joes & Janes would actually use this?

    What the point of adding the extra code if no one will use it?

  4. Yep didn’t work on my site in IE9 and didn’t work for this website (confirmed the meta tags where present for both). Is it something the user needs to enable manually?

  5. Saw something similar for the iPad on this blog:

    I thought it was pretty neat, basically the same thing as above but for an iPad. I know some android tablet devices also support pinning. It would be great to get a list of all the meta tags you need to pin a site/web-app on different OS’s

  6. but how does these tags actually affect anything ?
    like right now i ve opened ur site
    these tags won’t work unless i pin ur site to task bar right?
    n m not gonna do it..

  7. This is definitely a cool feature, but I hope that more browsers start supporting it. I also hope that the markup gets standardized, rather than Microsoft have it prefixed with ms (although Apple does the same thing with their iOS “web apps”).

    For now, I tend to just add icon and application name/url info as described here:

    For IE9, I make a hi-res icon using

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