Figure 1 - Showing the use of custom icons in the address bar and Favourites menu
Creating your icon
First of all you need to create your icon. This can either be a 16x16 or 32x32 pixel icon saved as an '.ico' file. (NB: Microsoft reports that IE5 will only work with 16x16 pixel icons, however, I have used 32x32 pixels and experienced no problems!) There are many freeware and shareware programs available on the Internet with a whole range of features that will let you create wonderful icons. Many will even help you convert an existing picture (bmp, jpeg, or gif) into an icon. This, in itself, can be great fun to play with.
I used a piece of shareware software called IconCool Editor to create my icon and yes, I even created it from an existing jpeg image.
Figure 2 - Creating an icon using Icon editing/creation software
Once you have created your icon, we need to think about how we are going to display it in the address bar and on the Favourites list.
Linking the icon to your web page(s)
There are two ways of linking your icon to your web page. The first way enables you to link your icon to every page on your domain and is very simple to achieve.
All you need to do is rename your icon to 'favicon.ico' and upload it to the root of your domain. For example: www.pspiz.com/favicon.ico. Once you have done this, each time a visitor who is using IE5 adds your web page to their favourites list, Internet Explorer will automatically search for this icon and add it next to the link and quick links originating from your site.
The second way you can link your icon to your web page is by making an entry in the web pages on which you want to show the icon. In this way you can show different icons for different pages.
You will need to name your icon(s) to something other than 'favicon.ico' and upload them to your web server. Next you will need to add a new tag to your web page with in the HEAD tag on each page where you require your icon.
Figure 3 - Using the LINK tag to link the icon to a page
As you can see from Figure 3 the LINK tag is very simple, and the only thing to watch out for is that you include the right HREF to the location where you uploaded the icon. For instance if you put your icon (called 'myicon.ico') into a folder off the root of your domain called 'icons' the HREF path would read:
http://www.mydomain.com/icons/myicon.ico
As I said, fairly straightforward stuff.
Add to Favourites Option
So now that you have spent time creating your icon and linking it to your web page you want to encourage visitors to add your web page to their 'Favourites List'. Right?! Well below is a small script that will give visitors to your site the option to do just that.
Figure 4.1 - Script to offer visitors and 'Add to Favourites' button
When visitors click on the link in their browser the 'Add Favorite' dialog box will appear and enable your page to be added. This can be seen in Figure 4.2.
Figure 4.2 - The result of running the script from Figure 4.1
What now?
Well, perhaps now you might want to create a nicer button for your 'Add My Page To Your Favourites' link, or perhaps a nicer font, or whatever. Or just find a nice way of integrating it into your web page. Have fun and enjoy.
But do remember that only people visiting your site using Internet Explorer version 5 (and above) will see your icon and script.