How to Change the Favicon in Blogger
Blogger supplies every blog with the standard orange "B" blogger favicon. Having your own unique favicon is a great way to give your blogger template both a distinct and explicit brand. These small 16X16 pixel images will most definitely help your blog stand out from the rest of the blogspot blogs.
What is a Favicon?
A favicon is a small 16X16 image located at the top of your browser in the url bar.How to Change your Favicon
- First go to Layout >Edit HTML in your Blogger Dashboard.
- Backup your existing template before making any changes!
- Place the code below directly below the </head> tag in your template.
- Now save your template.
- Once your template is saved view your blog and make sure to refresh the page and delete your cookies.
<link href='http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon' /> <link href='http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico' rel='icon'/>
Creating your own Favicon
- Replace the image URL (2X) with your own 16 pixel by 16 pixel image hosted on the internet. http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico
- You can host your own favicon blogger image at sites such as ImageShack; PhotoBucket; Flickr; etc.
- Check out this Favicon Generator Tool which allows you to upload an image and it will format it for you!
Share!
Enjoy the article so far? Recommend it to your friends and peers.
Subscribe! (free)
Be the first to our articles and get latest updates on freebies.
163 comments:
I never knew this was possible with blogger. I thought this was only available to wordpress users. Thanks John!
It did not work on mine.
Sterferson Luiz, I've updated the post with some addition code. Also, make sure to refresh your blog page.
Why do Flavicons appear in Firefox but not IE?
Culture Queens, this is a flaw on Internet Explorer's Part. They're always one step behind the other browsers....
Hi there! I tried it and when i put your code as it is the image changes, but i when i change the URL to my image feed, it doesnt work. Why? Can anyone help me?
this is just too cool!! thx!!!
Thank you so much! This adds a wonderful dimension to my new blog! I really appreciate it!!
-----IMPORTANT UPDATE-----
Culture Queens, I've updated the code so that the favicon displays in Google Chrome.
nice article.. thank you very much
Didn't work with me. i have used JPG, PNG and ICO images, I've load mi favicon in google sites, in another blog as a draft... and nothing! I keep seeing the same favicon from blogger.
Unfortunately, it didn't work for me either. I used the supplied site to convert and uploaded to a site that allows .ico files and still no luck, too bad!
Angela, you might want to try a JPG image instead of an ICO. That might do the trick!
Thank you . To all participant, please have a look at our updated contest post.
more templates easy to download
that's cool, thanks for sharing. :)
-cathy young
http://hotwomeninfashion.blogspot.com/
thanks for the tip. its really nice. but sometimes the favicon is not displayed after page load
Faizan, try deleting your cookies and clearing your cache. This may help.
Does not work for me either and I have followed your instructions to the letter plus I have read and acted on the advice given in your comments, deleted cookies etc. If it is a because I use IE then there is nothing I can do but I thank you for such a clear explanation.
Thanks for sharing this. i love it :D
RiA
http://riagesilva.blogspot.com/
hello any body please tell me how to add link in above area ...??? i m not getting...
ITS WORKING NOW FINE, AND FINE ALL THE TIME. THANKS JOHN ANYWAYS, BUT CAN YOU SUGGEST A TRICK THROUGH WHICH FAVICON WILL GET DISPLAYED ON IE TOO
It should be always under the head section, not outside the head.
Thanks
amkaysweb.blogspot.com
Thx so much. It worked perfectly.
Awesome! Thanks so much!
Thanks Alot...
Verdict: Does not work on mine. ;(
Thanks this worked, the other tutorial I read elsewhere did not work - the one that told me to put some code before title tag...
But this did.
It works well on mine but just for FireFox. What happens with IE?
nice, realy work. thanks
i can view ur icon on my blog,but how can i show mine.i created one icon hosted on http://s878.photobucket.com/albums/ab343/fmfame/?action=view¤t=images.jpg
but i cant placed this.what i do?
Thanks. Really nice.
Thanks for this tutorial!
It worked on mine :
http://SwagBucksTricks.blogspot.com
Thanks again!
photobucket doesn't work...geocities is closing down....
you can use window live to upload your favicon.ico
You absolutely ROCK! I've been pulling my hair out over this favicon business for 2 days & finally found your site with the wonderful instructions & it worked! I couldn't be happier!! Thank you so much!
http://mickeysmagicaltriptips.blogspot.com
You're Amazing!
Out of all the sites that provided instructions on how to create a favicon, yours is the only one that actually worked in my blog.
Thank you..
Thank you! This was the first piece of code that actually worked for me. I had to really search for a location that would host my favicon.ico, but FileDen eventually worked (even though it had a ton of spam)
Thanks again!
Wow! It worked like a charm! I love my new icon! :-D
It works great--even works on IE (version 8). The FavIcon Generator is nice way to get a larger image down to 16 x 16 smoothly.
awsome.J.Smith's way works like a charm.tnx for this mate =)
You're Amazing!
Out of all the sites that provided instructions on how to create a favicon, yours is the only one that actually worked in my blog.
http://royalenfieldmotorcycles.blogspot.com
thankz for the sharing. I post ur tutorial in my blog and credit it to you. =) God bless.
mine didnt work. i tried everything. it still hows the blogger icon. http://dlynneartdolls.blogspot.com/
Hai good work friend thanks.. i have been added in my blog see http://s-rajaganapathi.blogspot.com/
Hello,
My favicon is not working. I think that when I change my own URL I'm doing something wrong. I'm hosting my favicon online but I don't know which code I should use and how it should look like in the Edit HTML tool, could you please help me?
Hey.. Thanks a lot for sharing this info.
Ahhhh! My blog's style now changed and I don't know what to do!
I did something wrong... terribly wrong.
It's a very nice tip!!!
Tks a lot!!!
worked fantasticly, used file den to upload the .ico after i created in the generator thank you very very much :-)
Worked fantasticly thank you very much, i used fileden to host my generated .ico :-)
nice post keep carry on bro
http://esetnod32antivirus.blogspot.com/
Thanks! I just looked for it!!!
it's really what im lookin 4!!
It is a fantastic blog of updatation.
urbanodaweb.blogspot.com
Guys, double check you're putting the tags RIGHT BELOW the /head> tag, if you put it above, it won't work.
That's why mine didn't work, at least. Hope it helps!
http://tejiendohaciendoconelcorazon.blogspot.com/
this is what iam looking for !! =)
i changed mine looks really great !!
Awesome post. Thanks a lot for such a great information. I will try this on my blog.
awesome. after the recent blogger migration, i noticed the "orange B" icon showing up instead of my original favicon. this snippet worked beautifully. thanks!!
WOO HOO!!!!! Was told I could not do this on Blogger...awesome, thanks a million!
Thanks for your code, but I can't get it to work. I get this error message:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference.
Any ideas what I'm doing wrong? Sorry!
Thanks for the helpful information. Hope to hear more from you.
add your website in
nice one but icon generated was uploaded as png in blogger.com and as jpg at flickr and i guess thus was not working on my site http://www.soft4windowz.blogspot.com/ .Plz Help
I uploaded the icon file at imageshack.us and then the code works beautifully with immediate effect.
Thanks John.
I did exactly what was posted. It showed up in my bookmarks, but not on the address bar in the browser. Then after I clicked on my bookmark, it changed to the Big ugly B for Blogger. Why is that?
awesome hack, man. I've tried it before with some other code but never worked.
thank you so much.
for additional help visit http://www.lotsinlife.com/
Yay it worked!! Thanks so much!
Thnx! it worked... Awesome :D
finally, a favicon tutorial that worked!! thank you :)
my favicon still orange B
i have created my own favicon.
But how to upload my favicon [ico] to my blogspot ???
Plis help..
http://bisnisonline15menit.blogspot.com/
i have favicon ico, how to upload the favicon into my blog?
http://bisnisonline15menit.blogspot.com/
Thanks for your great job.
Good hack man, I like this!!
Wow, it works! Thanks!!!
Btw, it is not necessary to generate an .ico. Just use .jpg, upload to Picasa and change the address in the code.
Dang it! It pushes down the page in IE, and even more in Firefox!
Great post I got mine to work just fine. Although I had to host the image on dropbox. Thanks for the great advice!
yea very good tips thanks for posting!
woww.. i didn't know!!
Hai I am from Indonesia.This good idea.Very-very useful .Thank you very much.I like it.
Thanx So Much Very Nice Post
thx for the info.It work for me.I just use http://www.iconj.com/generator.php to create and hosting at the same time.feel free to see the favicon at http://itisinyou.info.
and ave a nice day ya:)
Awesome!!... Thanks for sharing.
nice blog
http://amik-garut.blogspot.com/
Thanks it worked for me!
Nice ! look at mine ^^ Nice !
Finally a great guide on free widgets Baby Boy Bedding"
thanks a lot.
http://jomarlipon.blogspot.com
http://questtoad.com
http://thebuzzcentral.blogspot.com
I am trying to install this widget on windows Data Recovery Help.
Very good post.
It's very good hack for blogger thanks for sharing it
I tried it and it said the something about the XML and that it needed a "" what am I doing wrong?
I tried it and it said something about XML and that it needed a some kind of "" What am I doing wrong?
I installed the code as instructed and it doesnt work it looks like its trying to but it acts like its being over rided by blogger any thoughts??
Nice info, i have do this and work for me, thanks mate
See my blog & it's work
look at my blog: http://teateranaknegeri.blogspot.com/
you will love blogger
like personal site, free blogger! i love it
Very cool thanks :)
Uhm... it doesn't work. :( Can you please show the step where I replace the URL??? Thank you.
I take that back! It worked! Thanks! :D
to eddy jazon. cool. thanks for info =0 and thanks to this site. love yah.
vivahosanna.blogspot.com
thank u very much for this comment.
Cannot get this to work for nothing. I tried it several times. Using Chrome browser and Windows 7 OS.
Not sure what to put where, and I promise I do know how to follow directions...but am not familiar with some lingo...like image URL, hosting on internet, or how Picasa can help me to put/move my image to this feature? Please help, thanks.
It worked......... Thanks a lot buddy.
www.sweetjaveria.wordpress.com
www.sweetjaveria.blogspot.com
www.funworld4u.wordpress.pk
www.showtime.wordpress.pk
www.swwepk.com
+923332161732
www.tariqraheel.blog.com
www.tariqraheel.blogspot.com
www.mtariqraheel.blogspot.com
perfect share.thnk you
Thank you for your share.it worked!
Thank you for your share.it worked!
Thank you for your share.it worked!
Hmm. This is a really cool idea. I followed to directions and all it shows is the link at the top of my page It doesn't change my favicon. It's disappointing. Is there any way to fix this? Thanks.
Thank u very much this comment is very cool
Thank u very much this comment is very cool...
Thank u very much widget for free
heyy this comment is very good.widget for free
iso 9001.thank u very much
thanks...i thnk i hate the blogger icon...u should change it :D
wow its comment is wonderfull.widget my best friend
thanks for your comment widget.Thank you very much...
i love your present template.. please help me know where can i get it!!!!
Great widget. Thanks!
thanx dude
Cool! Author the best! Thank you!
it works immediately right after i place the favicon. thanks
thank you.
visit me: http://www.nasakomputer.co.cc
Thx !!! It's working on my blog.
http:\\funnyphotosite.blogspot.com
please my favicon is not showing up, but it shows a link to FAVICON MAKER WEBSITE please help
www.youthslive.blogspot.com
Not working with Blogger
it's not working in my blogger..it's said Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The value of attribute "href" associated with an element type "null" must not contain the '<' character.
it's not working in my blogger...the blogger says Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The value of attribute "href" associated with an element type "null" must not contain the '<' character.
thnaks a lot
Very Nice,..
Thanks... :)
as easy as A,B,C.........
1.BACK UP
2.CHECK Expand Widget Templates
[url="http://adf.ly/24tZ9/"]get free favicon hosting and generator heres[/url]
[url="http://adf.ly/21xsa"]check out my blogspot here[/url]
the site mentioned by one of the commentators worked for me: http://www.iconj.com/generator.php
Hey This is what I was looking from last couple of days. I tried to change the favicon in blogger but getting some kind of error. It looks like I was forgotten to save the temple. Let me try step by step procedure given by you.
Thank you very much sir...
thanks a lot
This is a feature of blogger, people T_T
http://xtrapics.blogspot.com/2011/10/really-stunning-pictures-and-photos.html
http://xtrapics.blogspot.com
New Blogspot options!
Now you can modify the Favicon easily, at Design - Page Elements. The favicon must be square-shaped, maximum 100 kb in size.
I thought this was only available to wordpress users. Great read, thanks!
sorry but cannot access!! created own.. www.disaster-report.blogspot.com
Thank you very much i like it very much.
Nicely explained. It's indeed an art to stop new visitors with your attractive writing style. Truly impressive and nice information. Thanks for sharing.
nice explanation man .. got something new to my blog ...
Still working after all this time!
Hi,
I just wanted to take a minute to tell you that you have a great site! Keep up the good work.
I am trying it now
nice
This tutorial is still useful. When I use the blogger favicon option, I get a favicon beside the address bar but not if I bookmark the blog. But with this tutorial the favicon works also for bookmarks! Thank you!
seo forum
i cant anything about this post. it contains lots of information. i had much fun reading it. gave me lots of insights. keep up the good work. keep posting more of these.
I have done exactly what you say but my image doesn't appear? do you know why? I use the free basic blogger? Claire
Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
The Golden Path
Ha detto: mi sono preso le tue immagini sono molto carine..
Qlxchange : Ha detto: interessanti
Well, I would love to read more about this dissertations as it has added a lot to my knowledge. Kindly keep posting such information so that people like me can enhance our knowledge like you.
Thank You
Thx for very useful info
Beyaz Butik Ankara
Meet News World
Really nice
Thank you so much! This adds a wonderful dimension to my new blog! I really appreciate it!!
we thank all of you who came to share with us this important achievement.
I get a favicon beside the address bar but not if I bookmark the blog.
Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your blog?
My blog is in the exact same niche as yours and my
visitors would certainly benefit from some of the information
you present here. Please let me know if this alright with you.
Thanks a lot!
Here is my site - reduce
fleshlight also will be giving sympathetic, with a shut to life-like
texture and aesthesis.
Also see my web site - artificial vagina
Post a Comment