« tech pages
|
CREATING A CUSTOM BOOKMARK ICON
Internet Explorer 5+ automatically looks for a 'favicon.ico' file (short for 'favorites icon') whenever a user tries to bookmark a page.
This is a customised little icon which sits next to the site's name in the favorites menu and in the location bar. If the browser can't find a 'favicon.ico' file, it uses the boring IE logo instead.
To replace this icon, you have to create your own .ico file, exactly 16 x 16 pixels in size (there are some alternative larger sizes, but it's best to start with this one first). To guarantee maximum compatibility, we'd recommend using 16 Windows colours.
You can create this file by converting an existing graphic to an .ico file using free graphics software like IrfanView, but you might get better results using the free online editor at www.favicon.co.uk/ or looking up dedicated freeware/shareware editors at sites like Shareware.com
If you've got the time - and patience - you can create a memorable icon with just a handful of pixels to play with!
Once you've created your masterpiece, save it off as 'favicon.ico' and upload it into the same directory as your HTML files.
If you've a large site with lots of sub directories, it's best to place an .ico file in each one or add this piece of code in the <HEAD> section of your pages: <LINK REL="SHORTCUT ICON" href="http://www.yoursite.com/favicon.ico">.
You can also specify different icons for different parts of the site, if you so desire.
Be warned though that ico files are cantankerous beasts - sometimes you'll find that icons won't display on your machine at all, or if you try and update an icon, you can't shake off the old one.
Sometimes the only way you can check your icon is to bookmark your site on a 'fresh' machine. Please note that some ISPs don't support favicons, so check first!
More tutorials/resources:
Creating Your Own Favicon.ico Icon For IE5
Online favicon gallery
'Max Hits' my web design book!
« Back to tech homepage
|