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

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.

24 comments:

شات صوتي said...

kotq8 very good

Sandeep Tripathi said...

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

Arpit said...

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

AiresOFwar said...

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.

SMS said...

Great tip..
Thanks AiresOFwar

Delia said...

yeeey! Great hint. Tx.

Doggym said...

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?

AiresOFwar said...

What part are you having problems with?

Admin said...

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

AiresOFwar said...

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.

Anonymous said...

Thanks mate ^^

Shinya said...

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!

Camara Queder said...

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

Shyam said...

Dude, you are awesome! Thank you.

Ashley ✯closetsamples.com✯ said...

Awesome, thanks! Just added one to my site!

Sarah said...

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! :)

Jezebel said...

Thank you, this was very helpful!!!

Jezebel said...

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

AiresOFwar said...

Favicons are 16x16 pixels in size.

Jezebel said...

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!

Jen @ www.brooklynexperiment.com said...

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

Abhay Tripathi said...

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

maryush said...

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

Ms Red said...

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

Post a Comment

Please don't post hyperlinked text within the comment box! It will not be published and you will be marked as spam.

Web Design Blogs PageRank