Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials

WHAT IS FAVICON (Or the Icon in general)

It is the little thing you see on your Location bar (History/Address bar) when you visit a web site, on the left of http://. For example, if you view a site through Internet Explorer, you see an e superimposed over a blank white paper sheet. The icon also shows up when you press CTRL+D to save the link in your Favorites folder. I think the icon is showed anywhere you store the link, whether on the Desktop or some other place.

But some web masters prefer to have their own icon. Apart from being an ego issue, it makes the web site memorable, and more prominent in the list of hundreds of Favorite links (gosh! do you ever visit them?!), or repulsive if you make an ugly icon

COMPATIBILITY

It only works with IE5 or higher versions. Otherwise browsers like Netscape Navigator and Opera do not support such an indulgence. Well, to be frank I haven't checked with the current versions (I have IE5, Netscape 4.7 and Opera 5 on my machine). But the last time I read, more than 75% surfers are using IE5 or plus these days.

MAKING THE ICON

In the following steps, you can create an icon from your web site. This reminds me, a more complex icon can be created by a software like Microsoft Photodraw where you can first enlarge the view without distorting the pixels, create the icon, and then reduce to the normal size and then paste it into an icon editor. Look out for a similar editor if you don't have it.

Take care that the icon you make/draw/scan/steal has a dimension of 16 x 16 pixels. Preferably, in 8-bit color.

Now go somewhere, where there are lots of downloadable programs, and download "Icon Collector Graphics Editor" from http://www.greatowl.com. I mention this software because somehow I have it on my computer, and don't remember when I installed it. Probably I was trying to make a Favicon for myself but then changed my mind. On second look, I didn't change my mind after all. The icon does show up if you load my web site - http://www.bytesworth.com - and maybe in buffer it doesn't show up.

Anyway, there is another program called ForgeIcon - try to find it on Google. If you don't want to download any program, go to http://www.favicon.com. They have an online software to help you make the icon.

Use your artistic genius to make the icon, and name it as "favicon.ico". All icon files have the extension .ICO (but of course).

UPLOADING IT

You need to upload the icon on your server if you really want it be visible to your visitors. For that you need an FTP program. I use CuteFTP that you can probably get at http://www.cnet.com or some other free download site.

Some simple folks also use the good old browser to upload a file by simply typing the FTP path in the location bar. In the case of the browser, you just have to copy-paste the file, that is, if you have the login and password.

Then, save the favicon file in the folder where you want it to appear. For example, if you want it to appear with http://www.maindomain.com then you save the favicon file in the root folder of your server, that is, it's path should be http://www.maindomain.com/favicon.ico. But, if you want a different icon to appear with http://www.maindomain.com/subdomain/anotherfile.html, you need to store the new icon (with the same name - favicon.ico) in the folder "subdomain", that is, the path of the second icon file should be http://www.maindomain.com/subdomain/favicon.ico.

After this, whenever your web site is accessed, the icon shows up, and it remains there when the site is book-marked or added to the Shortcuts section of the browser.

So this is how you can create and use your own icons on your web sites.

About the author:
Amrit Hallan is a freelance web designer. For all web site development and web promotion needs, you can get in touch with him at http://www.bytesworth.com. For more such articles, visit http://www.bytesworth.com/articles You can subscribe to his newsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricks by sending a blank email at bytesworth-subscribe@topica.com