Translate This Blog
Always Remember To Back Up Your Template Before Attempting Any Of The Tweaks On This Site

Do to error codes you should use the old interface when attempting many of these tweaks to your template

Custom Favicon on Blogger

Favicon is the icon you see on most browsers URL box. You can make your own favicon and get rid of that big orange B for good.

First thing you will need to do is to make your favicon. You may want to use paint or photoshop either one will work great. You can also use one of the many online tools.

If you choose to use paint or photoshop you will need to upload your image onto one of the online favicon generators in order to change the extension to .ico. The reason you want to change it to .ico is so the code below displays it correctly in IE and Google Chrome. Firefox will  display the favicon in just about any format. But IE and GC are a little more strict and need to be .ico  format file. So after you upload it to the generator, you will want to download the .ico image it gives you.

The problems you will face now is that almost no upload sites support .ico format flies. So the solution I found to this is to make  www.webs.com account. Upload the  favicon as a file to the your webs site.

Now you will need to go to your Blogger Dashboard. From the Dashboard go to Design  then Edit HTML.
You will need to find (Ctrl+F) this code below in your template HTML code.

</head>
Once you have found the head tag in the HTML, paste this following code just above it.

<link href='YOUR WEBS ICON IMAGE' rel='shortcut icon' type='/icon/ico/index.html' />
<link href='YOUR WEBS ICON IMAGE' rel='shortcut icon'/>
<link href='YOUR WEBS ICON IMAGE' rel='icon'/>

Now go back to the window with your webs site opened and right click on the favicon file you uploaded. Then replace the red text above with the image link you just copied.

Example:
<link href='http://matrixanimes.webs.com/favicon(3).ico' rel='shortcut icon' type='/icon/ico/index.html'/>
<link href='http://matrixanimes.webs.com/favicon(3).ico' rel='shortcut icon'/>
<link href='http://matrixanimes.webs.com/favicon(3).ico' rel='icon'/>
</head>
Remember your uploading the icon image to .webs site as a file not a photo.

26 comments:

  1. I have favicon, but it doesn't appear in Chrome and Opera.

    ReplyDelete
  2. If this really works, why isn't there a fevicon on ur blog???!!!

    ReplyDelete
  3. There is a favicon on this blog. However depending on your browser you may not see it. As sanddeep said it does not appear in some browser because they do not read favicons. Chrome has a default favicon as a globe for all sites.

    ReplyDelete
  4. Great tip..
    Thanks AiresOFwar

    ReplyDelete
  5. i don't really get it... can you explain it in a way that a person like me who's not really good with computers would get it?

    ReplyDelete
  6. What part are you having problems with?

    ReplyDelete
  7. i have done all this but when the page loads , i get blogger favicon first flashed then my favicon..whts the problem? www.puresoftwares.blogspot.com

    ReplyDelete
  8. It looks like you modified the code from what I have above. Also your blog template is very unique with all that JavaScript in it. The JavaScript might be lagging the loading process of the favicon.

    ReplyDelete
  9. Thanks mate ^^

    ReplyDelete
  10. I just want to take time here to say thank you! You don't understand how long I looked around for this. Every other sites failed to mention the .ico files. Now it works sweet in Safari, Chrome, and Firefox!

    ReplyDelete
  11. OMG I did it! I can't see it in Safari, but in Firefox it's there. Thank you so much.

    ReplyDelete
  12. Dude, you are awesome! Thank you.

    ReplyDelete
  13. Awesome, thanks! Just added one to my site!

    ReplyDelete
  14. THANK YOU SO MUCH!!!!
    I tried several different file hosting sites for my .ico file - and none of them worked.
    I finally went searching for yet another solution and ran across your posting on the Blogger help.

    I'm so excited! :)

    ReplyDelete
  15. Thank you, this was very helpful!!!

    ReplyDelete
  16. Also, if I wanted to custom make my own, do you know the standard size for a favicon?

    ReplyDelete
  17. Favicons are 16x16 pixels in size.

    ReplyDelete
  18. Thanks SO much! I made a custom one for now, I'll make a better one later, but this is awesome! I greatly appreciate it!

    ReplyDelete
  19. I tried so many different codes and this one was the only one that worked. Thanks so much!

    ReplyDelete
  20. I've just started my blog and your website really helped me making it look more professional.
    Thank you so much !

    ReplyDelete
  21. Thanks for the tip. Couldn't get my blog to display the favicon I made. Now with your code it works perfect.

    ReplyDelete
  22. I hosted my ico file here http://www.iconj.com/index.php and it gives you the full code to copy and paste just before the {/head} part.... easy. Thanks

    ReplyDelete
  23. I did this & it works fine as long as .blogspot is included in the url, but on the custom domain w/o .blogspot it's gone. Tried both in Firefox and IE.

    ReplyDelete
  24. Sounds like your uploading to Google Doc's which will only work on a Google domain (.blogspot)

    ReplyDelete

Web Design Blogs PageRank