Favicons are a very useful method of branding your blog with your personal style, and are a useful recognition tool for your readers to identify your blog. If you are reading Blogger Buster in Firefox (or have bookmarked my site in IE) you will see an example of a favicon in the left hand corner of your address bar.
A while back, I wrote a post explaining how to replace the default Blogger favicon with your own. But since then, I've discovered an even easier method you could use to upload a favicon to your blog - you don't even need external image hosting to achieve this!
For general use, there are two different methods you could use to enable favicons for your blog:
- Upload your favicon (favicon.ico) to the root of your web host
- Call your favicon explicitly in the head section of your blog template.
However, those of us who host our blogs with Blogger do not have access to the root of our hosting account. So unless we enable a favicon by adding code to our blog template, the default orange Blogger icon will display instead.
In my previous post about favicons, I explained that you would need to upload your favicon image (with the .ico extension) to an external hosting account.
This method may have been problematic for those of you who don't have access to an external hosting account which supports the icon file type (Photobucket, Picassa and other free image hosts do not support this).
But guess what: you can use a different image file type (such as PNG, GIF or even JPG) for your favicon. What's more, you can even upload this to Blogger (for example, in the body of a post) which negates the need for any external hosting whatsoever!
To make it even easier for you to use a favicon ion your Blogger powered blog, I have reconfigured the Favicon Generator which you can find in the Tools section of this site to output favicons as PNG files rather than icons (with the .ico extension).
Here is how to enable a favicon for your Blogger powered blog in a few easy steps
- Ensure you have a copy of your blog logo (or another image you would like to use as a favicon). This should be in JPG format for use with the Favicon generator.
- Go to the Favicon Generator page, and upload your image, then click on "Create Favicon". After a second or so, the page will reload and you will see your newly generated icon appear in the box.
- Right click on your icon and choose "Save Image As...". This icon will be in PNG format, and you can rename this anything you wish. Save the icon to a convenient location on your computer.
- Next, go to your Blogger dashboard and create a new page. Upload your icon as an image in the post. If you do not already edit your posts in Edit HTML format, click on this tab and copy the URL of your image from the HTML code. The URL for your uploaded image will appear like this in your post's HTML code:
You need to save this post (albeit temporarily) so it would be advisable to backdate this post, then it will not be confusing for visitors who wonder why you are posting such a small image in your blog! - Finally, go to Layout>Edit HTML in your Blogger dashboard. Just before the closing </head> tag, paste the following section of code:
<link href='http://your-icon-url.png' rel='shortcut icon'/>
Be sure to replace the URLs in red with the URL you copied from your post.
<link href='http://your-icon-url.png' rel='icon'/> - Finally, save your template. Your new favicon will now appear in the address bar!
Note: if you use Internet Explorer, the favicon will not appear unless you have bookmarked your blog and refreshed your browser.
If you would prefer to upload your PNG icon to a different image host, you the method is almost exactly the same, except that the URL you will use to enable the favicon should match that where your PNG image is hosted.
Need Inspiration for your Favicon Design?
Here are some excellent showcases of favicons to inspire you in creating your own unique branded icon:
- Favicon Gallery (By favicon.co.uk)
- 50 Remarkable Favicons (by Smashing Magazine)
- The Favicon Gallery
- MpP Favicon Gallery
- Favicon Gallery (By HTML Kit)
- Download Free Favicon Packs (from Clickfore.com)
I hope this post has helped you to enable your own customized favicon on your Blogger powered blog.
If you've enjoyed this article, please subscribe for updates of future Blogger related articles.
117 Comments:
Hi Amanda, thank you for this great tutorial. I did everything you mentioned and all that comes up for my favicon is a white icon. This happened both in IE and Firefox. Not sure what happened.
Hello Mudiva,
I just checked the source code for your page and noticed a couple of slight errors which may be causing this to happen.
The first line starts like this:
<link href='http:bp3...
When it should read:
<link href='http://bp3...
The second line misses the http:// part from the URL altogether.
If you can just fix these two errors with the URLs to your favicon, it should display just fine (although you may need to refresh your browser to see the difference!).
Hope this helps! Send me an email if you still have problems and I'll test the code properly in a test blog for you.
Best wishes,
Amanda
Thank you so much! I did change it and my favicon shows up in Firefox but not in IE. I did bookmark and refreshed and still no Favicon. Any ideas?
Thanks again, you are awesome!
Thank you, thank you, thank you. I love it! You always have great stuff but this is something that I have been wanting to do for a long time and have been too lazy. This was so easy.
great idea. keeping the .ico file on your own blog. thank you for sharing. worked perfectly for me.
Thanks very much - extremely clear instructions and it worked first time, just what a ten-thumbs like myself needed...
Hmm, can't seem to get it to work. What am I doing wrong?
Gosh so easy that will do while i make a decent one thanks.
Thanks for the tip. I had tried an .ico file uploaded to Google Page Creator, but that just gave me the GPC favicon. I used the .png format there and it worked great! (It didn't work properly from uploading to a post in my blog, however.)
Hi Amanda,
My template could not be saved because 'not properly parsed' and 'expecting attribute (1)'.
This is the url I pasted into your code(replacing the red) and which I then placed the whole thing just before the last head tag in the template html:
http://www.healingphilosophy.com/2008/05/logo.png
Can you see what the problem is?
I also tried it with '...logo.html.png' and same thing.
I tried pasting the whole code here but it won't send (it says html cannot be accepted:tag is broken)
Thanks for your help!
Alex
hi amanda, thanks a lot! this is really very easy! thanks for making this tutorial!
I used it and it works!
Um I've been working on this for about 2 hours tried all kinds of things and still can not get it to work?
Hi Amanda,
im reading your section about favicons,i wanted to make one long time ago,but to make new blog cause of it:(
Didnt want to do that....
From your post,ive realised that i need some kind of web library for icon files, and ive find one :
www.franksicons.com
Making your account is extremely simple,and after u make your icon,by clicking on propertis,u will get adress that u can use in your blog.
I find that to be much more simple :)
try,and let me know what do u think
:)
Your advices are amazing as always,im just sharing as well :)
kind regards,
Luka
I don't know exactly what the deal is or anything like that but I can't make my own little favicon show and quite frankly I don't see others' who have used this method of doing it. I've seen it in their source code but still... I don't know. Could there be a bug in the code or something like that?
this was an excellent post, and it worked great...in firefox. but it doesn't show up in internet explorer, should it be doing so?
You're a Genius! Thanks.
Hi Amanda,
I did everything you said. I checked 5 times, i went back and re-did it twice and my favicon won't show up in either IE or Firefox. Can you pleasee help?
Many thanks
Bliss
I wanted say, Great thanks ^^
i just uploaded my favicon at mellonzine.blogspot.com
thanks thanks thanks ^^!
Hi Amand,
Thanks again for a great work around! I could not get the generator to work. Instead I created an 32X32 pixels image in Paint shop. uploaded it as jpg and followed the steps you illustrated. Check out my uploaded icon at threemangoes.blogspot.com
Thanks much again
Amanda,
Worked for me even though I had to do it with a baby sleeping in my lap! Easy peasy. I generated my jpg in MS Power Point so I could get just the font I wanted.
I even gave you some bloggy love here - http://www.familymusings.com/2008/07/blog-post.html
Me again! I got inspired and also changed the little graphic next to my post titles from the lighthouse (I use the harbor template) to my new flavicon. I just looked for that .gif file in my post section and replaced the source code.
What do you think?
The instructions are great, but they didn't work for me for some reason. I'm using firefox, and I'm wondering if it might have somethiong to do with the template I am using.
fabulous! thank you!! :)
favicon generator is down :(
All favicons dissapearred! 8 (
What's this?
I used a code "link href='adress of favicon' rel='shortcut icon'/"
But it no more work!
my favicons today not working too
only blogger default icon...
mine too. but only in firefox...
was working fine...
im lost.
It easy to create a favicon.ico. Thanks AMANDA.
hi, Amanda, How are u?
I have add favicon to my blog http://www.realestatepalakkad.blogspot.com/
and got it. thanks...
Let me know, can i add the same to this Url-
http://realestatepalakkad.co.nr/
bcos i would like to use this URL mostly.
waiting for your reply...
thanks once again and i would like to say that your site is very nice and useful for the fresh blog builders
hi Amanda,
after the above comment. I just found an option for adding favicon to .co.nr from their site. its working. but not seen in IE. any way many many thanks to give HTML code to the same. I lost many hours with this purpose yesterday.search....search...nothing happened. but at last i got it from your site. and added your URL to my favorites. thank u very much.
have a nice day
Thank you very very very very very much
hello!
i had favicon but its seems to be gone suddenly? i have now followd your steps over, but nothing appears :(
whats the probl you think?
It WORKED! thanks
Hi It doesnt seem to work for mine?
www.sgdividends.blogspot.com
Can someone assist me?
Thanks
Amanda- thank you for your detailed instructions!
I did as you instructed, but still am not seeing the favicon even when using firefox...
My favicon functioned only in Opera and Firefox. After reading this post more carefully, I found that my favicon had to be hosted with the name "favicon.ico". If you're having similar trouble, renaming your file to "url.com/favicon.ico" may fix it. It's a really small detail, but if it's named anything else it may not function properly! Amanda mentioned this in her post above too.
Hope this helps!
Mike
http://365Sonnets.blogspot.com
http://SomeTurbidNight.blogspot.com
http://VoglioTempo.blogspot.com
Still not seeing it in Firefox or Chrome. I did enjoy it when it used to work.
http://litandlaundry.blogspot.com
Hey, thanks... I did it!!!
I had to save the file as a png at 33 pixels max in my photo program. For some reason the URL wouldn't work as a saved file in Blogger so I uploaded it to Google Sites and copied the URL from there.
I then used your code above as described and it worked perfectly.
Thanks for your help.
I saved the file as a 33 px png in my photo progam. For some reason, the url from the Blogger post didn't work so I uploaded the photo to Google Sites and copied the URL from there. I then used your code above and voila- perfect.
Thanks for writing this post.
hi.. thanks for your usefull tips..:-). i like your blog
worked great the first time, but what do i do with that 'dead' back-dated post? can i delete it now?
Cool.
& very easy, thank you.
Thanks Amanda. With your help, I have been able to tame blogger. Cheers
Hi,
This is great info but I can't seem to get it to work. Initially, I used an animated gif file with your recommended code and it did not work. So I used your generator and tried it again and . . .it still won't work - help.
Hi,
I hope this is not a duplication as my internet went down. Anyway, thanks for the info, but when I did those steps it is not working for me. Initially, I used an animator gif all it did was change it form B to e, Then I used your generator and got a png.It is doing the very same thing - help
Help - it is not working for me.
Hmm... I created mine, which initially appears in the title bar, but is then replaced by the Blogger "B" logo. Any idea what would cause that?
Hi Amanda,
I have created the favicon in png format, and uploaded it in a new post to get the html. However, I'm not quite sure where to paste in my Layout/ Edit Html.
Thanks in advance!
Cheers
yes....owesome ..keep me trying...
I am trying to fix my favicon on my blog (http://paper-mario-blog.blogspot.com) after it stopped showing up. I tested it from several browsers. IE7 works fine, so does IE8; Firefox 2.0.0.20 displayed it, but Firefox 3.0.11 does not seem to recognize it. It shows the Blogger icon instead. When I view the Page Info, I see that the icon is present and Firefox recognizes it, but it won't implement it.
Hi thanks for the tutorial, I have been searching all over for this, and all the other tutorials did not work. This was very helpful and easier than I thought. It's working properly on firefox but on explorer it only shows the e I refreshed the page but it's still there either way this is the first time it actually worked thanks to your tutorial :)
Merci
wwww.thehorrorpress.com
AMAZING!!!!!!
Had some trouble at first, but then I started just throwing the code in various areas and vwala!
Sweet thanks so much.
www.turfhugger.com
I've spent a lot of time trying to help people do just this and, in the end, came up with another system - http://www.Favicon4free.com
I hope that this helps someone
All the best
Keith
Thanks for sharing the information I was looking for a method to change my favicon.
Thanks for the great tip! Everything works fine when I view my blog in Firefox, but the favicon doesn't show up in Safari or in the blogrolls on other people's sites that have a link to mine. Is this simply a refresh rate thing or is there some other problem to look out for? Any advice most welcome!
Fencing Bear
Didn't work for me, will try one more time & then I give up. It might help if you actually showed the spot where one would post it, I thought I put it in the right spot but it didn't show up so I'm assuming I didn't.
Ok, it's not working because the favicon generator page is down...please fix!!
can meta tags from the Google webmaster tool will make your favicon vanish?
Great Post. Worked pretty easily with no real hassles. Thanks!
Great instructions. I'm practically computer illiterate and I was able to figure it out. Thanks!
Yours is a great site and most helpful . . I saved my favacon done in Photoshop as a .png and it appears all over my Firefox browser with the original posted and backdated to 2008 as a blog entry serving as host for the file.
Perhaps, however, you can tell me why the Favicon does not show up in my Safari or Camino browsers? Maybe you can you can see if it appears if you visit http://theihandbill.blogspot.com
I liked your work-around by self hosting. I pasted in the code and it appeared instantly. Any ideas you may have will be appreciated about the problem with other browsers.
Best regards, Larry
Thank you so much! Such an easy instruction.. I find hard it first, to tell yah how many hours of going to and fro of other tutorials until I came here.. thanks! Now, I have my first favicon and will do more with my other blog. :-) Such a great help.. keep going.. I love it!
anyone help me . I can't find the section to paste the code .
thanks a bunch! this worked perfectly. Great instructions.
Blogger updated their system, check this out. :)
http://tweengky.blogspot.com/2010/04/tutorial-change-blogger-favicon.html
this is very helpful! thank you very much. now, i have my custom favicon for my blog!
Thanks Amanda! worked like a charm. Check out the result @ http://www.arockworkorange.comThanks Amanda! worked like a charm. Check out the result @ http://www.arockworkorange.com
It worked for me, but with some tweaking. I had to put it in after this part of code:
/ title (imagine <> around that it wouldn't let me comment in code)
A few lines below the /head (with <>)
I don't know if it's because I was working in Blogger in Draft or what.
Anyway, thanks for the help. I love it!!!
Wanna see? http://www.pjs-til-noon.com/
I don't understand!!!!!! please tell me!!!!!!
Thanks a lot :)
thanks for sharing the information and helping us in creating the favicon we like.
Its amazing how quickly a favicon has become a standard element on most websites now - although some of the 'older' websites are taking a big longer to catch-up - a sign of them becoming out of touch and slow to respond perhaps.
Thanks for a interesting post, now having said that I need to get around to a favicon for one of my websites....!
great work deed
thnks
I think all the favicons look great in my bookmarks toolbar. Now I just need to design a great looking favicon for my site. I found some handy favicon generators, but I can't stop making fun grid patterns.
this tutorial here also gives the proper and completed method of changing blog favicon. even starting from making the .ico file itself
http://dioisme.blogspot.com/2010/12/changing-your-blogger-blogspot-or-other.html
We can see different tips and tricks and useful information regarding improving the visibility, functionality and importance of blogs.
Hi thank you for an perceptive post, I actually found your blog by searching on Goole for something else nearly related, in any case before i ramble on too much i would just like to state how much I enjoyed your post, I have bookmarked your site and also taken your RSS feed, Once Again thank you very much for the blog post keep up the good work.
Regards,
Free Mcx Tips Trial || Intraday Mcx Tips
wow this is genius, thanks for the tips and tricks..
These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post, writing is simply great, thank you for the post
thanks! totally worked & easy to do. :)
Hey thanks a lot dear for your help....I have a lovely favicon for my new apple related blog...Just loving it....
FOR APPLE INC. LOVERS....DO come and visit ...I hope u would all love it
very simple I think.. thx For sharing
Hi Amanda,
You're simply one of the best Bloggers around. I can see the sincerity in your work. May God Bless you.
blogger has released the official favicon customization, see: change favicon in blogger
sex
porn
free porn
porn
free sex
free sex
porno
escort bayan
Great Tutorial dude, really helps me.
www.e-stalk.blogspot.com
Adsense & blogger Tutorial in Hindi
How to create Blogs, wordpress, blogger, blog, webs etc.,
Our major Sexy Costumes Wholesale include: Bride, Bunny & Cats, Butterfies & Bees, Cheerleaders, Cops & Robbers, Country Girl & Cowgirl, Fairies & Angels, Fairy Tales, French Maid, Heroes, International, Military, Nurse, Pirate, Sailors & Sea, School Girl, Sports, Uniforms & others, Accessories and so on.
we also supply Christmas Lingerie, Halloween Costumes, Valentine Lingerie and so on.
film blowing machine
Wholesale Lingerie
Custom NFL Jersey
film blowing machine
stretch film rewinding machine
non woven bag making machine
cheap baseball jerseys
cheap hockey jerseys
NFL Jerseys
cheap authentic nfl jerseys
cheap hockey jerseys
NFL Jerseys
cheap authentic nfl jerseys
Wholesale NFL Jerseys,choose NFL Jerseys in our web,they are complete in styles,custom nfl jerseys,here will be right place to get these NFL Jerseys
cheap baseball jerseys
cheap hockey jerseys
Custom NFL Jersey
NFL Jerseys
cheap authentic nfl jerseys
Cheap Authentic NFL Jerseys
Wholesale Authentic NFL Jerseys
I can see the sincerity in your work. May God Bless you.
gucci outlet
bailey button triplet boots
ugg bailey button triplet
ugg boots sale
louis vuitton speedy
I don't understand!
It easy to create a favicon.ico. Thanks
Great loved it, will be waiting for your future posts.
Leather Jackets
Really very nice post, Thanks for sharing this valuable information with us.
Resources like the one you mentioned here will be very useful to me! The information mentioned in the article are some of the best available.
Thank you for taking the time to publish this information very useful ! Cheap vintage leather bags I’m still waiting for some interesting thoughts from your side in your next post thanks.
Wow, I just want to say that this work that you are doing right now is truly amazing and inspirational to say the least. Thank you for it all I really do appreciate it my friend.
Wow, I just want to say that this work that you are doing right now is truly amazing and inspirational to say the least. Thank you for it all I really do appreciate it my friend.
wow... good tutorial and thank's a lot 4 u
I was very encouraged to find this site. I wanted to thank you for this informative and useful read.
Thanks for the tips, I am going to apply these tips and I'm glad I found this blog because I had no idea about this before
Great loved it,
thank you for your detailed instructions
Great Post. Worked pretty easily
Hi thank you for an perceptive post
THNK U SO MUCHHHH Amanda!!
tht was d simplest tutorial iv ever seen
It's really a wonderful job. This message contains useful information that helps us a lot. I have never seen such a large contribution.
Great Tutorial dude, really helps me. Thanks for the info Business Financial Beauty And Fashion
This is a really good read for me, Must admit that you are one of the best bloggers I ever saw.
its winter outfits interesting post to read,well nice blog post winter dress
This is a really good read for me, Must admit that you are one of the best bloggers I ever saw.
It's really a wonderful job. This message contains useful information that helps us a lot. I have never seen such a large contribution.
Awesome racing leather jackets blog and great article, black biker jacket thanks for sharing white leather jacket
That’s wonderful information indeed. Celebrity Suits You have bestowed us with the valuable information that depicts your knowledge and passion for the subject. Keep the good work up!
" ugg boots sale online Dong Xiaokui nest on the sofa ugg sale Suddenly ugg boots Boss , is it now? You actually did not sleep? Dong Xiaokui very surprised ugg boots sale Dong Xiaokui nodded uggs outlet Oh , play the game can find a job. Zhou Zhenzhen understood why. cheap ugg boots Bored at the roadside to wait approximately one hour. Phone suddenly rang uggs boots on sale at this moment uggs boots is worked? ugg boots cheap is playing his own yearning for the kind of people. ugg boots on sale glanced at the table "
Awesome how to clean leather jacket at home website and excellent post, thanks for sharing Buying a Warm Ladies Coat for Winter or Leather Jacket
Post a Comment