A Custom Icon For Your Web Site

Jan 13
22:00

2002

Amrit Hallan

Amrit Hallan

  • Share this article on Facebook
  • Share this article on Twitter
  • Share this article on Linkedin

WHAT IS FAVICON (Or the Icon in ... is the little thing you see on your Location ... bar) when you visit a web site, on the left ... For example, if you view a site throu

mediaimage

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,A Custom Icon For Your Web Site Articles 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.

Article "tagged" as:

Categories: