![]()
Web Icons
By: Editor
You may have noticed, when you have book marked a website such as
Shoutcast, 3Dfx, FireTalk, Yahoo or Altavista; how it shows a little picture
in your bookmarks or "Favorites" window.
These little pictures are called Web Icons, and they are currently a "status
symbol" on the internet - those who have one are usually the mega-websites;
well now you too can have one of these Mercedes class features on your
Honda budget.
First you need to create a 32x32 pixel sized icon file.
You can do this in various ways. The easiest way is to find an icon collection,
and pick an already created icon, that suits the theme of your website.A good place to look for icon collections is download.com.
To get you started we have made a collection of icons available for
download by clicking this link.
Next you will need to rename this icon file to favicon.ico and upload it
to your server. (If you need help uploading, check out our how to sections.)
Fresh baked Icons Anyone?
The other way is to make one from scratch.
You will need a bit of artistic skill here, and a copy of a good icon editor
such as Michelangelo or Icon Easel which is highly recommended.
Set your icon editor up to 32x32 and simply paint your icon, when you save it
you will need to name it: FAVICON.ICO.
Again - take that file and upload it on your server.
You can also create your Icon online by using the Java icon editor
over at: www.favicon.com - Very cool!Our preferred method was to use a GIF or JPG from either an original
drawing or file OR a screen snapshot.
Here is how you do it:
Say you have a nifty wallpaper, and you want to make an icon out of it -
All you have to do is minimize any programs that might get in the way and
press your PRINT SCREEN button. This places a snapshot in your clipboard!
Now all you need to do is load up your preferred paint program, such as
Adobe Photoshop or Paint Shop; and paste the file you just grabbed.
You will want to crop the section of the image so it only shows the part
you want to make an icon out of.
Now you will need to RESIZE the image to about 50 ~ with the other
dimension tied in perspective. Which is usually fairly close - for example:
50x46
Save this file as a .BMP file (windows format).
Now you will want to download BMP To ICO a VERY cool program
which lets you take these .BMP files and make them into .ICO files.
You can download this program by following this link.
Use BMP To ICO to load your .BMP file, then select CROP.
If you already resized your image to 32x32 then you will want to go
ahead and select CONVERT.
What's The Skinny Lou?
There are a few basic guidelines. First - a 32x32 icon may look great when
on your desktop, but look a bit squashed when displayed on your toolbar-
so design your icon carefully so it looks good in either size.
To find out if your icon will look good small, zoom out to 16x16 and view it.
Two- You must upload it to your root HTML directory.
For example:
I have Andres Auto Website, my index.html file is located:
www.andres.com/Auto/This is where you will also want to upload your FAVICON.ICO file.
You can have different icons only by putting them in Sub-directories.
For example, if I also have a Bass Fishing page on Andres Auto Website,
and its file bass.htm is located:
www.andres.com/Auto/Bassfishing/
This is where you would upload a different icon, BUT with the same name:
FAVICON.ICO
The simplest way to do this is to rename the files once you have uploaded them,
this way you do not overwrite your original icon on your hard drive.
In Conclusion
You should end up with a pretty cool looking icon - Have fun!