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'/>
- 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!
32 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!
Post a Comment