A favicon is the web nerd’s name for the small icon shown next to URL in your browser’s address bar, tabs or bookmarks.
Favicons are a way to customize your blog, and make it stand out from ‘the next one’, called it “branding of your blog”.
Interested? There are three steps to take to change the favicon for your blog:
- Create the favicon itself
- Host the favicon on an external image hosting service
- Change the <head> section of your blog
1. Create the favicon
Favicons are “icons”, small images with a specific file format, different from .jpg, .png or .gif. They have the “.ico” file extension, e.g. “theroad.ico”.
There are several online tools available to convert an image from the most popular image formats to an icon. I use the one from DynamicDrive.
You achieve the best results by using a square picture without too many details or colours as it will be reshaped to a 16×16 pixel format.
As a favicon is a “public relations” tool for your blog, use an image that somewhere typifies or represents your blog.
After uploading your original to DynamicDrive, click on “Create Icon” and you will see in the preview how your favicon will look like after you have done the next steps.
First, click ‘Download Favicon” to store it on your computer. On DynamicDrive, the file will always have the format “favicon.ico” or (if one already exists) “favicon(1).ico” etc..
2. Host the favicon on an external image hosting service
The favicon needs to have the “.ico” extension. Most of popular image hosting services do not support images of the “.ico” format, so you won’t have any joy using Flickr, ImageShack, XS.to, TinyPic etc.. But here are a few free image hosting services that do support “.ico” files: Oogletoogle, PicPanda, ImageBoo and CDMazika.
After you upload your favicon, the hosting service will give you a URL, refering to your picture, e.g. http://images.cdmazika.com/images/2f2stqn1k1p7diu5y6qs.ico
Make sure you don’t loose that URL!
3. Changing the <head> section of your blog. – Blogger version
This is a bit tricky, as it changes slightly from blogplatform to blogplatform.
Bottomline is: you need to edit the HTML template of your blog to either change or add a line.
How you get to the HTML template of your blog, depends on your blogplatform. Are you using Blogger? Follow the steps below. On Tumblr? Skip to the next chapter! Many Wordpress themes have built-in routines to replace the favicon.
On Blogger, go to Layout>Edit HTML> and click on ‘Expand Widget Templates’
Before you do anything else, PLEASE take a backup of your template. A corrupted template is one of the worst thing that can happen to a blogger.
Blogger lets you download your template with a click, or select the template content and paste it into a Notepad file.
Anywhere between the <head> and </head> codes, look for something that defines your current favicon. It will look like this:
“faviconame.ico” might have another name (ending in “.ico”), or contain a variable. And /directory might be something else of course..
By default, Blogger does not store the favicon in the HTML code of the template, so there is a good chance you will not find this code.
Now you need to either change that line of code (if it exists) or add one (if the favicon is not defined in your HTML template).
In Blogger (mind the SINGLE quotes) add this line:
Make sure you use the URL given for your .ico file. Save the template when done
4. Changing the <head> section of your blog. – Tumblr version
On Tumblr, edit your theme template via: Dashboard>’Customize’>Theme
Before you do anything else, PLEASE take a backup of your template: select the template content manually, paste it into a Notepad file, and save it.
Anywhere between the <head> and </head> codes, look for something that defines your current favicon. It will look like this:
“faviconame.ico” might have another name (ending in “.ico”), or contain a variable. /directory might be something else too.
In Tumblr, in many themes, the line looks like this:
Now you need to either change that line of code (if it exists) or add one (if the favicon is not defined in your HTML template).
But remember: between the <head> and </head> codes and make sure you use the URL given for your .ico file.
Save the template and “Klaar is Kees”. You are ready…
Pretty amazing stuff, no? 
Note you might need to restart your browser or empty your browser cache before you see the favicon (Internet Explorer is particularly bad at refreshing the favicon).
Peter. Flemish, European, aid worker, blogger, expeditioner, sailor, traveller, husband, father, friend, nutcase. Not necessarily in that order. (
