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.
{ 2 comments… read them below or add one }
Thanks for the guide. I didn’t know you could do this and had not even considered that you could use other formats for the favico
David’s last blog post..How to Stop Your WordPress Blog Getting Hacked
This is such a good resource that you are offering and you give it away for free. I enjoy seeing web sites that realise the value of providing a quality resource for free. I truly loved reading your post. Thanks!