How to Add Your Favicon to Blogger
Update: These instructions do not seem to work anymore thanks to Google/Blogger changing something. I’ll post an update with new instructions if I find a way to fix it.
Update #2: Simple fix to this problem. The instructions have been updated in step three. Hopefully that will get it working for many of you again.
Blogger.com is one of the most popular blogging platforms on the Internet, yet if you have a blog with them you are often stuck with the default Blogger.com favicon. Hard to brand your blog with your own personal touch when you have the Blogger.com favicon on the address bar. If people bookmark your blog they won’t see your favicon and might quickly forget about your website. There is no reason why you can’t change the favicon on your Blogger.com blog to one of your own design. You just need to follow these easy steps and soon your Blogger.com blog will sport your great new custom made favicon.
- First thing you need to do is create your own custom made favicon. In this case you do not have to use an image to favicon generator, but your image should be either a .gif or a .png. In you example we are going to use a .png file. If you are not sure what kind of image to use browse through some of the free favicons that we offer, perhaps there will be one there that you would like to use. If you do decide to use one of the many favicons we have to offer don’t click “Download this favicon” because that will give you a file in the Windows .ico format. Instead right click on the image of the and choose “Save Picture As”.
- After you have the image you would like to use as your favicon, goto your Blogger.com blog and create a new post. It does not matter what you call it since you don’t need to publish it. Once you have created a new post use the image upload button to upload your favicon to your Blogger.com blog.
Once you have uploaded the image, you will need to switch to “Edit HTML” mode if you are using the “Compose” mode. Once you are looking at the HTML you will see something like this:
<img src="http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png" alt="" id="BLOGGER_PHOTO_ID_5212704798569567682" border="0" />. You need to highlight and copy the part in quotes right after src. In this case it would be:http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png. You should paste it into Notepad or another text editor. You don’t want to lose this and you will be closing the Blogger.com editing window next. - Once you have the location of the image you uploaded copied, you can click on the Layout tab of your Blogger.com blog. Once you are at the Layout, you need to click “Edit HTML” Look in the HTML for a tag that says
<head></head> and rightbelowabove it paste: <link href=” rel=’shortcut icon’/>
<link href=” rel=’icon’ type=’image/png’/>
Once you have those lines pasted into the template, copy the src of the image you want to use as you favicon that you uploaded earlier and paste it into the two lines you just added where the href=” is. In our case it looks like this:<link href='http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png' rel='shortcut icon'/>
<link href='http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png' rel='icon' type='image/png'/>
Click save template and your Blogger.com should now have your fancy new custom favicon showing on the address bar when you visit your blog.
If you want to see how we did it take a look at our Blogger.com Free Favicon blog where we added our great favicon.
You can use other free hosting services to host your custom favicon, but you don’t want to use an image hosting service that deletes images after so many days. Using Blogger.com to host the images works well, but you could also use Google Page Creator, or even your Flickr account.
Have fun adding your custom favicon to your Blogger.com blog!
July 18th, 2008 at 12:30 pm
Okay, I just followed your instructions, step by step and all I have now is the Internet Explorer “e” as my favicon. So I thought I’d check out the link you listed on blogger and it had the same thing. Is it something I did or didn’t do? Or is it merely internet explorer that does that? I’d appreciate any insight you have. I am working on writing a book and have set up my blogspot for friends and associates to keep track of the progress. Thanks so much!
Shelly
July 21st, 2008 at 11:46 pm
You might have to clear your cache to get Internet Explorer to actually go and get the new favicon. I checked the link you left and I see pink lips as the favicon. Try refreshing the page while holding down the shift key and see if Internet Explorer will get the new favicon.
September 17th, 2008 at 9:36 am
maybe worth to mention that your uploaded PNG picture should be named “favicon.png” and not different….
September 20th, 2008 at 9:59 am
Good point. The file actually be named something different but it keeps it simple if it is named favicon.png.
September 24th, 2008 at 2:23 pm
Thanks for the tips. Straight forward. Thanks a lot…
October 12th, 2008 at 12:05 pm
i thought it was only possible to make favicons using the «.ico» format.
so i’ve learn 2 things today thanks to u.
October 13th, 2008 at 8:38 pm
I have followed your step by step instructions as well with the same result being the internet explorer favicon appearing evan after refreshing my cache several times. I am not sure what else to do, but I would really like to put my favicon on my blog site. Any suggestions?
October 22nd, 2008 at 11:05 pm
today all my blogger blogs can not show my own favicon.. could someone help with this? thanks…
October 23rd, 2008 at 5:22 am
Google/Blogger broke this somehow. Check your example blog. In firefox on mac and pc your custom favicon no longer shows up, as none do on blogger.
October 27th, 2008 at 5:43 pm
I followed all your advises but i still have a problem with the favicon on my blog. Could you help me?
October 29th, 2008 at 7:24 pm
It’s not working for me. I was able to follow step by step and nothing. I still have the blogger icon.
November 2nd, 2008 at 7:22 pm
I’m not getting this to work for my blog. Is there a time delay involved? Anything look funny in my template?
November 15th, 2008 at 10:36 pm
Hi,
I followed the instructions and all I get is an “e”. Clear my cache and even checked on another computer. Any help would really be appreciated. Thanks–Amy
November 19th, 2008 at 8:40 am
I followed your instructions and they work. Awesome.. Thanks for your info.. Much appreciated.
November 21st, 2008 at 9:38 am
Hello Everyone! Google has decided to break these instructions. I am trying to find a new way of adding a favicon to a Blogspot blog. Stay tuned.
November 21st, 2008 at 10:22 am
Updated the tutorial to reflect the changes the Google/Blogger.com did to break it. Hopefully it will help people get their custom favicons working on their Blogspot blogs again.
Sorry about the delay in fixing it.