Add a custom favicon to your Blogger blog

favicons-for-bloggerWhen 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 16x16px 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:

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

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:

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.

Disclosure: In full disclosure, it is safe to assume that the site owner is benefiting financially or otherwise from everything you click on, read, or look at while on my website. This is not to say that is the case with all content, as all publications on the site are original and written to provide value and references to our audience.

42 Comments

  1. PV Reymond April 27, 2009
  2. Tom White April 28, 2009
  3. Arsenal Poker Club April 30, 2009
  4. Paul April 30, 2009
  5. Paul April 30, 2009
  6. Josh May 1, 2009
  7. Josh May 1, 2009
  8. Darlene S. September 16, 2010
  9. alpona September 26, 2010
  10. The Mobile Spoon September 27, 2010
  11. @milindbawankar September 27, 2010
  12. josh October 1, 2010
  13. Norman October 5, 2010
  14. Guest October 13, 2010
    • Chronic Override October 24, 2010
  15. 106boom October 27, 2010
  16. Holiday Packages November 12, 2010
  17. Web Designing USA November 16, 2010
  18. marionette December 21, 2010
  19. Kirie December 22, 2010
  20. Raviraj Deora December 30, 2010
  21. Angel December 31, 2010
  22. Mike January 2, 2011
  23. desain January 4, 2011
  24. Web Informer January 10, 2011
  25. behzad January 14, 2011
  26. Tina Thorsen February 7, 2011
  27. oliver February 17, 2011
  28. Rhonnie February 28, 2011
  29. Appreviewfree March 2, 2011
  30. @soothsayerpg March 4, 2011
  31. Abigail March 5, 2011
  32. aga March 10, 2011
  33. Lion Templates March 27, 2011
  34. lacretiat April 11, 2011
  35. autumn May 6, 2011
  36. Asian Tv May 21, 2011
  37. Trail Guy May 25, 2011
  38. @Omemee4U May 28, 2011
  39. RoxyBot June 2, 2011
  40. Wynn Anne June 7, 2011
  41. Shah Rizar June 26, 2011