Thursday, 21 July 2011

New favicon feature in blogger and tips on designing a custom favicon

I went onto my design page in Blogger earlier today and saw something unfamiliar... a 'Favicon' (short for favourite icon) edit box at the top left hand corner. For those of you who are unsure of what a Favicon is, it's the small image that accompanies a website name in a tab or the address in the address bar. For example, on most Blogger blogs, you'll see the image below as the favicon: 

More examples of favicons:


Having a custom favicon for your blog makes it more unique and the blogger logo favicon isn't very pretty or eye catching.  At the moment I have an image of a pink crown as my favicon that I installed with a tutorial using html. In fact I didn't realise it has actually worked until I installed Google Chrome a few weeks ago and it showed up. I'm planning on changing to fit more with the design and theme of my blog. Any suggestions for it?

However now, you don't need to work with hmtl in order to install your own favion because with Blogger's new feature, you can upload an image of the right size easily just like you would upload any other sidebar image.

Instructions for getting a custom favicon for your blog

  • Decide on an image that you would like as a favicon. This could be anything such as one of your favourite images but it is best if it is an icon that represents and fits in with theme of your blog to create a strong and memorable ' brand' image. You could use programs like Photoshop, Piknic or Paint to help you design or customise an image. 
  • The size of the image you will need for a favicon is 16x16 square pixels and you can resize the image you want to use using a free online editing program or some of the helpful websites listed at the bottom will do this for you.
  • Make sure it is saved as a file on your computer.
  • Once you have completed these steps, go to the 'design' tab on your Blogger dashboard and click 'edit' in the Favicon box at the top left hand side of the page.
  • Select the image you resize and upload it.
  • Once you have clicked save, your favicon should be visible on your blog!
Helpful websites

Here are some websites that can help you to generate a favicon:

I hope these instructions and tips help!


  1. Thanks Stephanie! I have always wanted to know how to do this!

  2. Thanks for the tip ... I've been wanting to try it out since I saw the Favicon edit box in Blogger earlier this week :-)

  3. Thank you! I have been wondering how to do this! must do it later! :)

  4. I've been meaning to do this the html way on my blog and do a tips and tricks post for it, but I've been too lazy. Sometimes laziness pays off! Glad blogger made it easy :)


I love comments, they make me smile! So thank you for taking the time to write one, I read all of them.
I try my best to reply here or on your blog :)

Stephanie x