by Anthony Weaver - http://antworkstudio.com/
Adding a FavIcon to distinguish your blog can be done.
This post came from a great comment by Tiha, "Can I do the same thing to my Blogspot website seems that I don't have my own website directory?" Thank you for your question. I've never tried this before. I didn't even know you could do this! After a couple attempts and some research I was able to get it to work.
You need to make FavIcon first, before you do anything else.
http://antworkstudio.blogspot.com/2009/02/put-your-logo-next-to-your-website.html
IMPORTANT: Once your FavIcon is made, you must be able to find it somewhere on the internet via a URL (website address). This is a rule you can't break. Upload your favicon.ico somewhere free and once you have a website address for your FavIcon the rest is some copy/paste code work.
Read over the directions first... and if something doesn't make sense, post a comment.
Your going to need to know how to edit your Google Blogger "Template".
Log into Google Blogger
Click the "Layout" tab
Click "Edit HTML" link
Backup your template before you make changes!
-----
IMPORTANT: Before you begin -- download and backup your template!! You don't want to make a mistake you can't come back from... and it's good practice! Back- UP!!
----
I copy/pasted the code from: http://www.bloggertipsandtricks.com/2008/10/fix-for-missing-favicon.html
Then I made the code my own:
<!-- antworkstudio.com dynamic favicon code -->
<link href='http://www.antworkstudio.com/images/icons/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://www.antworkstudio.com/images/icons/favicon.ico' rel='icon' type='image/gif'/>
<!-- end of antworkstudio.com dynamic favicon code -->
----------
This code must be placed in your Blogger Template.
Look for this code in the template: This isn't at the top of the code... you will need to scan and LOOK for it:
]]></b:skin>
</head>
----------
Find the code and add the FavIcon code from above: (and don't forget to change it)
]]></b:skin>
<!-- antworkstudio.com dynamic favicon code -->
<link href='http://www.antworkstudio.com/images/icons/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://www.antworkstudio.com/images/icons/favicon.ico' rel='icon' type='image/gif'/>
<!-- end of antworkstudio.com dynamic favicon code -->
</head>
----------
DO NOT use the code in the form above! If you do, my FavIcon will show up...
1. Please replace "antworkstudio.com" with your name:
<!-- your name dynamic favicon code -->
<!-- end of your name dynamic favicon code -->
2. Please replace the URL:
(http://www.antworkstudio.com/images/icons/favicon.ico) with the exact internet address where your favicon.ico is located.
-- You must upload your FavIcon to the internet where it will have URL/Web Address. Replace this URL: http://www.antworkstudio.com/images/icons/favicon.ico
with your personal FavIcon URL: http://www.mywebsite.com/favicon.ico
-- I make a new tab in my browser and get the URL of my favicon specifically... then cut and paste this address into my template in antoher tab. Browsers with tabs makes this process easy.
Save your template... click reload/refresh in your browser and see if it worked.
------------------
IMPORTANT: Before you begin -- download and backup your template!! You don't want to make a mistake you can't come back from... and it's good practice!
------------------
None of this works unless your favicon.ico has a location... a URL. You can't store this file on your local computer hoping it will show up. You must get your FavIcon uploaded somewhere where it will have a URL and can be located on the internet consistently.
Oh yeah... if my directions aren't clear... ask questions! I will not be responsible for not knowing enough code, giving a suggestion that doesn't work, not knowing everything in the world, and/or creating a wholesale disaster for you because of my crappy directions. This worked for me... maybe it might for you!
Questions?
~ANT
