How to customize your website’s JumpList for IE9 site pinning

One of the killer feature of Internet Explorer 9 is website pinning. You can drag the favicon of any site from IE9’s address bar and drop it on Windows 7’s taskbar to pin it, just like you pin other applications. The common usage scenario will be to pin your favorite websites so that you can visit them any time with a click. But pinned websites are more than just taskbar bookmarks. A pinned site can behave like a desktop application with its own JumpList and icons. Better still – Microsoft allows website owners to customize how their Jumplist will look when pinned to the taskbar.

First, let us look how I have customized the JumpList for Instant Fundas.

If you own a blog or a website, you can do this to your blog too by adding a few lines of code. Let’s find out how.

Get a favicon

If you don’t have a favicon for your website, it’s time to get one. The favicon is displayed next to the address bar in your browser and this is the same favicon that will appear when a visitor pins your site to their taskbar. Although favicons can be both images (GIF/PNG/JPEG) as well as Windows icon (ICO), only the ICO format is supported on pinned websites. If you use an image favicon on your site, it will not appear in the taskbar and get replaced by the default IE icon.

So the first step will be to get a ICO based favicon. You can convert your existing favicon to ICO bu using this online service. You can use either a 16×16 or 32×32 favicon. If you use 16×16 sized icons these will appear stretched in the taskbar, as the default taskbar icon size is 32×32. To avoid this Microsoft recommends 32×32 or even 48×48 sized favicon.

Create the JumpList

The JumpList for your website can be customized by the inclusion of a bunch of meta tags on your website’s code. These tags will determine how your site’s JumpList appears in the taskbar. There are several different meta tags that you can add.

First is application-name. This tag specifies your pinned app’s name. Example:

Then comes the msapplication-tooltip, which defines the mouse-over tooltip message. Example:

Next up are a number of msapplication-task each of which define a command that appears under ‘Tasks’. You can add up to 5 tasks for your website. Example:

Next is msapplication-starturl. This value specifies the URL that opens when the pinned website is launched. If left blank, msapplication-starturl is going to be your website’s root URL, but if you want a different landing page for your visitors, you are able to do that with this tag.

Finally, there is msapplication-window tag which tells IE9 how big to make the browser window when it launches from the pinned application. Again this is optional.

That is all there is to do. Watch a demo by pinning this blog to your taskbar and right-click on it to see the JumpList. Then try this out on your own blog.