How to create a favicon for your Blogger Blog

How to create a favicon for your Blogger Blog

This post is in response to a comment left on my blog asking me as to how I made the funky little icon that shows up in the address bar of my web browser.

The graphic you see when you load my blog in a webbrowser that supports tabbed browsing like the firefox and the opera is actually and image of size 16 pixel * 16 pixel and its called favicon (favorite icon). A favicon appears next to a website's URL in the address bar of a web browser. And if you are using a browser that supports tabbed browsing, the favicon will also appear next to the page's title in a tabbed document interface.

Well adding a favicon to your blog is one of the ways to distinguish your blogs and to give it a personal touch from among the millions of weblogs available on the internet thus making your blog stand out of the crowd.

You can find the favicon I created for this blog at the top left of the page in the address bar. It’s a miniature version of the Swastika symbol.

[ More on Swastika symbol - It is a widely-used sacred symbol in Dharmic religions (Hinduism, Buddhism and Jainism). Hindus often decorate the swastika with a dot in each quadrant. In India, it is common enough to be a part of several Devanagari fonts. It is also a symbol in the modern unicode. It is often imprinted on religious texts, marriage invitations, decorations etc. It is used to mark religious flags in Jainism and to mark Buddhist temples in Asia. ] – source wikipedia.

Ok enough of beating around the bush lets come right to the point so you need to make a favorite icon for your blog. Ok go ahead get your designer or if you prefer to do it yourselves so be it. Open your favorite image editing program (in my case it’s the Adobe Photoshop CS2). Create a graphic of size 16 * 16 pixel.

Oh ho forgot to mention. The favicon file should be in the .ico (windows icon) image format. Adobe Photoshop by default cannot create files with the .ico file extention. So you need to download and install a plugin from Telegraphics. The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit "XP" icons (with 8-bit alpha channel). Make sure you have downloaded and installed the plugin before you begin working on your little graphic. And remember when you save the graphic the filename should be favicon. (favicon.ico).

A note of caution. An image of 16 *16 pixel size is really a very small image so you need to be careful or else it wont be distinguishable. You can either select your logo and resize it and see if it looks good in the smaller size if so you could keep it . for personal blogs its not such a bad idea to give a small photo of yours so that people could correlate you and your blog every time they see the blog icon.

Ok so now you have your icon ready. But you need to upload the file to the web to retrieve it. In case of your website the root folder is the recommended place to place your favicon. In my case what I did was I just uploaded the graphic to my googlepages site. At the root location.

Image location = http://mysite.googlepages.com/favicon.ico

Remember to replace “mysite” with the actual address of your googlepages site.

I preferred to upload my favicon to the googlepages site due to two reasons firstly google has a very dependable server and secondly they don’t have a limit on bandwidth so I preferred to make use of the services rather than host it in someplace where I actually do pay for the space and also the bandwidth. Lol.

Now that you have your icon online all you need to add is a this little section of html code in between your blogs head and tags.

Remember to replace “mysite” with the actual address of your googlepages site.

More on adding the code

Log into your blogger account and click the Template tab, click Edit Html and scroll down till you find the head tag. Add the code given above. And press save template. That’s it. You’re done with your favicon. Open a webbroweser and enjoy the view. In case it dosent show up try refreshing the page a couple of times.

Enjoy.