How do you get pngs to work as favicon's in IE

Forum Moderators: open

Message Too Old, No Replies

How do you get pngs to work as favicon's in IE

smithaa02

8:39 pm on Jul 17, 2008 (gmt 0)

Everything works perfectly in Firefox, but in IE6 and IE7 my favicon.png file does appear on the browser tab.

Here is my html code calling it:

Any ideas?

jdMorgan

8:45 pm on Jul 17, 2008 (gmt 0)

> How do you get pngs to work as favicon's in IE?

By converting your .png to a .ico-format file for IE...

Jim

smithaa02

9:04 pm on Jul 17, 2008 (gmt 0)

That would work, however when I tried that it didn't look as good.

I know IE7 supports png icons now. Any ideas?

g1smd

9:20 pm on Jul 17, 2008 (gmt 0)

For everything except IE, I use a link reference to call the .png file:

<link type="image/png" href="/images/site/favicon.png" rel="icon">

For IE I just dump the .ico file into the root folder, with no reference from the HTML pages themselves.

[For Clarification]

[edited by: g1smd at 9:33 pm (utc) on July 17, 2008]

jdMorgan

9:20 pm on Jul 17, 2008 (gmt 0)

Be aware that icon files (done properly) are multi-resolution files: 16x16 for browser, 32x32 for desktop (normal icons) and 48x48 for desktop (large icons). The .png format will not support the multi-res functionality.

I suspect your incorrect MIME-type may have somethi9ng to do with it... Try image/png, since the file is not
really of type image/x-icon.

Jim

smithaa02

9:25 pm on Jul 17, 2008 (gmt 0)

I tried g1smd's html and that didn't do the trick. Any other ideas for getting PNG's to work in IE?

g1smd

9:32 pm on Jul 17, 2008 (gmt 0)

My HTML is for everything except IE as stated above.

Marcia

9:36 pm on Jul 17, 2008 (gmt 0)

If it doesn't look good as .ico then it has to be redone, because that's the required file format. Try a few versions of the graphic, and choose the font and color carefully for clarity.

penders

9:54 am on Jul 18, 2008 (gmt 0)

smithaa02:
I know IE7 supports png icons now. Any ideas?

Are you sure? IE7 includes enhanced support for PNG images that appear in the page, but unfortunately I don't think this extends as far as favicons...?

From jeff's MSDN weblog... why doesn't the favicon for my site appear in IE7? [blogs.msdn.com]

A: It must actually be a .ico (an Icon) file. Bitmaps, pngs, gifs, etc, will not work. IE7 will download your favicon to the Temporary Internet Files folder and call ExtractIcon() on the file. If this fails, we will show the default icon instead of your favicon.

If you are using alpha transparency in your PNG then you're likely to have to redo your icon for IE (the ico format supports justs a single transparent colour), or choose a suitable background colour before 'flattening' your image? But otherwise, the .ico format supports 256 colours which is fine for a 16x16 favicon.

Check out this other recent thread on favicons...
[webmasterworld.com...]

smithaa02

1:29 pm on Jul 18, 2008 (gmt 0)

I must have misread a website earlier regarding IE supporting png icon's, because I'm not finding any evidence of this either from now googling the subject.

Is there an easy way to make sure Firefox gets the superior PNG icons and IE gets the ICO file?

jdMorgan

2:10 pm on Jul 18, 2008 (gmt 0)

This has to do with the two different "icon invocation" tag formats, and their order in the <head> of your page. See the thread that penders just cited above for you.

Be sure to test what your .png icon looks like if you drag it from the browser address bar to the desktop, and test with both "normal" and "large" size desktop icon settings. I believe you'll see the reason I suggest using the multi-resolution .ico format (if dragging to the desktop works at all with a 16x16 .png). The only reason I feel strongly about this is that when a visitor makes a desktop shortcut to your site, and it's small or does not work properly, then this becomes a usability problem, instead of a matter of "personal preference." The .png format is great, but it's just not good for icons because there's no multi-res support.

Jim

penders

2:14 pm on Jul 18, 2008 (gmt 0)

Is there an easy way to make sure Firefox gets the superior PNG icons and IE gets the ICO file?

See g1smd's post above. Also, that other thread [webmasterworld.com] I mentioned for a lot more info.

rocknbil

6:23 pm on Jul 18, 2008 (gmt 0)

smithaa02, check out png2ico, a simple command line program to convert multiple resolution .png's to .ico files.

smithaa02

7:32 pm on Jul 18, 2008 (gmt 0)

Does anybody know if the latest firefox supports apng favicons?

Xapti

4:17 pm on Jul 21, 2008 (gmt 0)

it supports (animated) gif I think, and that's all the matters.

And if placing .ico in root for IE doesn't work, try naming it favicon.ico .Not sure if that's necessary, but I seen it done.

smithaa02

4:32 pm on Jul 21, 2008 (gmt 0)

Apngs have more colors then gifs, so they would look nicer.

jdMorgan

4:38 pm on Jul 21, 2008 (gmt 0)

Yes, but they won't work for IE.

Jim

smithaa02

6:03 pm on Jul 21, 2008 (gmt 0)

I was thinking if it worked I would platoon the two icons using g1smd's trick so FF users would get the better looking icon and IE users would get the ICO file until the next version of IE properly supports apng icons.

D_Blackwell

8:30 pm on Jul 21, 2008 (gmt 0)

At 16px square is there really a worthwhile gain in presentation with a larger palette?

smithaa02

8:50 pm on Jul 21, 2008 (gmt 0)

Actually with gradients even at 16x16 it can make a difference. I have a sun rising icon where the top of the sun is a lighter orange then the bottom part and it looks much better as a png then a gif.

tedster

9:56 pm on Jul 21, 2008 (gmt 0)

That doesn't compute. 16x16=256 and the .ico format offers a 256 color palette. Any hex color you want, one per pixel - so you can duplicate a .png file dot for dot. The graphics software and how it's used might make a difference, though, but the limitation is not in the .ico format itself.