What is Favicon?

Posted: November 16, 2007 in HTTP World

What is small icon in front of URL in address bar? Or in bookmark?

Before few months ago, I was surfing web, I seen an icon in front of URL in address bar. I was wondering how it happen. I bookmarked that site immediately to review later, I seen that when I bookmarked that site same small icon is appearing in bookmark too. It was really cool feature.

I have hundreds of sites bookmarked in my favorites, when ever I found any useful site I just bookmark it, now it take time to find out particular link from 100’s of links, but favicon is really time saver in this, because we can identify link from his icon attached with bookmark. Is not it cool? May be many of you know what is that icon but that was new thing for me to RnD.
Finally what is found after some search, that icon is called “Favicon”. Mozilla Firefox, Internet Explorer (“IE”) 5.0 and above has a facility where, if someone bookmarks your website (ie puts it in their “Favorites” menu), it associates a particular icon with your website in the bookmark.

Browser tries to obtain that icon by first requesting for “favicon.ico” from the directory of your web page. If it cannot find such a file, it will try to obtain it from the root directory of your website, failing which; it will simply use a default icon for the bookmark.

On the other hand, the favicon.ico file is available, the icon will also be displayed beside your website name in the “Favorites” menu, the location bar in IE, and if the user opens up the “Favorites” folder, it will be the icon used for the link to your site.

How to create Favicon?

You can also create favicon for your web page; here is the way how I have created favicon for my website.

Software required – An icon editor. To create favicon we need an icon editor. There are lots of free icon editors one of them IconFx (http://icofx.xhost.ro/).

Here is one alternate too if we don’t want to download any icon editor. There are lots of free web utilities who create favicons in fly from our supplied JPG, Gif files. One of them http://www.favicongenerator.com/.

Now we all set to create our favicon. Now create image 16X16 or 32X32 pixels in size. Yes, it is really small and you can’t really draw much in it. You can even put both 16X16 and 32X32 pixel icons into the same icon file. Windows will use the former for its menus and the latter when the user opens up a folder that is set to display large icons. It’s probably not really necessary to do this if you can’t be bothered.

Save the image as an ICO file (named “favicon.ico”, of course).

How to implement ?

– Upload on server : Now upload it to your website. You don’t need to upload one to every directory of your site if you don’t want to waste space – simply put it in your root directory and IE will apparently locate it eventually. You can also upload it into your images directory, but you will need to modify your web pages if you do.

Hey one of my friend tried to upload ico file on server but his host did not allowed ico file upload, if this is somelike situation with you than no worry, just upload favicon file with .gif extension and after FTP on server rename it to .ico file 
Now we have created our favicon and uploaded it on server now next step is to tell browser about our favicon. Here is how to do this-

– Integration in web pages: If you have placed your favicon.ico file in a location other than the current web directory (relative to your web page) or the root directory, you have to help your visitors’ browser locate the favicon file by specifying it with a tag like the following in the <head> section of your web page.
<link rel=”shortcut icon” href=”/favicon.ico” mce_href=”/favicon.ico” type=”image/x-icon” />

You should replace “/favicon.ico” in the above example with the actual location of your favicon.ico file, for example, “/images/favicon.ico” if you have placed it in your “/images/” directory.

This step is optional if you have put your “favicon.ico” file in the standard locations, ie, in the same directory as the web page or in the root directory of your website. Otherwise you will need to modify all your existing web pages to take advantage of the “favicon.ico” facility.

Some advantage of favicon.ico –

As is told in starting of this post that favicon helps in finding out particular link from lots of bookmarked link.
Another advantage of favicon is that we can count how many visitors had bookmarked our site or web page. Surprise how??? Simple count the requests for “favicon.ico” in your web server logs. From that number, you can estimate the total number of people who bookmark your site by applying this formula: number of IE 5 bookmarks divided by the fraction of your visitors using IE 5.

But this will only work with IE rest of browsers like Firefox, Opera etc load the favicon.ico to display in your visitors’ location bar whether they put your site in their favourites (or bookmarks) or not. So it will not help in case of these browsers.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s