Saturday, 14 July 2007

Create a favicon for your blog

A "favicon" is the icon which appears in the left of your address bar and in your "favorites" menu in your Internet program. I've just added a favicon to my blog, which you should be able to see in the address bar above (Internet explorer users must have Blogger Buster bookmarked before the icon can be seen, as I will explain later).




To have a favicon for your own blog, you'll first need to create an icon which is 16x16 pixels in size, and save this as a .ico file to your computer. I used Gimp to create my favicon (which is a free program with most of the functionality of Photoshop), though you could also use paint or any other graphics creation program.

Alternatively, you could visit one of these sites which have pre-made favicons available for free download:


Once you have your favicon, you'll need to upload this to a hosting account. If you already have a hosting account somewhere, you can upload it there. Free image hosting for ico files is available at Ripway (30gb space), and also at MyFavatar (registration required). Be sure to make a note of the exact URL of your favicon when you upload it!

Now, you'll need to add the following code to your Blogger template between the <head> and </head> tags (Change the code in red to reflect the URL of your favicon):

<link href='http://imagehost.com/yourfavicon.ico' rel='shortcut icon'/>
<link href='http://imagehost.com/yourfavicon.ico' rel='icon'/>
The easiest way to do this is to search for </head> in your template HTML and insert the code just before this tag.

Now save your template and view your blog. You should now see your favicon appear in the address bar!

If you are using Internet Explorer, you will need to bookmark your blog before the icon will be seen. You may also need to refresh the page/close the window before your icon will appear (a rather unfortunate glitch in IE, and yet another reason to recommend Firefox!). But be assured that it will appear! Also, when you bookmark your blog (or indeed any other website featuring a favicon), the icon will appear in your favorites list beside the site title.

Having a favicon for your blog enhances your blog's branding and identity, and is also quite fun! If you have created a favicon which you would like to share, please let me know as I will shortly be posting a set of favicons here for free download.

Technorati Tags: | | | | | |


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)