Tuesday, December 9, 2008

Uploading Favicon to Blogspot Blogs

After visiting hundreds of sites, all with their shiny favicons displaying in your browser's address bar, you decided to use your own favicon in your Blogger/Blogspot blog. You designed and polished it and now what? Here are the steps you should follow:

1. Upload your newly created favicon to a free picture host and take note of the URL.

2. Visit your site and check your HTML source code by pressing CTRL+U (Firefox users).

3. Copy all the code after the opening head [head] tag up to the opening title [title] tag:

[some script]...[/script]
[meta content=...]

4. Back up your template.

5. Go to your dashboard and choose "layout", and then "edit html"

6. Delete this line from your template:

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

7. Paste the previously copied code in step 3 in lieu of the line you deleted in step 6.

8. Change the favicon URL to the one you got in step 1 like this:

[link rel='icon' href='yournewurl/favicon.ico' type='image/x-icon' /]

9. Escape the ampersand twins "&&" in the JavaScript adding "amp;" after each one without the quotes.

10. Save your template. If all goes well, you will see your favicon in the address bar of your browser.

All <> tags have been replaced with [] in this example in order not to confuse Blogger. If you have found this how to useful, design a favicon for me.


WebbieGurl said...

Thanks for sharing this, Buddy! Hopefully I can perform this on weekend or anytime this week when I am not too busy.

Grat job! But why you did not change yours?

Experiments in Cyberspace said...

When it comes to design, it often pays to wait a little bit. I am thinking of a favicon for the site but there is no rush.

Thomas said...

This is a little hard to follow.

Archiver said...

Writing a tutorial or how to is always a difficult task, Thomas. Putting yourself in the shoes of someone who has not edited a template before is tricky. It is like your typing can not get hold of your thoughts. If you wish, drop a message here after you create your favicon and I can try to assist you from then on.

Post a Comment