advert

Adding Favourite Icons to Your Web Pages

How to add custom icons to your web site

You may have noticed that some web sites put a custom icon next to their name when you store them in your Internet Explorer Favourites. This can be easily done yourself and adds a uniqueness to your web site as well as giving it that extra tweak to show the world you have a rough idea of what you are doing!

What's the Deal?

You can add an icon to your web site such that when people see the web site name in their favourites lists or in the web site address box, they will see a custom icon on the left hand side. You can use an existing icon if you have one or design your own using a suitable editing package. You should try to make the icon describe your site and also match the general colour scheme. As an example, if your web site is all about aircraft, you could have an aircraft as the icon. If your site is just about you, you may want to use your initials.

The only downside is that you are rather limited on the size of icon you can use. Whilst you can use a maximum of 32x32 pixels, most designers tend to stick to 16x16 in 16 colours to ensure compatibility with as many web browsers as possible.

What Software Do I Need?

There are quite a few icon editors around. Some are free such as 3D Icon EDITor ( www.webmasterfree.com/iconeditor.html) and some are shareware. A particularly good one is IconForge which can be downloaded from www.favicon.com and costs $37.95. This is a lot of money if you only want to create the odd icon so for one of the free ones, check out what is available at www.webattack.com.

How Do I Add it to My Web Site?

The simple approach is to create an icon named favicon.ico and put it in the root directory of your web site. That's all there is to it. To be extra sure, you can force the browser to recognise it by using the following code snippet:

<LINK REL="SHORTCUT ICON" HREF="http://www.yourwebsite.com/favicon.ico">

This trick also lets you use a differently named icon if you so wished. With this trick you can in theory have different icons for different pages but you should really stick to one icon for the whole site. If you think people are likely to bookmark any particular pages other than the main page, you should add the above bit of code there to ensure the icon gets picked up by the browser.

When you upload your web site, make sure you remember the favicon.ico file as well as the web pages as it can easily get forgotten. If your web design software makes this tricky, you can always use an FTP program instead.

Certain ISPs, though, do not allow the upload of the favicon.ico file, in which case you may need to host the file on another ISP and amend the code snippet above to point to it.

Where Now?

There are lots of resources on the web for icon fans. Check out www.favicon.com as a starting point. There are also sites with lots of pre-drawn icons should you feel your own skills aren't quite up to muster.

 

Iain Laskey
See Iain's site at www.pcbookreview.com

Keep up to Date with PPC

RSS feed icon

Add to Google

Free Sitemap Generator