Creating a favicon for your Blogger blog

Favicons are those little images that appear in the address bar of your web browser, on the tabs in tabbed browsing and also in your favourites list. Most Blogger blogs display the orange Blogger logo as the favicon but why have that when you could have an icon that's a bit more relevant to you and your blog?

I'm not a techno-geek but little things like favicons make me happy and knowing how to make and use them makes me happier still! So I've written this tutorial in case you'd like to make one for your Blogger blog too.

There are two ways to add a favicon to your Blogger blog .....


The Easy Way

If you get a bit techno-frightened about these things or if you find HTML coding a really scary thing to look at (and even scarier to edit!) then this is probably the best method for you.

Visit iconj.com where you can create a favicon and host it for free. It will even generate the piece of code that you'll need to add to your Blogger template to make the favicon work. Just follow the instructions and then copy the code that appears in the second box that says ‘Direct Link‘.  Now skip to the end of this page and read the 'What To Do With Your Code' bit.


The Slightly Trickier Way

First up you’ll need to create a favicon. This is a 16x16 pixel image in a .ico format. I suggest using favicon.co.uk, favicon.cc or iconj.com for this. Once you’ve made your 16x16 favicon you’ll need to save it and host it on the web somewhere. If you have a website you can stick it on there.  If not, Google offer free webspace with their Google Sites application. 

Once you’ve made your favicon and got it hosted somewhere you’ll need the exact URL for it. Browse to wherever your favicon is hosted, right click on the image and then click ‘Properties’ at the bottom of the menu. A window will pop up and all you need to do is select the URL (left click and drag) then right click the selected text and click ‘Copy’. The whole URL you’ve just grabbed will replace the URL in this piece of coding below :

<link rel="shortcut icon" type="image/ico" href="http://www.yourfaviconURLgoeshere.com/favicon.ico" />

When you've replaced the URL you need to select and copy the whole string of code.


What Do To With Your Code

So either way you’ve made your favicon and got your code. Now you’ve got to paste it into your Blogger template. Sign in to your Blogger account, click ‘Layout’ and then click ‘Edit HTML’. Right near the top of the box of HTML is a line that reads :

<title><data:blog.pageTitle/></title>

You need to paste your string of code just after this. Then click ‘Save Template’ and ta-da - Bob should be your uncle!

If your favicon doesn’t show up straight away then try refreshing your screen or hold down the CTRL key and tap F5.

I hope you find this useful.  Happy blog faviconning!