Adding Custom Favicon to Your Blogger Blog
Wednesday, February 28, 2007
Favicon (pronounced fav-eye-con) is short for 'Favorites Icon.' A Favicon is a multi-resolution image included on nearly all professional developed sites. Within Internet Explorer the Favicon is displayed on the Address line and in the Favorites menu and can be clearly seen in Firefox bookmark. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser. Very often, the Favicon reflects the look and feel of the blog or a representation of a company logo.
Actually there are a lot of resources online showing how to add Favicon but I thought of sharing my own method specifically for Blogger blogs which I used to set it up for mine.
To start off, you will need a graphic editing software such as Adobe Photoshop but if you don't, then download these wonderful free editors from Download.com:
1] IconEdit2
2] IrfanView
3] Paint.NET (download ICO plugin HERE)
If you do happen to have Photoshop, you might need to install the ICO Format Plugin which can be found here at Telegraphics.com.
If in the case you do not have a graphic editor or would prefer a very basic and simple way to make a Favicon, then visit DeGraeve.com for an online Favicon creator and editor.
Creating Your Favicon
The basic size to use is 16 x 16 pixel which is quite small to incorporate any creative ideas into it. Best way is to start with a larger square canvas to design and edit from before changing it it the required size. When you're done, make sure to save it in '.ico' format. If you are short of ideas, you can always browse through thousands of free favicons provided by Favicons R Us which you can edit it to your own taste as well.
Installing Your Favicon
Register a free account with Google Page Creator and upload your newly made Favicon as can be seen on the left image.
Then go login to your Blogger account, click on Edit Html in the Template tab and add in the following codes right after the <head> code:
<link href='http://youraccount.googlepages.com/favicon.ico' rel='shortcut icon'/>
<link href='http://youraccount.googlepages.com/favicon.ico' rel='icon'/>
Then save your template and view your blog. Usually it does not appear the very first time so just refresh it once and it should appear. Be creative and have fun!
Technorati Tags: favicon, adding favicon, blog design, optimize blog
Posted byDaryl W.T. Lau at 12:18 AM
Labels: blog design, favicon, optimize blog
I love designing as a hobby and appreciates it when themes portray the topic it represents well. I will be toying around with blogspot template designs in my spare time for public usage.
Great post. Check out my favicons on my ahoklah (http://ok-lah.blogspot.com) and auto lah blogs (http;//autolah.blogspot.com).
Hi Daryl,
I added your page in my blog's .
Thanks for linking to my blog !
Cheers,
Edward
Hi,
May I ask you a question, in your report, it says: Money4Blogs-------------- $ 18.00 - 1yr period (paid)
Is the 18$ the same for each person? As i applied for it after clicking it on your site and i received an email telling me something below:
"Many thanks for your submission; I would like to offer you $6 for a text
link on your blog for a year, payable when the link is live.
Please let me know if you would like to proceed.
Thanks again,
_____________________________
Ben Parkyn
Money4Blogs"
He offered me $6 dollar per year. Why it is much lower than your $18 per year? Do you know why? Thank you very much.
Here is my blog http://shallwedance2007.blogspot.com , I have leart a lot from your blog, thanks for your generous sharing.
Keep up your good work.
Hi Xiaoli... yeah u r right... they offer depends on their own criteria. My other blogger friend received $40 for his blog also. I'm not sure how they figure the value but I guess a little is better than none at all.
Cheers!
Daryl
Thank you for your reply.
To your success.
-xiaoli-
Hi, Daryl. This is Eric. Thanks for your help in the email. This is great post!
Most welcome bro!
Hi, im fuser from Favicons R Us...thanks for including my site on your post! Add you site to my directory and i will make it a sponsor link. The url is on my sig.
thanks again,
fuser
www.faviconsr.us
www.sc4m.com
www.globalsecure.info
can i use favicon on my wordpress website?
Thank you so much without this help i would have never gotten it done. So glad i came across your page. visit my blog if u like http://bewiseknowthefacts.blogspot.com.
can u make the favicon transparent?
Hi Daryl,
I got referred to your blog by Derek Wong of "Going the Wong Way".
I think you have a nice blog with lots of interesting stuff and I will surely come back more often.
But now first I am going to try to change my favicon in blogspot!
Thank you!
-Jos:)
Good post.. I have one concern over here. Is is legal to do this? I mean I hope doing this don't violent bloggers polices..
Thanks for your post. I'm having a bit of a problem, though. I've gone through all the steps you've suggested, including uploading my favicon.ico file to "google pages". Everything has worked fine EXCEPT that the favicon that shows up is not mine. It is the "google pages" favicon. Do you have any ideas about what's going on and how I might correct it. Thanks. -E
So informative! I learn a lot from your blog..and with this entry I made my favicons..please visit my site at http://dihayco.blogspot.com
Take care!
Great advice. Thanx man. I hope I will be able to do a favicon for my blog too at http://www.mdro.blogspot.com
thank u so much! u saved me from headaches! hehe
happy new year!
I had the same problem as Elena when I tried this. I changed the code a little bit and it worked. If you run into this, use the following:
link href='http://yourname.googlepages.com/velocicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/
I also renamed the .ico file from favicon.ico to velocicon.ico
The third thing I did was to make sure this bit of html was below the title tag, not above.
I had the exact same problem as elena, above: "Everything has worked fine EXCEPT that the favicon that shows up is not mine. It is the "google pages" favicon. Do you have any ideas about what's going on and how I might correct it."
thanks for any help!
Great post. I had to skin the cat a different way after myfavicon.com apparently went belly up!
My all singing and dancing favicon is now back up on my Pseudo-Science of Love blog.
To Elena (and others) - Googlepages doesn't seem to like it if you call your icon "favicon.ico". Rename it to something else and hey presto!
Pete was of tremendous help. It stopped showing the Googlepages icon and displayed my own icon only after I renamed it as blogicon.ico.
Thank you too, Daryl!
I didn't realize until recently that MyFavatar.com no longer exists. Your post helped me get my favicons back up & running!
Asante sana!
Villager
Thanks. Worked perfectly on my blog.
THANK YOU!!! I have been playing around with favicons for several weeks trying to get them to show up on both Firefox and IE in good quality. I've read TONS of tutorials and tried several free .ico generators/hosts and I wasn't happy with any of them...until I found you!
does anyone know how to change blogspot favicon? I want to have my own.
I created one using SM Favicon Generator but dont knw how to change my blog with it. please help
Blogger Favicon overrides my favicon even with this code and proper uploading.
Booh!
Anyone else have the lingering orange blogger icon even after doing this?
Note: I am publishing externally on my own domain.
Thanks! Had to tweak a little because Page Creater is no longer available. But Google Sites worked fine. Fo those having trouble start over and be very careful that you leave the ' at the beginning and end of the code you paste (when you add your URL) I made the mistake of not noticing them disappear with the first one I changed and the B lingered...found my error fixed it and voila!
Thank you again.
Thanks for the information. I have added the favicon in my blog. It looks well and good.
http://maduraimeenakshitempleforu.blogspot.com
The CHIMP on your server you may be able to skip this code and add the icon (as favicon.ico) to the root of your server DIR
Hi there - Great tutorial! Thank you so much for taking the time to write it up.
I am having the same problem as a few others - the "B" favicon that Blogger uses is overriding the one I've uploaded. I had to use a different host (since Google Page Creator is no longer) - so I uploaded mine to 110MB.com. (Where I created an account just to host the .ico image.) I've placed the code exactly like you've stated (swapping my info for the info used in your example), but it's still the orange "B".
I'm so frustrated - been at this for almost 2 hours and still stuck. Can you please contact me and let me know what I'm doing wrong? I would be very appreciative.
Thanks again,
Katherine
queenkatherineATgmailDOTcom
Greetings,
I'm having the same problem with the lingering orange B. How should i go about fixing it?
Thank you so much for your tutorial,
Jacob Duchaine
thanks tried this trick at my blog :)
www.itsfilmi.com
Thks for the tips. I found that we don't have to use .ico extension. With png or jpg, it still working. I try it with my blog. Oya, I host the favicon file at photobucket (it won't accept .ico extension).
IT WORKS!!!!!
Already implemented on 5 sites like DesiChords
Also changed my favicon to this solution with 110mb.com instead of Google pages as iconj.com ceased to exists.
I just want to report that I was having the same problem; I migrated from FTP publishing to hosting on blogger, and my favicon stopped showing up.
Renaming it blogicon.ico did the trick!
Great !!! THK Q for sharing ...it's funny.
Many institutions limit access to their online information. Making this information available will be an asset to all.