How to create a Favicon for your website

A favicon (short for favorites icon), also known as a website icon, shortcut icon or bookmark icon is a 16x16 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website by several means, and most web browsers will then make use of it. Browsers that provide favicon support, typically display the favicon in the browser's Address bar and next to the webpage's name. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title.

This is a tutorial on how to create such a favicon and insert it into your website (actually beside the url in the address bar). If you have no idea, what i am talking about, then just take a look at the browser's address bar above. That tiny image next to this website's link is called the FAVICON.


Step by Step procedure to design and get the favicon up and running:

1) Think of a catchy logo based upon the name of your blog or your website. Use any image designer to create such an image. I used Adobe Photoshop to create the N2G logo which is shown below. You can also do something like that. If you want any suggestions on how your logo should be, please comment and provide your queries. I am happy to oblige. The logo I designed looks something like this:


2) After you create the image(assuming you use PhotoShop) save it in png(or jpeg) format, preferably in the interlaced form (because by doing this, the image is split into layers of different quality and will help in loading during heavy traffic).

3)Now, If you are blogging through Blogger, Wordpress or any other blogging platform, you must know that these systems do not allow you to upload files and use them whenever you need. So you need to upload the picture you just created into some website which offer such services. Some of them are ImageShack, Flickr and so on. I use ImageShack which is quite easy to access and obtain the links effectively.


4) Once you have obtained the link to the uploaded image, sign in to your blogger account and click on layout. Then click on Edit HTML. You will be given the HTML code of the theme(template). All you need to do is rewrite the below given code(without the head part) just above the head tag as shown. (Note : you to obtain the image URL from the site you just uploaded to and paste it after href=")


<link rel="shortcut icon" href="http://imageshack.us/img21/favicon.png"/>

</head>


5) Save your template ( i advice you to download the existing template before saving, just in case if anything happens) and preview the blog.

Please feel free to comment and ask your doubts.