Create and add a favicon to your blog or web site

What is a favicon?

A favicon is a small 16 pixel by 16 pixel icon that appears in the URL address bar of your web site or blog. Here are the steps to create and add your own favicon to your web site or blog with the details below:

1. Source or create an image
2. Convert image into an appropriate file format
3. Store favicon on a web service
4. Add code to your web site or blog template to point to favicon

1. Source or create an image
You can use any image editor like photoshop to edit the image or graphic you want as your favicon, or you can create the icon from scratch directly on a favicon creator web site. The favicon creators will produce a square icon, so ideally you should also start with a square icon. Don't worry about the dimensions so much because the favicon creator will resize the image that you submit, as long as it is not too monstrous.

2. Convert your image into an appropriate file format
There are a number of sites and software that can accomplish the task of converting you image or graphic into a favicon.ico file. Note: most browsers now support .gif, .jpg and .png formats, but if you don't have an image editor you can go to http://www.favicon.cc/ which gave the option of drawing your favicon right on their site with a little preview, or uploading an image or graphic and then downloading the converted (16 x 16 pixels) favicon file. If you decide to edit our own image or graphic, make sure that the dimensions are 16 x 16 pixels.

3. Store favicon on a web service
You will need to have your favicon hosted on a web service of some kind. If you are using it for your web site, you know doubt already have a domain host, but if you are blogging on free space you will need to setup a service if you don't already have one. http://flickr.com is a great spot to have free image hosting. Upload your icon. Copy the location, by right-clicking (apple-click on the mac) on the image and choose "copy image location".

4. Add code to your website or blog template to point to your favicon
In both cases, the code to insert the favicon needs to be placed somewhere between the head tags.

[link rel="shortcut icon" href="http://www.flickr.com/yourFavicon.gif"]
[link rel="icon" href="http://www.flickr.com/yourFavicon.gif"]

(replace the [] for <>, because blogger want to render them as html in this post)

-Groovy