Joe’s Blog

I’m so happy! I finally figured out how to make a transparent favicon. It seems like not a month goes by that I hear from some Joe’s Goals user who tells me how much they really like the application and use it daily, but would really like it if I could just fix one little thing: the favicon. The basic problem has been that the checkmark I use on Joe’s Goals and Joe’s Logbook has a white background. While that is fine in most address bars, it ends up looking like crud on FireFox tabs or in an IE Favorites folder. Today I set out to fix the transparency and below are the steps I took to do it.

8 easy steps to a transparent favicon:

1. Build a 16 X 16 gif with a solid color background to outline the area you want to be transparent. In my case I used Photoshop to modify my plus.gif file from Joe’s Goals, which is itself an icon from the free FamFamFam image archive.
2. Go get a copy of the excellent IrfanView. You can get it free from Download.com, TUCOWS, and others.
3. Open up your file in IrfanView and go to File > Save As.
4. Selected ICO - Windows Icon from the “Save as type” drop down and enter favicon.ico as the file name.
5. You should get a dialog called PNG/PNH/ICO save options. Under the ICO section select the “Save Transparent Color” checkbox.
6. Click Save on the save as dialog.
7. The image itself will pop up inside a “Choose transparent color” dialog where you can select the desired background color. Click on a color and you’re done.
8. Place the image in your root web directory and add the following code inside your head tags:
   

   <link rel=“shortcut icon” href=“favicon.ico” >

That’s it! Just a few easy steps and you’re done.

Notes:

• If you don’t care about transparency and would just like a quick favicon then go take a look at FavIcon from pics. It’s free and lets you upload an image and get a favicon and an animated favicon in seconds. There is also a lot of other cool stuff over at Chami.com so check them out.
• If you want to get the most out of IrfanView then I recommend downloading the free Plugin set here. It lets you open a whole ship load over other image types.