Add a custom favicon to your Blogger blog

When you publish a blog with Blogger, the default favicon which appears in your browser navigation bar is Blogger’s favicon (the unmistakable orange and white logo).

Many Blogger users choose to display their own favicon instead of Bloggers, in order to “brand” their blog with memorable icons in keeping with their blog’s design. It is actually quite easy to add our own favicon to our Blogger blogs, and instantly adds a sense of professionality to your overall design.

In this post, I’ll explain how easy it is to add a favicon to your Blogger blog, along with resources for designing your own favicon and where you can host this for free.

What is a favicon?

The word “favicon” is short for “favourites icon”, and is a 16×16px square icon which is associated with a website (or blog). Browsers which support favicons will usually display a website’s favicon in the address bar (to the left of the URL), and next to the page’s name in a list of bookmarks. Browsers which support tabbed navigation (such as Firefox and IE8)  will also display the favicon next to the page title on each tab.

Favicons are usually found on the root of a domain, and use the .ico extension. For example, the favicon for Blogging Tips can be found here: http://www.bloggingtips.com/favicon.ico

Blogger users do not have access to the root of their blog hosting. This means that unless an alternate favicon is specified, Blogger’s favicon will display in browsers accessing Blogger powered sites.

In order to add a custom favicon to be displayed in the browser of sites accessing a Blogger powered blog, we need to:

1. Create our own favicon
2. Upload this to an image host
3. Edit the Blogger template to reference this alternative favicon.

Let’s go through these steps in order.

How to create your own favicon for Blogger

A favicon is a small image, measuring 16×16 pixels. Favicons are usually made with the .ico extension, though it’s also possible to use .GIF and .PNG files to reference a favicon.

If you are a budding ‘Photoshopper’, you can create your own favicon from scratch. Don’t forget to use a canvas measuring 16 pixels square (or create a square image which can be reduced to this size) and save as a .GIF or .PNG image.

Those who already use a recognised icon for their site/blog logo can easily generate a favicon using one of these free services:

• Favicon Generator (Blogger Buster)
• FaviconGenerator.com (right click image and choose “Save image as”)
• HTML-Kit favicon generator (download as favicon package) – Enables you to create a static or animated favicon; you can even create a favicon quickly using your Twitter username!

Alternatively you can download a “ready made” favicon from these sites:

• Favicons R Us
• FreeFavicon.com
• Iconlet.com (use the 16 px square version of your favourite icon)

Upload your favicon to the web

While Blogger does not offer hosting for files we use in our blogs (eg: JavaScript, documents and HTML files), we can upload images for use in our blog posts which are hosted by Picasa.

After uploading an image to our blog post (even if this post is not published) we can extract the URL of the image and reference this in our Blogger template code. Surprisingly, we can upload .ico files to our blog posts with Blogger (as well as any .PNG or .GIF favicons you may have created too).

To upload your favicon to Picasa through your blog, simply create a new blog post and choose to insert an image in your post. Choose the favicon you have created/generated/downloaded and upload this to your post.

Then either preview your post or view in the rich text editor so your favicon image can be seen on the screen. Right click this favicon and choose to copy the location of the image. Save this to your clipboard or paste into a text file for easy reference.

If you prefer to use a different host for your favicon, here are a few free hosts which support .ico files:

• MerryPic
• HostAnyImage
• ImageBoo

As before, copy the location of your icon file to yoru clipboard or paste in a text file for easy reference.

Add the reference for your favicon to your Blogger template

The final step to creating a custom favicon for Blogger is referencing the favicon in your Blogger template code.

To do this, go to Layout>Edit HTML in your Blogger template. You do not need to check the “Expand widget templates” box.

Search for the closing </head> tag in your template using your browser’s search function.

Immediately before this line, paste the following section of code, substituting YOUR-FAVICON-URL for the URL where your favicon is hosted:

<link href='YOUR-FAVICON-URL' rel='shortcut icon'/>
<link href='YOUR-FAVICON-URL' rel='icon'/>

Then save your template. Now when you view your blog in your browser, you should see your favicon appear beside the web address and in the bookmarks folder (if you have bookmarked your site).

Note: it is very important that you paste the favicon tags just before the closing </head> tag, not earlier in the template code. This is because Blogger generates favicon tags when your blog pages are generated which would otherwise override your custom favicon references.

Important information when using custom favicons for Blogger blogs

If you use Internet Explorer 6 or older, the favicon will not appear unless you have bookmarked your blog and refreshed your browser.

Also, any services which automatically extract the favicon for a site (such as Blogger’s “Feed” and “Blog List” gadgets) will still reference the Blogger favicon rather than our own custom favicons. This is because such auto-discovery scripts reference the favicon hosted on the same server as the website, rather than the favicon which is referenced in the HTML code of the page. As yet, there is no way to present our custom favicons to services which automatically discover the favicon for a site.

Your thoughts?

I hope this tutorial enables you to add custom favicons for your own Blogger blogs with ease. If you know of any other simple methods for creating custom favicons for Blogger, please let us know in the comments below.

Written by Amanda Fazani from Blogger Buster
Posted on April 27th, 2009 and filed under Blogger, Design & Coding
Do not forget to subscribe to our RSS feed for updates

8