Fri 9 Jan 2009
Gmail changed its favicon, How to add one to yours ?
Posted by cyriac under Tips & Tricks
[13] Comments
After a long stretch of work time in front of my laptop, I was about to call for a time-up. Then I checked my email once again, which is then I found out, Gmail changed their favicon!!! Earlier it was a simple G ,but now they have added some colors to it.
- gmail_new_favicon
- gmail_old_favicon
I like the change anyway, its about time.
First of all let me tell clarify what a favicon is, to the ones who don’t know what am talking about. Favicon is a small graphic associated with every website (page). It is essentially the icon in internet, similar to that in your computers.
So Gmail has changed their favicon, have you ?
Here’s how to add a favicon to your site.
Step 1: Create your favicon.
You can either download from the tens of thousands available from internet.
You can create one yourself. Make sure the image size is exactly 16X16, not a pixel more.
Tip: While creating you can use larger sizes such as 32X32 and then resize it.
Make sure your the file type extension is .ico (windows icon).
Step 2: Upload it to your root folder using any FTP client.
Step 3: If you had named the file with “favicon.ico”, then the favicon should automatically show up. Most browsers will automatically pick the icon up.
If its not comming, dont panic. Clear your cache then you re-try, even try another browser or try after some time, it should work.
Step 4: Add the following code to your <head> section.
<head> <link rel="SHORTCUT ICON" href="http://www.mydomain.com/myicon.ico"/> <title>My Title</title> </head>
Actually the standards set in internet recommends that you use Step 4 not Step 3.
Thats how you add favicons. Try adding a favicon for your site now itself. Did you succeed or failed ? Did you resolve the problem ? Share your experience to others here as comments.
Related posts:
- How to change Gmail Theme? Gmail has now become the most popular email service provider...
- Manage multiple email accounts using ONE email account Do you have more than one email account and do...

(4.67 out of 5)
(4.00 out of 5)
Nice tip…Thanks buddy.
@Georgy
Had you noticed it before or after reading this article ?
I saw the change only today morning at 4am…when I was tracking visitors to my blog thru feedjit, I saw a new favicon…
Google is always changing for good…the only thing which didnt change for a long time was this…Now that tooo modified!
I LOVE GOOGLE.(not just bec they gave mine a pr2)
Yup….
Slowly, but for sure. Google is turning into Evil (I think they already have started). Think about Microsoft!
@cyriac
“Make sure the image size is exactly 16X16, not a pixel more”"Make sure your the file type extension is .ico”
In techseol site and my site a large .png images are used as favicon -96*96 px! I
But in the new favicon of Google the g is not so readable.Nice tips once more there Cyriac… But where is your Favicon!!?
@linjo
)
thanks for the encouragement (consider encouraging me by buying me a beer too
i think google’s favicon is fine. it is readable fine, if you look at the white color not other colors..
my favicon……….:D
One glass of beer for u…
http://upload.wikimedia.org/wikipedia/commons/d/d7/Lager_beer_in_glass.jpg
mouth watering……….
This is a nice tip Mr. Cyriac.

.
But How can I make a ‘.ico’ image
There is no ’save as .ico’ option in MS Paint, Photoshop, Corel and Illustrator
Can you help me?
@Sheker
I am out of station, so i couldnt check in photoshop. but i checked in paint though.
After you are done editing the icon, while saving, choose “save as”, and then just type the filename as favicon.ico (dont bother about the file extension option right below, let it be anything). the required file will be automatically saved.
this worked for me. let me know whether it does for you.
This is right here, in the present, not the future.
(sorry to bring this post back from the dead, but…)
If you use step 4 it doesn’t have to be .ico