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.
Related articles
Favicon for your Blogger blog
Add Favicon icon to Blogger URL
How to Add a Favicon to Your WordPress Blog?
7 comments:
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
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.
your blog, lanna, doesnt have a favicon, just an ie big blue e.
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.
Hey good advice. I use SM Favicon Generator. This one works great and its fast.
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?
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.