What is a favicon
Favicon is abbreviation for website icon. If you have not done anything to your blog template, the address bar of your blog may look like what you see below:
The favicon in the screenshot above is the standard Blogger favicon and this will be the favicon for all blogspot.com blogs by default. The favicon below is a photo of myself:
The favicon will also be seen in tabs of web browsers with tab browsing. See the screen shot below:
If you want your own favicon, these are the steps to put your own favicon into a Blogger or any blog.
- Backup your template and backup the Page Elements
- Convert an image file (jpg, png, gif, etc.) into an image with a .ico extension. Google for "free ico generator" or try this one. It is the best I found so far:
Dynamic Favicon for Blogger
All you need to do is to sign up for a free account (I think if you don't want to, this may not even be necessary), click "browse" and select an image from your computer.
Upload, and that generator will not only generate the .ico image for you, at the same time it will host the .ico image on the web and give you the .ico image URL in the same page. In fact, it does better than that. It gives you the code for you to copy-paste into your blog template:
- Go to Dashboard and get into the LAYOUT of the blog you want a favicon for. Click EDIT HTML and look for <head>. Update 29 October 2008: Refer to fix for "missing favicon" for the for the new position to put the script)). Paste the code you get from above and preview. If everything OK, click "Save" and your blog will have a favicon different from the standard Blogger favicon.
102 comments:
Excelent.
Using in: http://leiturawc.blogspot.com
Thanks... this is really cool. Been seeing a lot of blogs with those icon and I was jealous. Glad I had this website on my "favorites" because any blogging problem I have I have this to help me fix them. Thanks again and my best regards.
Thank you! Great post! I was trying to find a service to host my favicon and you showed it to me. Silly Google. Thanks again!
Effective and easy. I had a small query though. Is this cached in some other place as well? I have this add-on for firefox called Google Icon. All search results on Google are displayed with the favicon. The one listed for my blog though ( and almost all blogger accounts actually) is the default blogger favicon. Would you know how to solve this problem? If you're curious to have a look at my favicon. you can check http://glog.kaushikgopal.com/ or http://blog.kaushikgopal.com/. I'm pretty sure the favicons are active when visiting the webpage. But as mentioned, this isn't the case with what's being archived i think.
(Apologies:repost, but i forgot to check the follow-up comments email post)
A small request, I have changed my favicon and it seems to successfully display it as well. But when i use the firefox add-on "Google icon", In the search results displayed, it still shows up as the blogger default icon. Is this because of the root host definition thing ? I host my blog with blogger but publish it with my own domain name. Have a look at http://glog.kaushikgopal.com/ and http://blog.kaushikgopal.com/, if you can find the time. Cheers and keep up the great work
Hi Japol,
If I understand you correctly, you are referring to the text displayed in search engines' results. You have to add meta tags, but please do not take me as an expert. Perhaps you should refine your question and ask them at Blogger Help. Do let us know if you get your problem solved.
hmm thanks peter, will post the question on blogger help and let you know how it goes.
Hi Peter..
thank you so much for all your help in mavigating around blogging!
Your website is truly invaluable especially to a new person like me!!
Hi Peter,
Just tried adding the favicon to my blog and it worked. thank you so much (",)
Thank you so much!!! I spent quite a while trying to figure this one out (had an .ico file, just couldn't get it to show up). Your page is the only one I found that (a) made it easy to understand and (b) didn't try to get money for the info. You rock!
You rock, thanks!
http://thehousethatkoenclairerebuilt.blogspot.com
A very good tip. Just what we wanted. I wish I could increase your vote or digg count.....I couldn't find anything I can ......
Okay, I swear I'm not stupid. I went to the site and created an account. I uploaded my image. I did everything. Now I want to download the favicon like you said, and I cannot find anywhere that i can click or access or whatever to download anything. Please help me. I am using Firefox but I guess I could also go onto IE and do it there.
I finally found out how to download my icon, by choosing to "share my icon" publicly. Now, though, there is NO dialog box with any html code, no place where I can copy or paste anything.
Any help?
Hi Texan Mom,
I just tried uploading and the steps as well as how to get the codes to paste into the template is exactly the same as in the instructions in this post. There is no need to share - upload, then get the codes from the following page just as shown in the screen shots.
HI Peter. Well, I am trying but still no luck. I have gotten to the page that says, "Upload Image to generate the favicon." I did that and it is saved. But NO WHERE is there a place that tells me it generated an html code. I have clicked around everywhere. Please, just treat me like I'm an idiot and walk me through it. I'm using Firefox, is that the problem? THis is NOT easy, as was suggested by the Blogging-for-dummies people.
Okay, finally got it. There is a tab on the left, under "my account" that says "My Dynamic Favicon Code". I didn't see it, and didn't know to go there to get it. I'm surprised I didn't see it before.
But anyway, I have it now so you don't need to reply. Thanks anyway.
Hi, I am probably the biggest blogging dummie.. I tried the favicon thing, copied and pasted and it isn't working.. I can't understand what I have done wrong?
Perfect! Thanks for the advice... I put my favicon on my primary website, but couldn't--or actually--had not put it on my blog yet...
Thanks! It works great!
~Bobby Ozuna
Drawing Stories...With Words
Thanks so much for the instructions- it worked great!
This is awesome! I have been trying to figure out how to do this. I gave you a Digg and Stumble. Good stuff.
I also gave you props at Eazy Cheezy. I'm sure many of my readers would love to know how to do this.
http://www.eazycheezy.net/2008/10/add-image-favicon-next-to-your-blogger.html
Hi Brian,
Thanks for the link, Digg and Stumble. Greatly appreciated.
BTW when you leave a URL in a comment, it is advisable to make it an active (clickable) link. In your comment above, the URL has ended up as a long line. I am viewing it with the new Google Chrome and the long URL was word wrapped to 2 lines, but in other browsers, it may end up as a single long unbroken line which may cause problems. Making it into an active (clickable) link will avoid this problem.
Thank you sooo much!
This actually made sense, and was really easy.. Thanks again, you're a star!
Thank you sooo much!
This actually made sense, and was really easy.. Thanks again, you're a star!
OK. This is weird.
I DID all of this a few weeks ago, and it worked like a charm.
Then, a day or two ago, I was looking at possibly changing my layout template, and clicked a few to sample.
However, deciding that I liked what I already had, I went back to it.
After that, my favicon is gone and no matter what I do (even re-uploading and pasting the html code after the 'head' it doesn't work any longer.
Am I forgetting to check a tab or something?
Thanks
http://www.sanctumsanctorumcomix.blogspot.com/
Hmm... my comment from a few moments ago seems to have vanished into the ether.
I'll repost (if this is a duplicate, please delete one)
Anyway... I need help.
I DID all of these steps - SUCCESSFULLY - a week or so ago. Favicon showed up and was awesome.
Then, a day or two ago, I was toying around with the template selections (the basic ones, nothing fancy) to see if I might want to change them.
However, after previewing them I went back to what I had.
Then, I noticed that the favicon was gone.
So, I went back in a pasted my favicon html in the "edit html" field (after "head") and still... NADA.
I re-uploaded the icon again, got NEW html and swapped it for the old one. Still nada.
Am I forgetting to save a toggle selection or something?
Please help.
I love my favicon and want it back.
The next thing I'll try is to paste back the backed-up html for the template (that I did the 1st time around) and then redo the favicon html), but wanted to check in with you before I did that.
Thanks.
http://www.sanctumsanctorumcomix.blogspot.com/
This is the second time it happened to me. The first time Philippine favicon host went bust (offline). This time I checked and my favicon is still online.
I did a little bit more digging and found that disappearing favicon is quite common. Hope to get the time to do more digging.
Thanks for the reply Peter (I'm Peter, too).
Hmmm... could YOURS still be online, since you signed up for an "account"?
I didn't, so maybe mine is "low-priority" on their servers.
I might sign-up and see if THAT works.
I just hate having so many "accounts" all over the place.
Perhaps, I could host the icon myself.
I have my own web-site and storage space for the ico image file.
What would I need to do for THAT process?
Any info would be great!
Thanks!
~P~
Peter
Blogger appears to have disabled the traditional personal favicon code.
this link worked for me
FAVICON FIX
the link has fixes for both old blogger and blogger beta. for the record I am on old blogger, so i have not tried the blogger beta fix.
Hi,
Since today, my custom favicon does not show up anymore.
(It worked before like a charm.)
In stead, the default blogger icon is back. Have a look:
http://iphone-tips-tricks.blogspot.com/
I checked my blogtemplate and the code is still there:
link href='http://www.iconj.com/ico/y/g/ygruvh3yqw.ico' rel='shortcut icon'/
And the icon is still there
http://www.iconj.com/ico/y/g/ygruvh3yqw.ico
Anyone idea?
@Peter Chan, your blog content is great! Hats off, I learned a lot here. Thanks!
My favicon doesn't show up anymore - this week it no longer displays on my blog. It was there for most of the year, but now it's gone. The orange B is there instead.
The image file is still where it supposed to be. Yep - nothing changed on the code and it still meets the "trick". Did Blogger kill the favicon feature? I don't see them on anyone's Blogger blog anymore.
For a fix, refer to fix for "missing" icon.
Note that however, I am trying to get a fix for the favicon to appear in Internet Explorer as well.
Hi Swimray,
I am afraid I cannot approve your second comment as it contains a long inactive (unclickable) URL which will become a long unbroken line which can cause problems. I would suggest next time use active clickable link in comments
Hey folks, after reading a bit on the problem and looking at blogger code, I found the following that fixes the missing icon that many of us just experienced.
The tag for your faviocn has to be moved to a new location in the html code, somewhere AfTER where Blgoger now inserts its own favicon. See this on the Blogger for Dummies site:
fix
Thanks for the updated post with the FIX (dated Oct. 29, 2008).
I just tried it (moving the html code to just before the -end head- and it works!
Thanks!
~P~
Thanks for all your tips! I went to the FavIcon Labs and uploaded my icon - then used their short html and pasted it right below the < head> in my layout and it worked!
Now off to do my other blogs!
THANKS!
:) Mags
magsgraphics.blogspot.com & everydayplaces.blogspot.com
Yours blog is a blog with good content.
Your Niche is good and could bring you more readership. It could be used for Niche Building.
Try looking for ways to monetize your blog too. You can do paid reviews for advertisers.
This will let you earn money to blog.
A unique way of earning in your free time writing your favourite blog offered by BlogCytes
It is just my suggestion as i find good potential in your blog.
Good Luck !!!
Thanks so much! That's such a neat addition to my blog. I'm going to keep reading your tips for more upgrades :).
Hi! Do you have some fix about this... Mine is NO longer Working I'm using this --- [link href='http://www.iconj.com/ico/g/6/g6smmiygt9.ico' rel='shortcut icon' type='image/x-icon'/]
I worked before, but now, its no longer.... I don't think the blogger has updated it's code yet... but please... fix this :D thanks
Hi Thesabel,
Please refer to fix for "missing" favicon.
One more thing. You are trying to make a link active by using BBCode which cannot used for comments for Blogger. Please also refer to active hyperlinks for posts and comments
yeah, thanks for the help! it works now. :D
Hi
This is very interesting.
Excellent job..
Thankx for giving this link..
i've added in my Blog pl check it out
www.oikonomya.blogspot.com
Hi Peter,
I hope im not dumb or anything, but i cant seemed to make this work, despite your most most helpful and kind help.
part of my code goes like this
]]>{/b:skin}
{link rel="shortcut icon" href="http://www.iconj.com/ico/d/s/dshzmearpu.ico" /}
{/head}
{body}
NOTE :
'{' equates to '<'
'}' equates to '>'
i can just preview (instead of save template) to check right? I tried both anyways.
Please kindly help! I tried all day!
Wow!
Thanks, it helps me :)
-Maria-
Fantastic!! It works with one try. Thanks!
http://vontinyheaven.blogspot.com
u rock! thanks for this simplified and excellent post sir! i got my own favicon ! http://rajeshmoganti.blogspot.com
thanks.
i am using http://www.livejobsin.com/
Thank you so much! I had generated a flavicon, but Photobucket wont host the .ico files.... so I searched for "where to host .ico" and found your article.
The generator you reccomend is Awesome!!!! I linked to your blog entry a forum for on-line store owners. Now Im gonna check out some of your other articles.
Thanks again!
Cindy
thanx for this post !
Thanks!
Thanks man for your help without your helpfulness i will be know where haha :) Visit my blog and see what logo i put for my website and also my articles that i've post. Plz do comment ya thanka :)
I have whitemencanblog.com but I still can get the codes to work why is it? I am following the right directions someone please help me =(
Are you using Internet Explorer 6? This will not work for IE6. Also note the update in fix for missing favicon
Thanks!! This is the first post I found that actually helped me figure out the whole picture of what to do.
hi,
the favicon vanishes ehen the commennt form is loaded,even here in ur blogg.
any solution?
anil@blog
Once the comment form is loaded, the browser is directed to:
https://www.blogger.com/comment...
which is Blogger's domain and therefore not under our control, so you can't put your own favicon at the comment form.
Thanks.
anil@blog
I think this has stopped working, or is it just my sites ?
Refer to fix for missing favicon
Great! Keep posting useful tips!
Best regards!
http://ffrederick.blogspot.com
This is awesome! I have been trying to figure out how to do this. I gave you a Digg and Stumble. Good stuff. Whenever you need to upload/host/share for free graphic files, you can use http://www.my-image-host.com
Thank you.
thanks
Awsome blog with the best of the finds and implementations...
keep going man !
God Bless !
change your blogsopt icon using this web http://www.iconj.com . easy to use just upload your pic. see my site www.wries.com or http://susanalo-web.blogspot.com
Awesome, it works! tanks a lot :)
nice way to explain :)
i used it in my blog :
brb11.blogspot.com
Just wanted to give a big THANKS for this favicon tip! Love your site.
-Celeste
Thank you, thank you, thank you! It worked! :)
Thanks for making it so clear.I found a tutorial easy to follow and the pictures really helped.
rossie_jordan@yahoo.com
Thanx! I had also troubles to find a service to host the favicon. After lots of other tries finally an easy solution :-)
Thanks for the info. I changed my favicon and it looked great. Then blogger changed it and it defalted the the IE blue E. So I followed your intructions on how to correct that (the fix for the missing favicon) and I don't know what I did wrong. Now both my blogs have the yellow/green J from that website? (the favicon generator site) http://www.iconj.com/icon_generator.php
Any ideas how I can fix that?
TIA
What is the favicon URL you used?
I used the one they provided me when I generated one of my photo from my browser. at http://www.iconj.com Then I read they were having hardware failure. Is that what you meant? Sorry I'm still not all that comfortable with all this.
I read that on their website, but my favicon for this blog is still visible in Firefox. Perhaps it didn't affect all files.
Perhaps it is time to look into using Google sites for hosting favicon.
Thanks... this is really cool. Been seeing a lot of blogs with those icon and I was jealous.
Hosting
Thanks so much for the tips. I am new to blogging and almost pc illiterate. I was trying to use fileden and just couldn't get the code they gave me to work. Have no idea what the real problem was, but figured I'd give your advice a shot and what do ya know?! It worked. Thanks so much. This was tressing me out! :)
thanx...
it helps me alot
it worked with mozilla firefox but it didn't work with google chrome. i need help. please. thank u :)
Right now, I am using Chrome and looking at the tabs which has my handsome face (I used my photo for the favicon for my blogs).
It is usually Internet Explorer that have problems displaying our favicons, not Chrome.
I am still very new to the blog thing and still trying to figure it all out. :)I really appreciate the information and how easy you made it all seem. Thanks so much! Take care everyone and have a great night!
http://pumpkinbuttkittyfantasticfinds.blogspot.com/
thanks for sharing this with the rest of us.
Excllent post on How to change icon helped me alot for my site http://www.jigneshbapna.com/
Thanks a ton
Lord have mercy, it worked!!! Thanks so much. I followed the icon generation instructions here, and then pasted the generated code directly above the closing "head" entry in Blogger. It worked INSTANTLY.
Oh My Goodness!!! I have tried this so many different ways and your method worked!! I am so excited! Thank you for your well laid out instructions.
Hi,
thanks for explaining how to do this....
it worked!
using it: http://rycks.blogspot.com
Its working with Chrome.
Thanks for this lovely post, now my blog looks branded.
Thsnks really helpful for me
nice work man...
Wow!! it worked. Thanks Peter!
Thanks! Big help!!!!
Many thanks,it FINALLY worked! Have a fantastic year!
Again thanks for the update to the favicon post nice find matey. Weird Ben
Hi!
Thanks so much!
This post was a loads of help!
:D
Tere B
http://terebol.blogspot.com/
Thank you mate, legendary help there. Cheers!
Woah thanks! It worked on my site!
tq soooo much!excelent blog post~^^step by step u shown it how it works!thx~<3
Just two steps to create a very high quality favicon.
1. Design your favicon image using your very favorite image editor - either Photoshop or MS Paint, or anything. Let the image be in 100x100 pixels size.
2. Browse to http://www.consultsarath.com/#!/favicon/ and upload your image, there you get you great favicon.
Please share the link if you find I am true.
Your site has been a big help to me. THANK YOU!
Post a Comment