HOME | ABOUT | CONTACT |

Search

Custom Search

Saturday, June 21, 2008

How to Add a Favicon to Your New Blogger?

What is a favicon? Well, it stands for a favorite icon. It is normally a 16x16 pixels or 32x32 pixels icon that appears next to your URL (web address) of your web browser. Most people prefer to use 16x16 pixels icon. Adding a favicon to you blog/website will no doubt distinguish your blog/website from the millions of other blogs. I've already created one for my WordPress blog. I was wondering how I could get one for my New Blogger blog here. The steps below are showing you how I've created mine on this blog:

  • To add a favicon to your blog/website, you need to have your picture(s) ready on you PC (personal computer). If you don't have one, then you can create your own by using Paint or Photoshop program; or you can create one here from Favicon Generator; then save it to your PC as favicon.ico.
  • If you have your picture(s) ready on your PC, then upload it to FavIcon from Pics; choose either 16x16 pixels or 32x32 pixels; you can preview your favicon on that site. If you are satisfied, then download it to your PC as favicon.ico.
  • Once you have your favicon.ico ready on your PC, you need to upload it to your website's root directory.
  • Since you know you don't have access to your server if you are using Google Blogger, so what can you do now?
  • The solution is to find a third party image hosting to host your favicon.ico. Be aware that most of the Free image hostings don't support .ico format. Still you can find one that supports it. Here is a free image hosting that supports this image format.
  • Once you find one to host your images/pictures; get the link and come back to Blogger Dashboard.
  • Click on Layout/Edit HTML, find <head> line in the HTML editor; it should be at the beginning of the template.
  • Then insert <link href='URL your icon file' rel='shortcut icon' type='image/favicon.ico'/> right after <head> line, where URL your icon file is the link you've got from your third party image host.
  • Save your template and refresh you blog/website to observe the favicon.
It should appear next to your URL in the address bar of your web browser. Any questions? Ask in comments.

Related articles
Favicon for your Blogger blog
Add Favicon icon to Blogger URL
How to Add a Favicon to Your WordPress Blog?

7 comments:

Sufi Meditation said...

Sorry this does not work.

I have tried 4 now on new blogger and all that happens is the B changes to a world icon.

Can anyone who knows how to properly add a favicon (animated better) in Blogger please come to the resuce?

thanks

Zahid

Lanna said...

Hi sufi meditation,
It works for me. Cannot figure out why it did not work for you. :(

I just created a picture image using
FavIcon from Pics a moment ago. As you can see it showed up next to my url. It really should work if you follow this tutorial. Make sure just get the link from the third party hosting and nothing else. Check out my source code to see how I did it.

Anonymous said...

your blog, lanna, doesnt have a favicon, just an ie big blue e.

Lanna said...

Hi Anonymous;

Thanks for visiting.

May I ask in what browser did you see a big blue e? I use Mozilla Firefox and Internet Explorer. I can view LW'S Blog icon on these two browsers.

Sam said...

Hey good advice. I use SM Favicon Generator. This one works great and its fast.

Anonymous said...

Hi Lanna, I got 7 links of my favicon from TubeImage.com. Maybe this is a stupid question but which link do I have to paste into my Blogger layout?

Lanna said...

Thanks for visiting!

There is no such question labeled as "stupid question". All of us learn from some point. So don't feel bad to ask.

As for the 7 links of your favicon from Tube Image, you just need to copy and paste a portion of the url (http://tubeimage.com/files/fcr7iup1jhuk2lpuz9wt.ico) from <a href="http://tubeimage.com/"><img src="http://tubeimage.com/files/fcr7iup1jhuk2lpuz9wt.ico" border="0" alt="TubeImage.com" /></a> to your Blogger and save it.

The above one is the case for me, you need to copy and paste your own code you've got from Tube Image. Let me it works out for you or not.

Post a Comment

Search

Custom Search