Your favicon should be viewable across multiple browsers. Different browsers read things differently, so using two separate favicon images will assure the graphic will have a transparent background in all of them.

Create a new 16×16 pixel document with a transparent background in Photoshop. Draw or paste a graphic into the space. Part of a logo or image that carries the brand is best.

Save the file as Windows .ico format into the images folder of the website. In Photoshop CS4, the save as .ico format option is built in. CS3 and below requires an additional free plugin to have .ico as an available format.

Next, use the same imge and save for web. This time use a .png 8 format and 16 colors. Put it in the images folder again.

Put this code in the between the head tags of each page you want the favicon to show up on. If you are using a template or include file, better yet. You only have to do this once.

<link rel="shortcut icon" href="/http://yourdomain.com/images/favicon.png" 
type="image/x-icon" />
<link rel="shortcut icon" href="http://yourdomain.com/images/favicon.ico" />

That’s it! You have a new transparent favicon. If it isn’t working, make sure you uploaded all of the images and the pages.