How to insert a favicon with a transparent background?
What is a Favicon?
Definition from Faviconr.us:
A favicon (short for “Favorites Icon”), also known as a page icon, is an icon associated with a particular website or web page. A web designer can create such an icon, and many graphical web browsers can then make use of them. Browsers that support favicons may display them in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document browser. The file is called favicon.ico and it’s a 16×16 pixels image.
What’s next?
Now that you know what a favicon is, you can start about making one. First of all, you need an image for the favicon. Mine is a little cupcake to go with all the cupcake love we have in this blog. To me, the most important thing about the favicon is that whatever image you choose has to be a very clear and simple representation of your website and your blog. Nubby Twiglet wrote a very good article on favicons and branding which I recommend to you read before choosing a favicon.
Once you have you 16px X 16px image ready, the only thing you need to do is save it as a PNG image with the transparency on. To do this in Photoshop and Illustrator do the following:
Choose Save for Web & Devices. Then this next window opens:
There you choose PNG-24 and make sure the Transparency option is checked like this:
Then click save and upload to your server.
Now to insert into your web page just copy this code (modify it with the address of your favicon):
<link rel="shortcut icon" href="Address of your favicon.png">
And paste it between the <head> and </head> tags.
Kisses,
Julie.
