How To Add A Favicon To Your Blogger Blog

I've been trying to figure out how to add a favicon (short for favorite icon; pronounced fav-eye-con) to my blog ever since I started writing it. That's the little picture in the URL address line of your browser. I made several aborted attempts that ended in frustration.

This week I mentioned that I wanted to add my Simpsons avatar as my blog profile photo. Alas, I can't seem to figure out how to change the photo despite hours of reading various instructions. I suppose I'll waste another chunk of time because the people running these sites can't seem to explain anything. "Why Oh Why?," I ask, "can't people explain things with easy to follow instructions?"

With that in mind, and on the heels of writing up instruction on how to point your web name to a blog, I now present you with how to add a favicon to a Blogger blog. This is probably different for other blogging programs, but it will at least give you a decent base of information in those cases.

I started with the instructions at Blogger Tips And Tricks that I found through Blogger help. It didn't work as directed but I futzed with it until I got it right.

First, you have to get a square image that you want. It's going to be really small so pick something simple. Even the Simpsons avatar up above is a bit hard to see. For my Why Oh Why? blog, I started with my large rectangular Simpsons avatar in Photoshop. I resized and cropped it because favicon images need to be at least 96 x 96 pixels square and either in .jpg, .gif, or .png format. For the ECCO blog, I opened a clip art file in Illustrator, changed the color, and saved it as an .eps file. I opened that in Photoshop, resized it, and saved it as a .jpg file.

Generate the Favicon .ico File And Host It Free Online
• Go to www.MyFavatar.com and set up a free account.
• Click on "Change Avatar".
• Click on "Choose File", select your .jpg, .gif, or .png file, then click "Submit".
• The image should appear on the upper left of the screen next to "My Favatar".
• Click on "Edit Blog" and input your blog information, then click "Submit".
• Click on "Favatar Codes".
• Highlight and copy the Favicon Code in the fourth box of sample code.

Next, you have to tell Blogger that you're using a Favicon and where to find it:

Blogger Portion
• Log in to your Blogger account.
• Go to your dashboard.
• Click on "Template" for the blog you want to set up the Favicon.
• Click on the "Edit HTML" tab.
• Look for the "head" tag towards the top.
• Paste the code that you generated and copied at www.MyFavatar.com under the head tag.
• I FOUND THAT BITS OF THE CODE FROM MYFAVATAR WERE OUT OF ORDER AND THE CODE DIDN'T WORK. WHEN I CHANGED IT TO WHAT THE TIPS AND TRICKS SITE'S INSTRUCTIONS, SHOWN BELOW, IT FINALLY WORKED.
• This portion of your Blogger template's HTML should now look like this:

head

link href="http://favatar.myfavatar.com/alzmoments.ico" rel="shortcut icon" type="image/x-icon" /

link href="http://favatar.myfavatar.com/alzmoments.png" rel="icon" type="image/png" /

/* b:include data='blog' name='all-head-content'/

title

$BlogPageTitle$

/title

• NOTE: Each of the seven lines of code above start with a "<" and end with a ">". They would be interpreted as real HTML if I include them that way here.
• In the "ECCO" template, I had an extra line of code "b:include data='blog' name='all-head-content'/" that messed things up. I turned this into a comment by adding "/*" to the front of the line.
• Click on "Save Template Changes".

You're done!

This took me several hours over many days of looking through help files, online Q & A's, and calling customer service. Pretty easy when you see it mapped out in logical steps!
*