PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Add a custom favicon to your Blogger blog

Posted by on 27th Apr 2009 | 42 comments

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.


Amanda is a freelance blogger and web/blog designer. She writes about Blogger at www.BloggerBuster.com and maintains several other blogs on various subjects.

42 comments - Leave a reply
  • Posted by PV Reymond on 27th Apr 2009

    Hi Amanda,

    It is a great tip.

    If you use your own favicon you are creating your brand, it can set your blog apart from the standard blogs using blogger.

    I think it is important to use a favicon for your site too.

    Thanks,

    ^PV Reymond

  • Posted by Tom White on 28th Apr 2009

    Its amazing how quickly a favicon has become a standard element on most websites now – although some of the 'older' websites are taking a big longer to catch-up – a sign of them becoming out of touch and slow to respond perhaps.

    Thanks for a interesting post, now having said that I need to get around to a favicon for one of my websites….!

    Toothache Relief Guide

  • Posted by Arsenal Poker Club on 30th Apr 2009

    After searching Google.com for two days, i finally came across your site with the correct information about how to install a blogger custom favicon.

    I appreciate the knowledge in this post because it was exactly what i was looking for. I used Google Sites to upload all of my images since they allow all different types of file formats. These are the links used for my custom favicon using Google Sites, Blogger, & Godaddy Custom Domain Name.

    I want to stress that These instructions on this post are Essentially Correct for anyone using Custom Domain Name Hosting. Other blogging tip websites inform you to put your favicon links near the header of your blogger template which was INCORRECT for my situation.

    Those false instructions will only work however if your are using blogger.com's free blog hosting service.

    Custom Domain Name Hosting is a paid for SERVICE !!

    Thanks once again for the information posted here on Bloggingtips.com

  • Posted by Paul on 30th Apr 2009

    You can't see my template edit in my previous post. Maybe it will shown now:

  • Posted by Paul on 30th Apr 2009

    I did everything as said above, but it doesn’t work! I really don’t know why. I edited my templateHTML and it looks like that:

    What might be wrong?

  • Posted by Josh on 1st May 2009

    I found that this favicon code would work on Firefox (on Mac), but on not Safari. Because of this I didn't even know if it was working at first, since I use safari. However with a little help from google, I found this code to enter the favicon into the document, and it works on everything I have tested. The process is the same you described (how I did it as well) right up until the code before the HEAD tag.

    <code>

    </code>

  • Posted by Josh on 1st May 2009

    used the code tag on it, but looks like it is still not appearing on my comment…

  • Posted by Darlene S. on 16th Sep 2010

    Thank you so much for this easy to follow post! This worked like a charm! :)
    My recent post Retro- Robot Themed Birthday Cards

  • Posted by alpona on 26th Sep 2010

    Thank you for learning the step in easiest way.

  • Posted by The Mobile Spoon on 27th Sep 2010

    Great tips, works like a charm, my only problem is that no matter how I make my logo look small – it doesn't seem sharp enough: http://www.mobilespoon.net

    I'm using iconj.omc – any tips for that problem?
    My recent post Is Texting While Driving Really Dangerous

  • Posted by @milindbawankar on 27th Sep 2010

    This is really a great post. The fact that it is a big help for everybody, especially those who loved and is fun of blogging. I will make sure to apply what i have learned from your post. Thank you for the tips.

  • Posted by josh on 1st Oct 2010

    worked perfectly for me. and yes, if you put it earlier in your <head> code, it will disappear. boom!

  • Posted by Norman on 5th Oct 2010

    This is a very useful tip especially to those who aren't self-hosting their site.

    Actually this so still applied to blog that are self-hosted. Tried it on my part and still worked like a charm.

    Btw, I suggest you use .png for icons and not .gif. PNG for me looks better. :D
    My recent post Super Checkers

  • Posted by Guest on 13th Oct 2010

    Just tried this in Blogger and neither Blogger nor Picasa support .ico files. How did you guys get this to work for you?

    • Posted by Chronic Override on 24th Oct 2010

      Don't use an ICO file. Use a PNG for the best results. Both the sites you have mentioned support this file type.
      My recent post Geeks Genesis

  • Posted by 106boom on 27th Oct 2010

    great tip!! specially this thing of pasting the code just before the </head>. thanks
    My recent post recycle current location = 7 levontin st. tel aviv

  • Posted by Holiday Packages on 12th Nov 2010

    YES I AM AGREE WITH IT .USING PNG GIVES A BEST RESULT.

  • Posted by Web Designing USA on 16th Nov 2010

    Awesome! works like magic, its currently working well on my site using your updated code but it seems to only work in Firefox and not in IE. How wonderful it would be to see an update to this tutorial that also works in IE. In any case, I pass the full credit to you for sharing this. All the best.

  • Posted by marionette on 21st Dec 2010

    thanks so much! i've been searching for this!
    My recent post Siti is the best of all ! ♥

  • Posted by Kirie on 22nd Dec 2010

    Thank you :) You wrote it really clearly.
    My recent post Christmas gingerbread cookies and Christmas Greetings

  • Posted by Raviraj Deora on 30th Dec 2010

    Thanks..works perfectly
    My recent post INTERNATIONAL KITE FETSTIVAL-2010-Sabarmati River Front- Ahmedabad

  • Posted by Angel on 31st Dec 2010

    Pretty good :) Happy New Year :) I wish You all the best !
    My recent post Miu – baroque element

  • Posted by Mike on 2nd Jan 2011

    Thank you for you tips. I'm almost smart enough to follow them to make favicon work.

  • Posted by desain on 4th Jan 2011

    thank you for posting this.
    i found something useful favixon
    My recent post 25 Christmas Theme 2010

  • Posted by Web Informer on 10th Jan 2011

    if i want to use any icon that is in my hard disk not on web den how can i change my web icon
    My recent post RSS Developers history

  • Posted by behzad on 14th Jan 2011

    i did same steps. my favicon is not being shown noe. It worked fine for 3 days. Can you help me here?

  • Posted by Tina Thorsen on 7th Feb 2011

    Hi Amanda, I have been searching all over the place for an easy way to do this. I read your blog and followed your steps, but I my favicon is not appearing. Does it take awhile? If this works, I will definitely post this on my site with a reference to your blog!
    My recent post PC Repair North Shore

  • Posted by oliver on 17th Feb 2011

    It's not working for me : ( http://www.happeningitisall.blogspot.com/
    My recent post

  • Posted by Rhonnie on 28th Feb 2011

    Gah I tried using .ico and .png, tried with original code and by using the code tags around it but still no joy.
    I'm using blogger and put the new code immediately before the head tag.
    My recent post

  • Posted by Appreviewfree on 2nd Mar 2011

    Thank you for this tutorial!
    My recent post Nofinder – free photography app

  • Posted by @soothsayerpg on 4th Mar 2011

    Hi amanda.great tutorial by the way.
    but my i ask,where to upload the favicon for people who doesn't own a host or domain(like me),only blogger.
    where can it be uploaded?
    My recent post Tired of the same MMORPG

  • Posted by Abigail on 5th Mar 2011

    Absolutely wonderful information! This was so easy. Thank you so much for helping my website look more professional!

  • Posted by aga on 10th Mar 2011

    hi Amanda,
    thanks for your tips.
    am trying hard but it does not work.
    this comes up: iYour template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The reference to entity "postID" must end with the ';' delimiter.

    what shall I do? any tips? would be grateful.

  • Posted by Lion Templates on 27th Mar 2011

    Thank you very much for the tutorial. It is really helpful.
    My recent post Senja 2R

  • Posted by lacretiat on 11th Apr 2011

    Great tutorial! Thanks for the tips! Here's my web site so you can see the favicon I created! http://readyheart.blogspot.com/

  • Posted by autumn on 6th May 2011

    Very, very helpful thank you! I have searched for tips about this in other blogs but couldn't get it to work until i found this tip of yours. So easy to follow and very much detailed. Thanks so much! *hugs*

  • Posted by Asian Tv on 21st May 2011

    Hi I added the code exactly as shown but with my url and double checked to make sure it looked the same but the blogger logo still shows up. What am I missing?
    My recent post Watch Chhoti Si Zindagi 20th May 2011

  • Posted by Trail Guy on 25th May 2011

    Hi Amanda, appreciated this tutorial and it worked perfectly up until about 4:00 p.m. PDT yesterday (May 24, 2011. It seems that our friends at Blogger decided that they didn't like having their brand bypassed and made a change that overrides custom code for favicons before the </head> tag.

    Was hoping you might be able to provide an updated solution that would mitigate the change they've made on their end. This was an older post so I hope you're still writing and can help with a workaround.

    Thanks in advance!

    ~Trail Guy

  • Posted by @Omemee4U on 28th May 2011

    WooHoo! Fantastic clear post! It worked. To make the animated favicon for our village paper I used an online generator after creating a picture in Picnik Thank you for the great tips!

  • Posted by RoxyBot on 2nd Jun 2011

    Thank you SO MUCH for this blog. It was soooooo easy! If you don't mind, I will be eventually blogging about this. You will get all the credit, but I want to blog my experience if that's okay.

  • Posted by Wynn Anne on 7th Jun 2011

    Hmm. Blogger would not let me upload a .ico file. Even with a .png file, inserting the code and url you suggested (substituting my url) did not work.
    My recent post Odd Coincidences

  • Posted by Shah Rizar on 26th Jun 2011

    its work.. thanks
    My recent post Cara Mengatasi Rasa Bosan Dalam Kelas