How to Create Favicon and Code to Blogger

I promised myself not to get into blogging tech-tips, because there are so many awesome sites and gurus writing about them already. Yet, I couldn't help myself. I recently added a Favicon for Self Sagacity.com and am so excited to share with you.

What is a Favicon? 

A favicon is a little icon that shows up on the browser tabs. See the image to the left. When the user has a lot of tabs open, the icon helps to identify which tab is which website.
 The word "Favicon" comes from Internet Explorer's "Favorite / bookmarks" and the word "icon", when combined, they become "Favicon." Pretty neat, yes? However, even though the word Favorites is from Internet Explorer, I am only able to see my Favicon on Mozilla Firefox and also in Chrome.

What are Favicon Dimensions? 

The favicon sizes are 16px X 16px. This size is very small so that it will fit in the tab's left corner. Normal images from any camera would be larger than 16px by 16px. In order to create a favicon size from your images you will need to reduce or resize the image with a photo editor.

Update Dec 2016: 

For a few years now, Blogger has developed new Blogger templates that have the capability of grabbing your image file, as long as the file meets the size requirements, and render it into a favicon. If that is the case, you don't need to use a favicon generator, and you can go to the Blogger's layout to upload the image to the favicon widget. See image below. 
Some templates don't have the favicon option, so don't get too upset if you can't find it. You can either find another template that has the favicon widget option or, you can follow the two sets of instructions below to create a favicon and code it to your template. 

Instructions How to Create a Favicon:

1) Select a picture that best represents you, or your site. Make sure the image has great resolution even if it's really tiny.

2) Upload it to favicomatic.com to create your Favicon file. The favicon generator will provide you with two image files, a 16×16px and a 32x32px with the .ico file extensions.

3) Upload the favicon image file to your favorite image storage to generate an html code or a direct link for your image. Copy the code of your image.

Instructions How to Code Favicon to Blogger Blogs

4) Go to your blogger account and click to edit html, look for

5) Paste the favicon link code below BEFORE the 



6) Don't forget to substitute YOUR FAVICON HTML CODE  or the favicon link you've generated from your favicon .ico file where the red letters are: YOUR FAVICON URL on both lines.

7) Save the template and refresh your browser, if you're able to see your Favicon then congratulations, you did it! 

If not, go back and make sure you have followed all the steps correctly and try again. If you're interested in having it work with other browsers, you will need to do more research. This tutorial is for Mozilla Firefox  AND Chrome. Go ahead and give it a try, it's shouldn't be too painful.

The picture to the left shows Self Sagacity's Favicons on the individual tabs. If you're addicted to tweaking and enhancing your site, check-out Reach Beyond Limits, Blogger Broadcast, and Beyond Wandering for many other blogging tips and ideas.