Large favicons in taskbar with IE9

Log-in or register.
rsrc/ie9fav.png image

Large fav-icons in Windows 7 taskbar

New features in IE9 and how to prepare your web for them

Internet Explorer 9 has a tighter integration with Windows 7 than any other browser currently available (October 2010). It allows users to pin web sites to their task bar or to Start menu as ordinary applications.

Pinning a web site

Windows 7 task bar got better with Internet Explorer 9 ability to pin web sites to it. Other web browsers will undoubtedly follow.

To pin a web site, drag and drop its tab onto the Windows 7 task bar. A new button appears on the task bar showing the web favicon.

Additional options may appear after hovering over it or right-clicking on it. That depends on the web site. It may define shortcuts or commands using meta-tags in page header or javascript.

How to try it right now? If you are running Windows 7 and IE9, drag and drop this page on the task bar and then right-click the button.

rsrc/pinned-web.png image

As you can see, there are links to the Software, Gallery, and Forum sections. All with their own icons.

How to make use of the new features in IE9

Create a larger fav-icon

Gone are the days when using a simple 16x16 icon was enough for a good favicon. To deliver the best experience to the users who choose to pin your web (and you should, they are your fans!), your fav-icon should include 48x48 and 32x32 sizes in addition to the standard 16x16 pixels image.

To create IE9-compatible fav-icon from image, use our online image to icon converter. Choose custom icon with 16,32,48 sizes.

If you do not have a suitable image, you may draw an icon for example in RealWorld Icon Editor.

Why do you need 16x16, 32x32 and 48x48 sizes?

If you are using standard resolution (96 DPI), size of window caption icons is 16x16 pixels and size of task bar icons is 32x32 pixels. Also, for pinned web sites, a 24x24 pixels icon is displayed to the left of the Backward/Forward buttons.

With high-resolution displays being fairly common these days, many users choose to run their Windows in 120 DPI or even 144 DPI. All objects, including fav-icons, are 125% or 150% larger in these modes.

Define additional properties

Users may not be on the home page of your web when they are pinning it. It would be preferable if the pinned shortcut took them to the home page. You should specify the default url and name of your pinned button using the following attributes:

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

You can customize the button even more using the following attributes, but I do not think they are overly useful and skipping them is no big deal.

<meta name="msapplication-tooltip" content="What is my site about? I do not remember" />
<meta name="msapplication-window" content="width=800;height=600" />
<meta name="msapplication-navbutton-color" content="red" />

Add shortcuts

To add shortcuts to the context menu of your task bar button, place the following line into the <head> section of your page:

<meta name="msapplication-task" content="name=Hot news;action-uri=http://www.yourweb.com/hot-news.html;
icon-uri=http://www.yourweb.com/hot-news.ico"/>

Customize the content attribute with the name, uri, and optionally icon-uri of your shortcut.

To add multiple shortcuts, add the <meta> attribute to your <head> section multiple times with different content.

The name of the attribute suggests that the shortcut should represent a task. Consider that a recommendation.

There is more

Internet Explorer 9 also allows web sites to dynamically specify categories and shortcuts in category via javascript.

Another option is the ability to place an overlay icon to the main web site icon on the task bar. The icon is also controlled by javascript and it can be used to deliver alerts to the user ('new personal message', 'reply to forum topic', etc.)

To learn more about these options, visit http://msdn.microsoft.com/en-us/library/gg131029(VS.85).aspx

Summary

The absolute minimum a web site owner should do to support new features of IE9 on Windows 7 is to add larger fav-icon and specify the name and default url for the pinned button. Using the remaining features can help certain types of web sites, but living without them is no big deal.

Recent comments

- show all comments
user icon Anonymous on January 28th 2011

IE still has around 50% marketshare. So while it doesn't make sense to build just for IE, why not throw in a few niceties for those that do have it? Especially since there is no standard for this yet.

user icon Anonymous on April 10th 2011

I like IE9 and think it will gain a larger market share than its predesessors.

user icon Anonymous on July 1st 2011

"Most people on the web do NOT use IE anymore..." How ridiculous.....

Who cares about what others use and who(company) goes ahead in numbers to us I mean, simple internet users who have nothing to gain with it absolutely nothing I say. Must be a kind of football team: chrome firefox IE and the lower division ones like the old opera which gave us features 8 years now used - one at least - in IE9.
ok i'll stop it :o) and go into it
I installed Win7 and IE8 updated to 9. Its face looks cool to me but since appearence isn't enough I'll continue with FF and my needed adons.
Imo and in my case I like to always have IE to test some page that eventualy doesn't load correctly or has some other kind of issue with FF. So if I must keep it at least can someone tell me how to increase the icon/button size of those 3 default buttons like home favs and settings? There was always that option when customizing the toolbars. Big icons where are you?
By the time someone replies i'll probably have already an answer for it. But that reply will hopefuly help others who search for the same and end up here or just pass by.

Thx for letting us world post without a register. I'm so sick ("WE" - i'm sure of) of not replying just because I/we need to register for 1 (one) ridiculous reply. THere's just soooo much info, so many great ideas, doubts and solutions, entrapped inside of our more than a million heads not being shared just because of those damn obligatory registers... But I think it won't change.
Sorry my english and bad grammar. Cheers.
MK from PT

user icon Anonymous on August 1st 2011

"Most people on the web do NOT use IE anymore..."

You're kidding right? Most people on the web actually DO use IE. Why? Because it's the default for every computer running Windows.

http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

That said, IE is on the decline and I'm not interested in going the extra mile for IE power users that want to pin a website to their taskbar.

user icon Anonymous on December 19th 2011

I use IE as does everyone I know, and I know everyone. IE9 is really nice and doesn't require a bunch of prorietary work to get CSS3 working, unlike the other "standards compliant" borwsers. Funny how the shoe is now on the other foot, eh? Oh, and if you're still upset about IE6, get past it. And if anyone is still using IE 5.5 on a Mac or Netscape 4.0, they just have to deal with it.

Kinda nice to pin Facebook to the taskbar, right?

user icon Anonymous on August 21st 2012

"IE9 is really nice and doesn't require a bunch of prorietary work to get CSS3 working, unlike the other "standards compliant" borwsers." WTF are you talking about?
I am a web developer, and I can tell you IE9 is still behind FF and Chrome in standards, features and performance (especially JS!)

user icon Anonymous on September 6th 2012

Does anybody know what you need to name the larger favicons? Currently my 16x16 is favicon.ico of course. I mainly want IE users to have the larger version as an option since it should be easy to add it to my site, right?

user icon cdl contributing user on November 7th 2012

How to make use of the new features in IE9

Create a larger fav-icon

Gone are the days when using a simple 16x16 icon was enough for a good favicon. To deliver the best experience to the users who choose to pin your web (and you should, they are your fans!), your fav-icon should include 48x48 and 32x32 sizes in addition to the standard 16x16 pixels image.

To create IE9-compatible fav-icon from image, use our online image to icon converter. Choose custom icon with 16,32,48 sizes.

icon-image/7488-32x32x32.png image

user icon Anonymous on July 19th 2013

An ico file can contain multiple sizes in one file. I always find it best to create my icons in a vector art package these days and then you can export to all the required sizes without the need to keep redrawing and tidying up each size.

user icon Anonymous on August 29th 2014

i have seen that, in amazon.in. in chrome.. am still wornder...how they do it?
:-( :-o

user icon Anonymous
Select background
I wish there were...