|
Do you know what is Favicon.ico and how to create a Favicon Icon for your website?
Have you noticed a small icon next to the web site name in the Internet explore(IE) address bar? First thing you'll notice is that not all web sites have it. It is because they don't have a icon stored on their server to display in this area. You would also notice that if you have bookmarked this site, this little icon is also used in your "Favorites" menu.
Internet Explorer ("IE") 5.0 and above has a facility where, if someone bookmarks your web site (ie puts it in their "Favorites" menu), it associates a particular icon with your web site in the bookmark. It 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 web site, failing which, it will simply use a default icon for the bookmark. This default icon is usually IE default icon as you can tell.
On the other hand, the favicon.ico file is available, the icon will also be displayed beside your web site 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.
Some other browser such as Opera and Firefox also have the ability to use the favicon.ico file. In fact, Firefox also accepts the file in other graphics formats, such as the PNG format. These browsers display the "favicon.ico" in the location bar of the browser (the part that shows your Webster's address or URL). Safari, both the Mac OS X and the Windows versions, also loads the favicon.ico file into the address bar if available.
Favicon icon can make your web site stand out to your visitors. It is like your small trademark that advertises your online presence. So if you have a web site, it makes sense to create a Favicon and upload it to your web server.
How to Create a "Favicon.ico" File
As you may have noticed, a favicon icon is fairly small and standard size for a favicon image is 16X16 pixels. Creating a favicon i not a rocket science. To create a favicon, all you have to do is to create an image 16X16 pixels in size. Yes, it is really small and you can't really draw much in it. You should also restrict yourself to the standard Windows 16 colors, and 256 colors will work fine.
If you like, you can also create a 32X32 pixel icon, which will be scaled to size for the Favorites menu and the location bar. 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. Once you have created a favicon icon it is usually a GIF or JPEG file and in order to use it, you need to rename it to favicon.ico. I you run into issues with your graphic editor when try to rename this file, don't worry about it and upload it as a GIF file to your web server. Once uploaded, you can easily rename it to favicon.ico.
Upload it to your web site. 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 the web browsers that support favicons 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.
You also need to remember that just uploading it to your server isn't enough if you have not copied it to the root directory. You need to add a link in the html pages of your web site to indicate that you are using a favicon file.
If you have placed your favicon.ico file in 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" 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, that is, in the same directory as the web page or in the root directory of your web site. Otherwise you will need to modify all your existing web pages to take advantage of the "favicon.ico" facility.
How Many People are Bookmarking My Website?
This "favicon.ico" used to have an interesting side-effect. The side-effect applied whether or not you bothered to put a special "favicon.ico" on your site. You used to be able to find out the number of IE 5 users who bookmarked your site by simply counting the requests for "favicon.ico" in your web server logs, since IE 5 only asked for the favicon.ico file when a site was placed into the "Favorites" menu. From the number of favicon.ico requests, you could 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.
For example, if two-thirds of your visitors use IE 5+, and you get 60 requests for the icon, simply divide 60 by two-thirds to get 90. This was by no means an accurate measure - it did not take into account numerous factors; but at least it was able to give you a hint of how useful people find your site. However, this side effect is no longer relevant today. All the major browsers, Firefox and its derivatives like Netscape, Opera and Safari load the favicon.ico to display in your visitors' web address bar whether they put your site in their favorites (or bookmarks) or not.
If you are testing your favicon file in Internet Explorer, and find that you're seeing an old version of your favicon.ico file, you probably need to empty your browser's cache (and possibly restart the browser). Internet Explorer caches the favicon.ico file in the "Temporary Internet Files" folder, so if you don't empty the cache, you'll probably continue to see your old version and not the new version that you've created. Incidentally, this also means that if your visitors empty their cache, their copy of the favicon.ico file that was associated with the bookmark of your site will also be lost.
In addition, you should note that IE's implementation of favicon support is not particularly robust. There will be times it displays the favicon for your site, and other times when it won't. Don't be too bothered about this. If you need to test that you implemented your favicon correctly, test it in the other browsers. If it works there, then it's probably done correctly. From experience, whether a site's favicon shows up in IE or not depends on so many variables that it's best regarded as a random occurrence. This applies both to you and your site's visitors, so there's no point obsessing over it.
The "favicon.ico" facility is by no means essential to your website's operation. In fact, few people even notice its existence, and its really too small to put anything useful in it. However, creating one can save your site some bandwidth if you have created a custom 404 File Not Found error file - that file will be sent by your web server everytime there is a request for a nonexistent "favicon.ico" file. Perhaps more importantly, creating such an icon adds to the professionalism of your site, marking you as a web designer who attends to detail.
|
