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.</head>
<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'/>
<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.
<link href='http://matrixanimes.webs.com/favicon(3).ico' rel='shortcut icon'/>
<link href='http://matrixanimes.webs.com/favicon(3).ico' rel='icon'/>
</head>
24 comments:
kotq8 very good
I have favicon, but it doesn't appear in Chrome and Opera.
If this really works, why isn't there a fevicon on ur blog???!!!
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.
Great tip..
Thanks AiresOFwar
yeeey! Great hint. Tx.
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?
What part are you having problems with?
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
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.
Thanks mate ^^
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!
OMG I did it! I can't see it in Safari, but in Firefox it's there. Thank you so much.
Dude, you are awesome! Thank you.
Awesome, thanks! Just added one to my site!
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! :)
Thank you, this was very helpful!!!
Also, if I wanted to custom make my own, do you know the standard size for a favicon?
Favicons are 16x16 pixels in size.
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!
I tried so many different codes and this one was the only one that worked. Thanks so much!
I've just started my blog and your website really helped me making it look more professional.
Thank you so much !
Thanks for the tip. Couldn't get my blog to display the favicon I made. Now with your code it works perfect.
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.