Ever wondered how those tiny bookmark icons are made to appear in your favourites list? Ever wished you could do the same for your site? Find out how…
Surprisingly, it’s not as difficult as you may imagine if you use the right tools for the job. Most recent web browsers now automatically look for a fav icon file (favicon.ico) to display whenever a user clicks to bookmark a page. The customised icon is then rendered next to the site’s name in the favourites/bookmarks menu and in the address bar. If no favicon.ico file is found on the site, a standard web browser icon is displayed instead.
So to grab an extra piece of real estate online, first of all, we need a graphic. This could be artwork you already have to hand that can be adapted or a new graphic created from scratch if you prefer. The important thing to remember is that bookmark icons are tiny – just 16 pixels by 16, smaller than the tip of your pinkie finger. What you are not going to get is an icon with a lot of fine detail.
Instead of simply reducing an existing large image down to 16 x 16 pixels, it’s better to pick out a particular detail and concentrate on that, or create a new image that reflects your site’s colour scheme and/or company logo. Text is a non-starter at fav icon dimensions. A simple 16 x 16 pixels image can be created with most standard graphics packages, and it’s possible with a bit of time and patience to arrive at something to be proud of. When editing or creating, though, bump up the view to at least 400 per cent in order to see what you are doing.
If you don’t have a suitable image to adapt, it’s possible to create one from square one on favicon.co.uk or by downloading a dedicated freeware or shareware application from a site like download.com or tucows.com.
Once you’ve created a fav icon, it has to be saved as favicon.ico and uploaded to the main directory of your web site. Favicon.co.uk’s online tool emails your creation ready formatted to upload.
Large sites with lots of sub directories are best catered for by placing the .ico file in each directory or by adding this code snippet in the <HEAD> section of each page: <LINK REL="SHORTCUT ICON" href="http://www.yoursite.com/favicon.ico">
If you are so inclined, it’s also possible to specify different icons for particular parts of your site.
A word of warning though, fav icon files are temperamental creatures and don’t always do what you expect. It’s not unknown for them not to display at all, or if they are being updated, your browser insists on displaying the old one instead. In this instance, the quickest way round it is to bookmark your site on a different machine to see the change.
Computers, eh? Don’t you just love ‘em?
