Pin sites to your taskbar | Force 5
  • Left Brains.

  • Right Brains.

  • Brand Soul.

Pin sites to your taskbar

With the recent release of Microsoft Internet Explorer 9 beta you are now able to see the work that has gone into a browser that has not seen much forward development in meeting web standards or rendering speeds compared to its rivals (Opera, Firefox, & Google Chrome). Microsoft has even launched BeautyOfTheWeb.com website showcasing the new features and abilities. One of the new features that I believe will be really useful for some users is pinning the website to the Windows taskbar. By pinning the website to the taskbar the end-user will have the ability to go to a site quickly without having to open up the web browser and finding the link in favorites/bookmarks area. One of the better examples where this feature can excel at is from USA Today. By pinning this site you are able to get quick links to all the different news sections (news, money, sports, life, & tech).

What do I need to do to add it?

The only basic prerequisite is that your website should have a favicon. That way aesthetically your pinned site will be branded appropriately. Code wise you will need to add at minimum two <meta> elements inside of the <head> section of your web page. First, add your application-name. For example, we'll enter "Force 5" into the content attribute.

  • <meta name="application-name" content="Force 5"/>

Second, add an msapplication-task. The content attribute is broken up into a couple sections. The name parameter is the label you want to appear; in this case we will enter "Discover Force 5". The action-uri parameter is where we want to send the end-user; in this case we will enter "http://www.discoverforce5.com/". The next step is optional; you can enter your favicon to the icon-uri parameter. Lastly, just repeat these steps to add more "tasks".

  • <meta name="msapplication-task" content="name=Discover Force 5;
                    action-uri=http://www.discoverforce5.com/;
                    icon-uri=http://www.discoverforce5.com/favicon.ico"/>

Example with multiple tasks:

    <meta name="application-name" content="Force 5"/>
    <meta name="msapplication-task" content="name=Discover Force 5;
                action-uri=http://www.discoverforce5.com/;
                icon-uri=http://www.discoverforce5.com/favicon.ico"/>
    <meta name="msapplication-task" content="name=Media Hub;
                action-uri=http://www.discoverforce5.com/Media-Hub/;
                icon-uri=http://www.discoverforce5.com/favicon.ico"/>
    <meta name="msapplication-task" content="name=Employee Blogs;
                action-uri=http://www.force5blog.com/;
                icon-uri=http://www.force5blog.com/favicon.ico"/>

Next: pin your site

After saving your changes, go to your web page with the new code above.

  1. Grab your favicon by dragging it to the taskbar.
  2. Pin favicon to your taskbar.
  3. Site is successfully pinned!
  4. Click on your new pinned task icon and go some where.

Even though IE9 is still in beta it is good to see Microsoft bringing new features to the table. If you feel like trying out IE9 today, click here.