How to change blogger favicon
First of all, what is favicon?
Favicon is a little icon that precedes the URL in the address bar of your browser. Favicon is also displayed on the title tab.
Now take a look at your address bar, do you have an icon there? Do you like it? If you do, fine. But if you don’t, you actually can change that. I’m going to tell you how.
Below are the steps to replace your favicon:
- Design the icon you want.
You don’t need special software to design it. There are many online favicon generator sites available. Justskins.com introduces 15 favicon generator sites, you can choose the one you like. Or you can search free ready made icons on the net. - Once you have an icon ready, upload it to an image host (i.e. Photobucket, Imageshack, Flickr etc.). Once uploaded, get the direct URL to the icon.
- What you want to do next is to link the icon to your blog.
Go to Dashboard > Design > Edit HTML and find this line of code:
<b:skin><![CDATA[Insert the code below immediately before that line:
<link href='PUT YOUR FAVICON URL HERE' rel='shortcut icon' type='image/x-icon'/>
- Save the template, and click on View blog button. You should see the new favicon on display replacing the old one.
44 comments to "How to change blogger favicon"
Cool tips. How can I do it with hosted Wordpress?
Azam,
I'm not familiar with Wordpress, but I think the process is similar. Insert the code in yellow in the Head section.
Or you could checkout Wordpress support on adding a favicon at http://wordpress.org/support/topic/188841.
Hope this helps.
Wow thanks!! Already done it!
Great tips ;)
To Rozidah,
Wow you really did it, that was quick!
Thanks you great post and great site!
@Computer Howto, thank you for stopping by, do come back for more tips.
Thank you so much for this post!
You just help me to install my pretty favicon!!!!
thanks thanks thanks!!!
http://www.youandmeplusthree.net
My pleasure ♥Rocío♥.
Yes it does work with .ico. Just have to be patient, refresh the page some times etc.
Thanks a lot guys!
thanks!
I believe you are going to get sick of my questions. I was so excited when looking through your blog list to find this post, and it seemed like one of the eastiest changes I have made... but nothing showed. I tried it on three of my blogs. my test blog, my real blog and my blog roll blog... Here are the adresses, you can just look at one if you want...
http://figuringoutblogger.blogspot.com/
http://www.remodelaholic.com/
http://mybiglistofblogs.blogspot.com/
I saved the image as a 32 x 32 pixel gif, as well. just fyi.
Thanks in advance!
p.s. I just checked and it shows up in mozilla, just not internet explorer.
@Remodelaholic
To make it show up in IE, you have to use an .ico file. But I'm yet to find a free host that accepts .ico files.
If you have a google apps site related to your blogger domain, you can host the ico file there, and it will show up in IE
I am changing my favicon now, but you can see what I mean here: http://www.eurasiareview.com/
thanx greenlava!
it works!!
do you know how to remove the 4 button on my blog??
(these are the button)
archives..
categories..
rss feeds..
admins..
rexblogkomputer.blogspot.com..
@rex
Go to Layout>Edit HTML. Find and delete this code (from div until /div):
[div class='links']
SOME CODES HERE
[/div]
thnx.. it works..
Hi There
I notice that for instance in firefox it works on all my pages by the main page. Any reasons why this could be?
Thanks,
Chris
@Chris
Make sure the code is placed immediately before
< b:skin ><![CDATA[
I followed the above instructions, and I get the Favicon to show up in Firefox and IE, but not Chrome. Suggestions? Thank in advance!
http://blog.Minchin.ca
@Minchin Web
Chrome? I'm afraid I can't answer this one right now as I haven't even tried Chrome yet.
I tried to change the blogger favicon on my blog but its still the orange B. I've tried to replace the code in the html editor for my blog but the line that you mention above isn't there.It does show up when I check the source code outside of blogger(when I am not signed in) like on firefox.
I'm assuming that they don't want it to be changed even though I have my own custom domain.Either that or I'm missing something.Any advise would be appriciated.
@percaine
The link you are using is a not a direct link. What you want is a direct link (or hotlink) to the image. It should look something like this:
http://www.picpanda.com/images/pfmb5i6ilt8fzqvjqeai.png
in Picpanda copy "Hotlink for Websites" code and extract the link similar to the above.
The favico doesn't show up in google chrome, but this blog sentral favicon showed up on google chrome, weird?
Found the solution to make it appear on google chrome browser
add this extra code type='image/x-icon' no need to change the attribute.
so the code will look like this one bellow
I hope this help....
@JustForYouToKnow
Thanks for the solution. I will update this post to include that :)
good idea thank u a lo of..
http://www.flickr.com/photos/53846591@N03/4979441103/
i av this on flickr and input it in my html but its not working.
@Jobsnownig.com
That's not the direct link to your image. A direct link usually ends with an image file extension such as .jpg, .png or .gif.
Umm well this is the correct link:
http://farm5.static.flickr.com/4132/4979441103_d65ebee887_m.jpg
I was driving myself crazy trying to figure out how to do this, you made it easy! Thank you so much!
Thanks so much for posting this! Talk about easy-I've tried several ways that were posted before on different sites, but this one worked slick. I used Flickr. Thanks again! :)
@MJ Stevenson
@Kelly
My pleasure :)
This is so helpful - I went to 3 other sites and they had instructions on how to do this but nothing worked for me. Then I remembered that your site also helped me to remove the navigation bar, I came back, did a quick search, and voila, new icon! Thank you so much!
@Zaaynab Le'Von
Assalamualaikum, good to have you back here :)
I went to five other posts before finding this one...the only one that worked! -thanks
@Dr Eliot
My pleasure :)
Thank you so much. it's working for me.
i have problem..the icon only show at homepage only..when i click other post or pages, the icon changes back to Blogspot icon
@cd
You probably placed the code inside a conditional tag.
Look for < b:if cond=......< /b:if>.
Make sure you place the favicon code outside the tag.
It didn't work. Still has the Blogger logo on it.
@allie
I see you have this in your template:
[link href='favicon.ico' rel='shortcut icon' type='image/x-icon'/]
you have to replace favicon.ico with the actual URL to your favicon image. And of course to get the URL, you have to create and image and upload it into a server first.
As an example, this is the code I use for this blog's favicon:
[link href='http://4.bp.blogspot.com/_nHEt80wjI5c/TIz5HyUK2iI/AAAAAAAABi4/5o1H3nrNcg0/s1600/bloggersentralfavicon3.png' rel='shortcut icon' type='image/x-icon'/]
amazing how that worked. i searched and searched for the right way and almost gave up. thank you!!!
Super easy, thank you!
Post a Comment
We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.