How to give favicon.ico a transparent background?

HTML & CSS
1

I’ve got a little favicon.ico thing happening with a web site I’m working on.

For anyone asking “whats a favicon.ico?”, check this thread:

http://www.sitepointforums.com/showthread.php?s=&threadid=39421&highlight=favicon.ico

OK - my problem is that I can’t seem to create a favicon.ico with a transparent background. It looks fine in my IE address window, but when I drag and drop it onto my toolbar, it’s got a ‘nasty’ white background against the grey toolbar.

To create my favicon.ico, I do all the right things (well, probably not). I create a 16x16 icon in Photoshop, and save it with a transparent background as as .gif. I then load it into Irfan View…

http://www.ryansimmons.com/users/irfanview/

… and save it as favicon.ico (in ico format of course).

Actually, I’ve tried saving it out of Photoshop with a transparent background and a white background, but either way the result is the same - a white background against my grey toolbar. When I drag the SitePoint favicon.ico to my toolbar, the background is transparent (so how do they do it?)

All I can think of is that perhaps Irfan View does not preserve the transparency of a gif image when saving in the .ico format?

Any takers?

2

Originally posted by spaceman
All I can think of is that perhaps Irfan View does not preserve the transparency of a gif image when saving in the .ico format?

That’s most likely the case. If it can’t save transparent icons, perhaps you need a software package that can. Check out Microangelo – you can even [URL=http://download.cnet.com/downloads/0-1476516-108-17056.html?bt.15897.10015…dl-17056]download a free evaluation copy.

3

favicon.ico cannot be transperent i gues… did u try the .ico file on something ? or did u make the file the size of the .ico file … i mean like sitepoints ico hae u cut it in the exact shape… i aint sure about this !!

4

Originally posted by Ruchir
favicon.ico cannot be transperent i gues

No, it can be transparent, just like any other icon file. My guess is that IrfanView just isn’t advanced enough to equate a transparent GIF to a transparent ICO. And that’s why you need to get the trial version of Microangelo.

5

You are correct, ico files can be transparent, but when you use Irfanview to convert your transparent gif to an ico file, it will give it a background.

So, you need to use an icon editor to go remove those background bits.

I’ve found the freeware (need to register, but still free) Icon Studio to take care of this quite well.

-QuaffAPint

6

Thanks for all your comments.

I grabbed Microangelo, and it works perfectly. Of course, if I need to do it again after 21 days from now (when my trial version of Microangelo expires), then I’ll head straight for Icon Studio. I don’t do this often enough to warrant paying for it.

Thanks again. I’m sure others will find this discussion to be useful too.

7

I emailed Irfan of “IrfanView” fame with this same question - he just got back to me and confirmed (what I already expected) that IrfanView does not currently support .ico with transparent backgrounds (hence my original problem).