Forum Moderators: not2easy

Message Too Old, No Replies

Favicons

how to create transparency

         

HelenDev

4:27 pm on Sep 7, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I know how to create favicons, but I'm not sure how to get them to be transparent. Can anyone give me instructions?

I generally use Irfanview to make my.ico files, but I do have Photoshop and can download the plug-in if necessary.

travelin cat

3:36 pm on Sep 11, 2006 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



HelenDev,

I can not see why you would want the favicon to be transparent. The favicon sits on a white background in the address window, so why not just have a white background?

Just curious.

Also, I don't think this is possible. When saving as a .ico in Photoshop, transparency is not an option, usually this means that that the specs for .ico do not allow for it.

monkeythumpa

6:43 pm on Sep 11, 2006 (gmt 0)

10+ Year Member



Sure it is possible. What you need to look for is "alpha channel transparency icon maker". There are plenty of programs that will help you make it. I can't remember the one I used but you I only used the evaluation period since a favicon has a long shelf life.

Save your 16x16 and a 64x64 icon as png-24 files with transparency on in Photoshop. Then I uploaded them into the program (I can't remember which) and it stored both formats. The reason to have both is so that when it is dragged to the desktop, your icon shows up in the 64x64 format, but in the URL bar it shows up 16x16. I hope this helps.

tedster

7:30 pm on Sep 11, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The favicon sits on a white background in the address window, so why not just have a white background?

It also sits on system background (often gray, but can be custom) in the bookmark list and on the tab in some tabbed browsers.

HelenDev

11:06 am on Sep 12, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Cheers monkeythumpa, I'll check out what's available.

I can not see why you would want the favicon to be transparent.

As Tedster says, it's also on tabs and such. The only reason I noticed this was in Firefox, where I have a theme installed, and the favicons have a noticable white background. So I got to thinking it would be cool if they could be transparent.

The reason to have both is so that when it is dragged to the desktop, your icon shows up in the 64x64 format, but in the URL bar it shows up 16x16.

Wow, I didn't even know you could drag the favicon to the desktop! Thanks for that :)

HelenDev

3:49 pm on Sep 12, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I downloaded a trial version of Easy Icon Maker, but it's not behaving quite as I'd like...

For a start it doesn't support importing PNG files. It does support GIF though, and supposedly it has alpha channel support but when I import my GIF with alpha transparency the transparency is lost. Then it does seem to let me choose a transparent color, which I understand as index transparency, and as my icon has white in it, this isn't really going to work :(

Can anyone recommend anything better?

Also, is 64x64 actually the correct size for a desktop icon? It looks a little big?

vsgill

5:24 pm on Sep 12, 2006 (gmt 0)

10+ Year Member



I use a plugin for photoshop that alows me to make transparent icons... but i never tied to make favicon transparent with it...
its agood plugin if u want to try....
google this>>> telegraphics
its the first link that comes up in the search page.....

its free too

monkeythumpa

11:22 pm on Sep 12, 2006 (gmt 0)

10+ Year Member



I went through 2 or 3 before I found one that worked.

Gifs support birary transparancy, it is either transparent or not, whereas a png-24 will allow a pixel to be really transparent or hardly transparent and anything in between. If you are crafty you can use optical illusions to make it look good, but if you are using shadows or curves to any extent it needs to be a png.

Try to select all in photoshop and ctrl-c then ctrl-v into your program, if that does not work, then try another program. Photoshop .ico plugin cannot make transparent icons.

64x64 is too big, it should be 32x32, I got my powers of two wrong.

sc112

1:44 am on Sep 13, 2006 (gmt 0)

10+ Year Member



Google Liquidicon

It creates transparent background favicons. Free.

HelenDev

10:54 am on Sep 14, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I tried Liquidicon. However it seems to be less featured than Easy Icon Maker, it doesn't seem to handle transparency any better, doesn't open image files and it doesn't seem to support multiple icon sizes.

Any other suggestions anyone?

LunaC

2:41 pm on Sep 14, 2006 (gmt 0)

10+ Year Member



Google 'FavIcon from Pics', it's a free, online service that can take a png with alpha transparency and convert to a favicon.

I've had varying success with it, sometimes the icons turn out great, others, not so much. Worth a try though.