Skip to main content

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.

ie9-instantfundas-jumplist

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 16x16 or 32x32 favicon. If you use 16x16 sized icons these will appear stretched in the taskbar, as the default taskbar icon size is 32x32. To avoid this Microsoft recommends 32x32 or even 48x48 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:

<meta name="application-name" content="Instant Fundas" />

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

<meta name="msapplication-tooltip" content="Instant Fundas - All Things Technology And More" />

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:

<meta name="msapplication-task" content="name=Latest Freeware;action-uri=http://www.instantfundas.com/search/label/Software;icon-uri=http://cache2.instantfundas.com/icons/downloads.ico" />

<meta name="msapplication-task" content="name=Latest Web Apps;action-uri=http://www.instantfundas.com/search/label/Internet;icon-uri=http://cache2.instantfundas.com/icons/webapps.ico" />

<meta name="msapplication-task" content="name=Latest Tips;action-uri=http://www.instantfundas.com/search/label/Tutorials%20n%20Tips;icon-uri=http://cache2.instantfundas.com/icons/tips.ico" />

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.

<meta name="msapplication-starturl" content="http://www.instantfundas.com/" />

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.

<meta name="msapplication-window" content="width=1024;height=600"/>

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.

Comments

  1. Working here on www.geheee.com

    One thing though - I can't see to get the x64 version of IE9 to launch. Even if I pin the site from IE9 x64

    ReplyDelete
  2. Can't say about x64. I'm using the 32bit version.

    ReplyDelete
  3. Same for me on Win7 x64. Can't see neither a favicon, nor a task list menu.

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.

Diagram 101: Different Types of Diagrams and When To Use Them

Diagrams are a great way to visualize information and convey meaning. The problem is that there’s too many different types of diagrams, so it can be hard to know which ones you should use in any given situation. To help you out, we’ve created this diagram that lays out the 7 most common types of diagrams and when they’re best used: