Add Favicon icon to Blogger URL

Have you wondered how these little icons appear next to the web
addresses, like the one you see above? When you visit the sites or
bookmark them, these icons will make these URLs stand out. These are
“Favicons” or “Favorite Icons”.

You would first need to have an
icon which you would like to use, bearing the extension .ico format. If
you search your hard disk, you might find some icons which are generic.
I would suggest that you create one to represent your own unique
identity. There are quite a number of free icon editor software which
you can download from the net.

As for myself, I went to Download.com site and downloaded a very small program called Imagicon
which can transform images into .ico format. I created an image using
Photoshop. You can use any image or pictures if you do not wish to
create one. Next, run the program. It is rather simple to use. While
you can create icons in 2 sizes – 16x16 and 32x32 – I would think a
16x16 icon is preferable since it is readable in most older browsers.

If
you do not wish to download any software, you may also try creating an
icon online. Just enter the keywords “online icon generator” into your
Google search bar, and you should be able to find several programs that
you can try.
Once
you have created an icon, save it into your hard disk. The next step of
attaching the icon is a little tricky. Ideally, all you need to do is
to save it in the root directory of your blog site. Nevertheless, there
is no way this can be done. For one, if you try to upload an icon
image, Blogger will reject it. Two, any file that is uploaded will not
go into the Blogger root directory.

The only method to use will
be to upload the icon into some web folder, and create a link. You can
read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and allows uploading of .ico files.
Once
you have done that, take note of the URL of your icon. If you are using
Google Page Creator, hovering your mouse over the link, you will see
that the file is stored under a directory which looks like this http://yourname.googlepages.com/iconname.ico
where “yourname” is your Gmail accountt name, and “iconname” is the file name. Copy this URL.

Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-

Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-

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

Update:

Copy and insert the following code below the line:-

<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Inserting this will also work but the former is preferred:-

<link href='URL of your icon file' rel='shortcut icon' type='image/x-icon'/>

Remember to type in the “URL of your icon file”.

Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.

Other image types

The
.ico image format has been used by many but you can also create an
image under the .png or .gif format. Ensure that the size of the image
is either 16x16 pixels or 32x32 pixels.

If you have a PNG format image, the link to insert is:-

<link href='URL of your icon file' rel='shortcut icon' type='image/png'/>

If it is a GIF format image, the link is:-

<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>

External Domain


For
those who have hosted sites in external domains, insert the link in the
root directory as well. Otherwise, you can upload the file into the
root directory and name it favicon.ico

As an example, if your domain name
is www.domain.com, the URL of the favicon will be www.domain.com/favicon.ico

This
method is not preferred but a number of browser versions are able to
process the icon. Since we do not have external domains to try out this
alternative, you may want to see if it works for you.

Compatibility

While
you can see the Favicon in Mozilla Firefox, many have problems seeing
the Favicon in Internet Explorer. This is a known problem and has been
a sore point with many IE users. In some versions of IE, bookmarking
the site will display the Favicon. This is not necessarily so in IE7
that we are using. In fact, when we bookmarked the highly popular
search engine sites, their Favicons don't show in our IE bookmarks too
although they show well in Firefox. Perhaps this is one more reason to
download Mozilla Firefox if you have not already done so.