How to add a Favicon to your Blogger blog

Favicons are a fantastic way to give your Blogger blog a little added flair and panache. They also happen to be dead easy to create and install…

Favicons stand out

Whenever you’re on the web you may notice small images displayed in the address bar of your browser. They appear directly before the URL of certain websites. These images are known as “favicons” because they are “icons” associated with websites which show up in your browser’s “Favourites” list (in Internet Explorer) or your “Bookmarks” list (in Firefox). In newer browser versions they also display at the top of tabbed panels.

Favicons are extremely worthwhile for a number of reasons:

1. They make your site look more professional.
2. They enhance the visual ‘branding’ of your website.
3. They provide an intuitive way for web-users to find your site in their Favourites or Bookmarks lists.
4. In newer browsers they also make it easier for people to navigate back to your site via tabbed panels.
5. If you save your favicons in the Windows Icon (.ico) image format they can also be used as desktop shortcuts for your site.

Step 1: create an image

Favicons are small images which are usually 16px by 16px in size. Your site logo would be a natural choice for a favicon. If you find that your logo is too complex to shrink down to 16px by 16px, try stripping out the most recognisable logo elements and using them as a base for your favicon.

Favicons must be created in one of three possible image formats: .ico (Windows Icon), .gif (Graphics Interchange Format) or .png (Portable Networks Graphics). Of these the .ico format is probably the best way to go because all browsers will recognise it.

Create an .ico image

To create your favicon you can use pretty much any graphics program you want (I used Adobe Fireworks): so long as you can save the image in one of the afore mentioned formats (.ico, .gif or .png) it doesn’t really matter.

If you don’t own a graphics editing program which supports .ico files you may like to give one of these a try: Sib Icon Studio (an .ico image design studio), Any to Icon (converts most major image formats into .ico files).

If you own Adobe Photoshop you can use the free .ico plugin: Telegraphics Photoshop ICO Format Plugin.

Step 2: upload your .ico image to Google Page Creator

Now you’ll need to copy the .ico file to a host server so you can link to it. If you have a Blogger blog the easiest way to do this is via Google Page Creator.

Your Google web files

Go to Google Page Creator and login using your Google account details (the same details you use for Blogger). The first time you login to Page Creator you will be given the option of creating a site based on your Gmail address. Do this now. Don’t worry about how it looks; the important thing is you will soon have somewhere (free) to host your image files.

Your site URL will be “http://YOUR_GMAIL_ADDRESS.googlepages.com/” and you should end up at the page shown in the image above. Now upload your .ico image file and make a note of its URL, it should be something like: “http://YOUR_GMAIL_ADDRESS.googlepages.com/YOUR_ICO_FILENAME.ico”

Step 3: add the favicon HTML to your Blogger site

Now all you need to do is to go into the Blogger Layout Editor and choose the "Edit HTML" option.

Please note: If you haven’t already – make sure you save a backup copy of your Blogger template to your hard drive.

UPDATE!!: The old method of getting a custom favicon to display in a Blogger blog no longer works. As of October 2008 you now need to insert the code in a different area of your Blogger template. I have included the updated method below:

Insert the following code between the ]]></b:skin> and </head> tags in your Blogger template:

<link href='http://YOUR_GMAIL_ADDRESS.googlepages.com/YOUR_ICO_FILENAME.ico' rel='shortcut icon' type='image/x-icon'/>

Don’t forget to change the URL so it points to the .ico file on your Google Page Creator site.

Now save your template and view your blog. If your new favicon doesn’t show up straight away you may need to clear your browser cache.

And that's all there is to it!