How to Install a Favicon for a Blogger Blog

A “favicon,” or “favorite icon” is a very small, pixelated image used as a shortcut or website icon. Microsoft invented the favicon in 1999, with the browser Internet Explorer 4. The favicon was a tiny icon that helped identify favorites websites in the browser bookmarks. In the same way, you can make your blog memorable by inserting a favicon. The website favicon appears in the address bar and favorites lists of most browsers.



It is very important to follow a few general guidelines when making your favicon:
The favicon image is extremely small, only 16 x 16 pixels.
The simpler the image, the better it will look.
You must have a place to store the image, so you can link to it within your Blogger template. There are a handful of favicon-making and storing websites out there, but I have found them to be, overall, unreliable. It’s best to upload the favicon image to your own photo-sharing account, such as Photobucket or Image Shack.
The favicon must be in a typical image format. .PNG or .GIF or .ICO formats work best, because they are very compressed, and therefore, space-saving, formats.

I’m assuming that you already have your favicon created and that you have already uploaded the favicon to a photo-sharing site.



How to Install a Favicon for a Blogger Blog



1. Log in to your Blogger blog. Go to Layout and Edit HTML.

2. In the “Edit Template” box, look for the following code (it will be near the very top of your template):
<title><data:blog.pagetitle/></title>

3. You want to create a space between that line of code and the line of code below it. Place your mouse cursor at the end of that line and press “Enter.”

4. Place this code in the empty space.
<link href='ICON FILE URL' rel='shortcut icon'/>
<link href='ICON FILE URL' rel='icon'/>

So your code should look like this now:





5. Take your favicon url link (hosted at your photo-sharing site) and replace both of the ICON FILE URL sections with the favicon photo url. It will look something like this (I added the red lines for clarity):



6. Click Save Template and View Blog to see your new favicon. Note: you may have to clear your browser cache/cookies to view the image.
Notes

Some templates use different coding for favicons. If the coding I provided does not work for you, you can try one of these alternatives:
<link rel="icon" type="image/ico" href="http://example.com/favicon.ico" />
<link href="/YOUR_PATH/favicon.ico" rel="icon" type="image/x-icon" />