Wednesday, October 19, 2011

Creating and Adding a Favicon to Blogger Blog

Favicons are the ultimate.

Chances are, you have at least seven browser tabs open at this very moment.  If that is the case then you are probably seeing quite a few different favicons right now!  The icons that show up at the top of the browser that help all of us helpless multi-taskers keep track of what tab is what?  Those are favicons.  It is a melding of the term "favorites icon," because clearly five syllables is too hard to say.

The new Blogger format supposedly makes it ridiculously easy to add a favicon to your site.

And with some images, it really is.

I have tried numerous different images, and here is my tutorial.

1.  Find an image you like, or create a custom favicon at  That website is so cool.  You can browse through images that people had created or uploaded, and then shrunk down to favicon size.  It is a very helpful site.  (And if blogger decides that it doesn't like your image, this website will become VERY important to you!)

2. Attempt to get your image past the Blogger favicon police.  To do this,  be on the Layout screen.

Up at the top left, click on the favicon box. and follow the directions to upload your file.
Be prepared for it not to work.

If it does accept your picture, then congratulations, you now have a favicon.  It may take a few times of refreshing your blog for it to show up consistently. 

3.  If the Blogger police did not accept your image, for whatever reason, then here is what you do.

Upload your image (if you found it on your own and have not resized it) to  On the left hand side is an option to "import image."  Do that.  It will shrink and compress your file.  If you scroll down a little bit you should see the preview of how it will look in your browser.  Underneath that is the option to "Download Favicon."  Do that.

4.  You have your favicon downloaded.   Now, let's try to get your new "favicon.ico" file uploaded.
Go back to the Favicon box on the layout screen, and you should be able to upload the .ico file.  If it accepts it, you should see your image in the box, instead of the Blogger logo.  Congratulations! You have a new favicon!

5.  If you are still having trouble, there is another, much more complicated way -- - but hopefully these tips will help you work with the blogger program and not have to alter the template.  (Not that there's anything wrong with that!)

Have fun!