Weird Issue with Favicons and IE7

curtiss · #1 (**permalink**) 08-13-2008, 11:02 AM

While working on our new site, I've noticed a weird problem with IE7 and favicons. The favicon shown on the tab is of very poor quality, while the favicon in the address bar looks the way it should.

I've attached two small screen shots to show the difference. The file called "favicon-bad" is a screen shot of the favicon that's shown in the tab bar. The file called "favicon-good" is a screen shot of the same favicon when it's shown in the address bar. As you can see, the two are radically different.

favicon-bad:

favicon-good:

Has anyone encountered this before? Is this a known problem in IE7? Has anyone come across a way to fix it?

I've done a lot of Googling, but the only things I keep coming up with are complaints about favicons disappearing altogether in IE7. I haven't been able to find anything about the quality difference between the two locations.

In my particular case, my favicon has a transparent background and is saved as an ico file.

Deadeye · #2 (**permalink**) 08-13-2008, 11:05 AM

How many colors are in your fav-icon and you might want to search for fav-icon IE transparency color.

It looks like 1 color is transparent. Never seen that before, but that would be the only thing I can think of.

Wesley

*EDIT* OR the color gray your using is not websafe or being converted to clear. If you make a new tab in ie so that the background isnt the light blue color (a gray) does the icon still look the same?

Leprakawn · #3 (**permalink**) 08-22-2008, 04:06 PM

I would have to assume that you have too many colours in your favicon. Have you converted it to a solid color to see what happens?

curtiss · #4 (**permalink**) 08-22-2008, 07:53 PM

At the moment, the icon is 24-bit with alpha transparency.

I haven't yet tried it with indexed colors. I'll give it a shot, I guess, but I'll bet that means the icon will end up looking bad in all instances.

I still haven't been able to find any information about what color-depth IE renders its tabs in. It seems odd that it would be anything other than the color-depth the operating system is currently set to.

Deadeye · #5 (**permalink**) 08-25-2008, 10:09 AM

I read somewhere a long time ago that the Fav icon should be 16 colors. I'm sure this has probably changed but I'm not sure if the transparencies will work with the icon.

Wesley

curtiss · #6 (**permalink**) 08-26-2008, 08:22 AM

After a bit of independent research, I have found that you seem to be correct, Deadeye.

Oddly enough, Internet Explorer 7 seems to restrict the favicons displayed on its tabs to indexed, 256-color graphics. It displays 24-bit 16-million color graphics in the address bar without any problem.

The worst part is that IE7 does not seem to know that it restricts the favicons displayed on the tabs to that color-depth.

I created a favicon with six different layers: 32x32 pixels with indexed color palette, 32x32 in RGB mode, 24x24 with index, 24x24 in RGB, 16x16 with index and 16x16 in RGB. It appears as though, even though I've given IE the choice of indexed and RGB, it chose the RGB version of the icon to display on the tab.

I'm just not sure how much effort I want to put into this. Nearly 50% of our current site visitors are using IE7, so it seems like it should be important. At the same time, however, it's simply a favicon, and it displays correctly everywhere I've tried it (in the address bar and favorites menu of IE7, in Firefox, in IE6, Opera, Safari and on my desktop), except for the tab bar of IE7.

I think I'm just going to optimize it as much as possible, and then let it be.

Just be forewarned, when developing favicons for your Web sites, that IE7 does not seem to know how to properly handle them.