Wednesday, March 9, 2011

Personalize your blog by adding a favicon

I was sitting in this comfy chair and reading, but I decided since I hadn't posted in a while, I could blog in this comfy chair too.
A recent change I made to my blog is the favicon. The favicon is the little image that shows up next to the url or in a bookmark or tab next to the title. It means Favorite Icon. Favicons are mini .gif images that are converted to .ico (but new browsers recognize .gif too). So here are the key things to know when you are making a favicon for your blogger:

  • will be 16 pixels by 16 pixels
  • end in ".ico" (or ".gif")
  • need to be hosted on the internet somewhere
  • will need to be coded in the Design tab under edit html

So here's how to do it...

Make or get a favicon:
First get or make an image. If you want to create your own, an easy way to make it is in paint. Here are just a few screen shots with some tips.

go to properties
Before you start, resize your canvas.
I suggest 32x by 32px to give you better control over what you make.

If you have a larger image that you would like to use, give it a shot, but I find that the fine lines get lost when it is only 16 px and it just looks messy. I have made several icons without resizing first and it was always a bummer when I realized that I put too much detail in.

this is the tiny box you will get.
I find it easier if I magnify the canvas
make something that doesn't have too  much detail
Re-size your image again but this time to 16px by 16 px.

save as .gif
I have made transparent favicons too with photoshop, but I have not tried that in paint.

If you don't want to make one, check out and search for something that is listed as public domain. I prefer to search through the Wikipedia Commons tab in this website. If you specifically type "icon" after your search word, you might come up with some good stuff that is already 16px by 16px. That is where I found my favicon. And if you happen to find it in the .gif format with a transparent background, the transparency will be preserved when you follow the next step and save it as .ico.

Now, whether you created the favicon, or found it online, save it to your computer. Find the file and open it in paint. Click Save As and save it as "favicon.ico". Don't try to find that ending in the save as drop down menu, just manually type the ".ico" on the end of the file name when you are saving it.

UPDATE (9/2/2011): This next step was posted before blogger made it so easy! Now all you have to do is go to the "Design/Layout" page and click on the "Favicon" button. Blogger will prompt you through the rest.

Host it on the internet:
If you have gmail, the easiest way to host your favicon is in a private picasa album. Open your picasa online and click upload. Choose the file and then after your favicon has been uploaded, find the image and copy the url that links directly to the image (right click on image, "copy image location"). If it shows up in picassa as a .gif, don't worry about it. It still works and worked for me this way. If you can't use picasa, just find another free file hosting place. There are some suggestions at this site:

Edit HTML:
Now I'll point you to this website that I used to find where to add it in the html:
If you made it this far without a hitch, just scroll down to "Now go to your blog and click customize." and follow the rest of his directions. Don't forget to replace 'your url' with the url of your actual favicon.

I hope this helps someone out there! There are a million little orange B's for Blogger floating around.


  1. Well, that took me longer than it probably should have but I did it! Thanks for the tutorial!!

  2. yay! I'm so glad you found it useful!

  3. And Jenn, I just found your blog. I love the name and design. The new favicon fits perfect.




Related Posts Plugin for WordPress, Blogger...