Follow BlogTips via RSS Get BlogTips updates via Email Follow @SM4NP - Social Media for NonProfit

How to change the Favicon on your blog

Posted on May 15th, 2009 by

school illustration

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.

what is a favicon 2

what is a favicon 1

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 or PicPanda.

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:

<link rel=’shortcut icon’ href=’/directory/faviconame.ico’/>



“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:

<link rel=’shortcut icon’ href=’http://images.cdmazika.com/images/2f2stqn1k1p7diu5y6qs.ico’/>



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:

<link rel=”shortcut icon” href=”/directory/faviconame.ico”/>



“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:

<link rel=”shortcut icon” href=”{Favicon}”/>



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).

<link rel=”shortcut icon” href=”http://images.cdmazika.com/images/2f2stqn1k1p7diu5y6qs.ico”/>



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? :-)

happy

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).




5 Comments to “How to change the Favicon on your blog”

  1. Jo says:

    Hi, I followed your directions for the tumblr favicon completely. Although, once saved the entire theme changed … apart from, you guessed it, the favicon! Do you have any ideas about why this may have happened etc.? & I’m really sorry for dragging up an old post & annoying you! x

  2. There are lot of plugins that help to apply favicon on a blog or your site even if you don’t know any thing about coding and HTML.The best way is to hard code into template file.

  3. Ella says:

    i really didn’t understand what i was supposed to change for the tumblr part, i used a link from pic-panda i have no idea what to do now

Leave a Comment

*