favicon your blogger blog

favicon - noun - an icon associated with a particular website or web page and displayed when that site is bookmarked

Did you notice that tiny little sunflower next to the blog address up in the address bar? That is a favicon. It also appears on the tab if you are using Firefox. And, if you've humored me and bookmarked the blog, it may show up there.

I've been noticing favicons on a lot of blogs. I thought about customizing a favicon for the old Blogger system, but never got around to it. Then, Blogger updated their templates, and I never figured out the ropes of adding a customized favicon on the new Blogger system.

In steps my friend, Chris. With his help and some research, mission accomplished. Through trial and error, I got it figured out. Below are the steps I followed:
 
Disclaimer: I don't know squat about programming. Just a tiny bit from my CivicPlus days of working on websites. We had excellent programmers that set up a content development system, so there was very minimal programming involved for the rest of us. This is the "Favicons for Dummies" to the best of my abilities, since I don't know all the technical terms. 

Preparing the image

1. Choose a simple image that you would like to use to represent your site. Be sure to keep it simple since space is limited.
2. Resize the image to 16x16. (Picnik is an easy tool to use for this)
3. Save the image in .jpg format. (For additional formats, see Chris's comment below)
4. Create a new post on Blogger, but do not publish it. Without writing anything, insert your chosen image into the post.
5. After the picture has been added, go to the "Edit HTML" tab (above the toolbar at the top of your post).
6. Copy the image source and paste it in a document for use in a bit. It probably looks something like this:   http://1.bp.blogspot.com/_Svme5QPESp8/S_ajJKLBK1I/AAAAAAAAAs4/Ia0Iqn9wKPQ/s1600/sunflowers-10377.jpg
7. Keep this blog post saved, but unpublished.

Placing the code

1. While in Dashboard on Blogger, click on "Design." Now, click on "Edit HTML" on the link bar toward the top of the page.
2. Once in the HTML, do a find for /head
3. You are going to be inserting code directly above that line, so locate your cursor between the "</b:template-skin>" and "</head>" lines.
4. Insert the following code:    <link href='XXXXXXXX' rel='shortcut icon'/>
   <link href='XXXXXXXX' rel='icon' type='image/jpg'/>
5. Replace the XXXXXXXX with the address for the picture that you copied earlier.
6. Click the "Preview" button and cross your fingers.
7. If the favicon appears when you preview your site, click the "Save Template" button. If the favicon doesn't appear, I don't know what to tell you... Maybe go through the steps again to make sure you tackled everything.

Let me know if you have any questions. I'll do my best to answer them. No guarantees!
Good luck!