Some time back, I had an email from a visitor asking me how I managed to have thefreecountry.com's icon displayed next to my web address (or "URL") in his browser's location bar. In fact, had he checked carefully, he would also have noticed that the icon is also used in his "Favorites" menu.
Many web browsers have 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. 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 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.
Most, if not all, modern browsers also have the ability to use the favicon.ico file. In fact, many of them also accept 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 website's address or URL).
If you have an Windows icon editor (which you may already have if you have a programming language development system for Windows), you're all set.
All is not lost, however, if you do not have one. Simply go to the Free Resource Editors and Icon Editors page and get yourself one. The page lists a few free icon editors and resource editors. Just choose any of the icon editors that strikes your fancy and download it. Alternatively, you can also download one of the other packages that contain a resource editor. Resource editors are tools that programmers use to create and edit Windows "resources" like icons, cursors (ie, mouse pointers), menus, dialog boxes, etc. For our purpose here, you will only need to use the icon editor portion of such resource editors.
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 colours, although I suspect that 256 colours 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.
Save the image as an ICO file (named "favicon.ico", of course).
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 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. See later in this article for more information on this.
If you use a free web host that does not allow files with the .ICO extension to be uploaded, you might try to work around it by uploading it (in binary mode) with some other extension (like GIF). Once it's on your site, rename it using your FTP program to the correct extension.
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" 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 website. Otherwise you will need to modify all your existing web pages to take advantage of the "favicon.ico" facility.
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 Internet Explorer ("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.
However, this side effect is no longer relevant today. Most, if not all, the major browsers load the favicon.ico to display in your visitors' web address bar whether they put your site in their favourites (or bookmarks) or not. I merely mention this "side-effect" in case you have heard from webmasters of old about the bookmarking issue, so that you won't deceive yourself when you see the large number of "favicon.ico" requests in your web logs: those requests do not mean much anymore.
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 the implementation of favicon support in early versions of IE (eg IE 6 and 7) is not particularly robust. (I'm not sure about the later versions.) 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.
Copyright 2000-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
What is Favicon.ico and How to Create a Favicon Icon for Your Website
