Favicons for all the Family

Take a look at your browser bar. Chances are that there’s a little icon in there right next to the URL of the website. Now, you may be asking yourself how has the owner got rid of the blue E or plain page that is normally there? That’s what this articles intends to show you, along with discussing the various uses of your new ‘favicon’.

Favicons seem to be sprouting up everywhere now a days. From the G next to Google’s URL in your browser bar, through to the icon next to your bookmarks (or favourites as those who still use IE would have it). Despite what many people seem to think making a favicon is quick and painless, and it adds a professional touch to your website, as well as making in more memorable to your visitors.

The easiest and best way to make a favicon is to create an image you feel comfortable with and then visit http://www.chami.com/html-kit/services/favicon/ to convert it into an .ico file of the correct size. Then if you like the preview download the resultant .zip file and extract the file ‘favicon.ico’ to the directory where your web pages are stored on your local disk.

You could now upload this file straight to the root directory of your server and forget about it. Internet Explorer will automatically look for that file coming when it looks at your page, and Firefox will copy this incorrect behaviour. But what happens with other browsers, or if you don‘t store all your files in the root directory? There is a simple fix to both of these.

With regards to subdirectories you could simply upload the favicon.ico file to each subdirectory individually. But in addition to being a waste of both time and resources this doesn‘t resolve the ‘problem‘ with older and alternative browsers such as Mozilla not automatically looking for the file. To fix both of these issues at the same time you need to add the following code to the ‹head› section of your pages:

‹link rel="icon" href="http://www.yourdomain.com/favicon.ico" type="image/x-icon"›

‹link rel="shortcut icon" href="http://www.yourdomain.com/favicon.ico" type="image/x-icon"›

This code will both tell all browsers the exact path of the favicon, which means it will apply to all subdirectories as well. In addition having this code at the top of your pages will tell other browsers to look for the file, hence meaning your loving crafted icon shows up in all browsers.

But what are the real advantages of having a favicon? Well I think I‘ve already mentioned two of them. Firstly you‘ll notice that all the big hitters like Amazon, Google, MSN and Yahoo have one. Why? Because it gives the website a professional look, saying to your visitors that you care enough to brand your website. It is the ‘rel=icon‘ section of the code which achieves this by placing the icon in the browser bar.

Another major reason is, of course, branding. One of the defining criteria of a good website is it‘s ‘stickyness‘, the way in which it encourages visitors to visit again and again. So if your website is sticky, then people are liable to bookmark you. But have you looked at your bookmark folder recently? How many hundreds of bookmarks are in there? A lot I wager. So you need something to make your site stand out and, guess what, that‘s exactly what your favicon does! Thanks to the ‘rel=shortcut icon‘ code whenever your site is book-marked it has your flashy logo displayed to the left hand side of it.

So in conclusion a favicon is quick and simple to create and implement, while your site a professional look and increased visibility. So what are you waiting for?