Sunday, June 15, 2008

Favicon generator and free .ico image host: Favicon for your blog

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:

Blogger standard favicon

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:

Peter Chen favicon

The favicon will also be seen in tabs of web browsers with tab browsing. See the screen shot below:

Peter Chen favicon in tab

If you want your own favicon, these are the steps to put your own favicon into a Blogger or any blog.

  1. Backup your template and backup the Page Elements

  2. 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.

    Favicon .ico and code generator

    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:

    favicon generator

  3. 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:

Escrivão said...

Excelent.

Using in: http://leiturawc.blogspot.com

japol said...

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.

Ben said...

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!

Kaushik said...

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.

Kaushik said...

(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

Peter said...

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.

Kaushik said...

hmm thanks peter, will post the question on blogger help and let you know how it goes.

Liz said...

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

Shirley Lim said...

Hi Peter,
Just tried adding the favicon to my blog and it worked. thank you so much (",)

Un1K3n said...

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!

Claire said...

You rock, thanks!

http://thehousethatkoenclairerebuilt.blogspot.com

Ashwyn said...

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 ......

Texan Mama @ Who Put Me In Charge said...

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.

Texan Mama @ Who Put Me In Charge said...

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?

Peter said...

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.

Texan Mama @ Who Put Me In Charge said...

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.

Texan Mama @ Who Put Me In Charge said...

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.

getting there said...

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?

Bobby Ozuna said...

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

Sasha said...

Thanks so much for the instructions- it worked great!

Brian said...

This is awesome! I have been trying to figure out how to do this. I gave you a Digg and Stumble. Good stuff.

Brian said...

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

Peter said...

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.

baharemadinah.com said...

Thank you sooo much!

This actually made sense, and was really easy.. Thanks again, you're a star!

baharemadinah.com said...

Thank you sooo much!

This actually made sense, and was really easy.. Thanks again, you're a star!

~P~ said...

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/

~P~ said...

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/

Peter said...

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.

~P~ said...

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

The Professor said...

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.

Waku_Waku said...

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!

Swimray said...

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.

Peter said...

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.

Peter said...

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

Swimray said...

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

~P~ said...

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~

Mags said...

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

"D" said...

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

MamaBearMary said...

Thanks so much! That's such a neat addition to my blog. I'm going to keep reading your tips for more upgrades :).

Thesabel Tuto said...

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

Peter said...

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

Thesabel Tuto said...

yeah, thanks for the help! it works now. :D

Vignesh & Sundaram said...

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

9th Disciple said...

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!

red104 said...

Wow!
Thanks, it helps me :)

-Maria-

vontinyheaven said...

Fantastic!! It works with one try. Thanks!

http://vontinyheaven.blogspot.com

rajesh moganti said...

u rock! thanks for this simplified and excellent post sir! i got my own favicon ! http://rajeshmoganti.blogspot.com

Incide Effo said...

thanks.

i am using http://www.livejobsin.com/

Cindy - www.GirlsHorseClothes.com said...

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

Sp2ks said...

thanx for this post !

Brion Hopkins said...

Thanks!

Faiz-Hamdan said...

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

Sidney Deane said...

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 =(

Peter @ Enviroman said...

Are you using Internet Explorer 6? This will not work for IE6. Also note the update in fix for missing favicon

Lezzymom said...

Thanks!! This is the first post I found that actually helped me figure out the whole picture of what to do.

അനില്‍@ബ്ലോഗ് said...

hi,
the favicon vanishes ehen the commennt form is loaded,even here in ur blogg.
any solution?

anil@blog

Peter @ Enviroman said...

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.

അനില്‍@ബ്ലോഗ് said...

Thanks.
anil@blog

Skinski said...

I think this has stopped working, or is it just my sites ?

Peter @ Enviroman said...

Refer to fix for missing favicon

Polo said...

Great! Keep posting useful tips!
Best regards!

http://ffrederick.blogspot.com

cristidotcom said...

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

Peter @ Enviroman said...

Thank you.

M.J said...

thanks

IS Admin said...

Awsome blog with the best of the finds and implementations...
keep going man !
God Bless !

alopbipolop said...

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

Mr. PT said...

Awesome, it works! tanks a lot :)

RashBash said...

nice way to explain :)
i used it in my blog :
brb11.blogspot.com

shallowOcity said...

Just wanted to give a big THANKS for this favicon tip! Love your site.

-Celeste

girlichef said...

Thank you, thank you, thank you! It worked! :)

Angeline said...

Thanks for making it so clear.I found a tutorial easy to follow and the pictures really helped.
rossie_jordan@yahoo.com

Minu said...

Thanx! I had also troubles to find a service to host the favicon. After lots of other tries finally an easy solution :-)

Lyndsey said...

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

Peter @ Enviroman said...

What is the favicon URL you used?

Lyndsey said...

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.

Peter @ Enviroman said...

I read that on their website, but my favicon for this blog is still visible in Firefox. Perhaps it didn't affect all files.

Peter @ Enviroman said...

Perhaps it is time to look into using Google sites for hosting favicon.

Peter Kesel said...

Thanks... this is really cool. Been seeing a lot of blogs with those icon and I was jealous.
Hosting

Richelle said...

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

pawan said...

thanx...
it helps me alot

Siti said...

it worked with mozilla firefox but it didn't work with google chrome. i need help. please. thank u :)

Peter @ Enviroman said...

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.

PumpkinButtKitty said...

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/

ewenique said...

thanks for sharing this with the rest of us.

jignesh said...

Excllent post on How to change icon helped me alot for my site http://www.jigneshbapna.com/


Thanks a ton

Lorene said...

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.

Creative Flair said...

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.

Rycks said...

Hi,

thanks for explaining how to do this....
it worked!

using it: http://rycks.blogspot.com

Admin said...

Its working with Chrome.

menvinay said...

Thanks for this lovely post, now my blog looks branded.

technicalhut said...

Thsnks really helpful for me

lensfire.tk said...

nice work man...

Malchat said...

Wow!! it worked. Thanks Peter!

Теодора Трповска said...

Thanks! Big help!!!!

Helga DaFonseca said...

Many thanks,it FINALLY worked! Have a fantastic year!

Weird Ben said...

Again thanks for the update to the favicon post nice find matey. Weird Ben

terebol said...

Hi!

Thanks so much!
This post was a loads of help!

:D
Tere B
http://terebol.blogspot.com/

Sam Nelley said...

Thank you mate, legendary help there. Cheers!

cHrIstInA_YY said...

Woah thanks! It worked on my site!

n'Cole妮可 said...

tq soooo much!excelent blog post~^^step by step u shown it how it works!thx~<3

Sarath said...

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.

venus flytrapp said...

Your site has been a big help to me. THANK YOU!