A Favicon for your Website

Short for “Favourites Icon”, the tiny favicon is an extra touch that gives your website a more professional look and makes it stand out that little bit more. As well as replacing the browser’s default images appearing next to website names in the lists of bookmarked websites (favourites), they show up all over the place. You’ll find them next to the websites’ URL in the address bar of a web browser, on tabs in tabbed browsers, against website addresses in the browsing history and as a desktop icon for internet shortcuts to your site.

As part of your branding and image of your site, the favicon usually reflects the look and feel of your web site or your organization’s logo. Since when displayed in a browser, the size of the icon needs to be a tiny 16 by 16 pixels, the challenge is to be able to come up with a recognisable design. If you already have a logo you should first have it reduced it to the 16 by 16 pixels size to see if it holds up. If it doesn’t look good at this size, work with the 64 by 64 pixels canvas and try creating a simple design such as an image or letter(s) that represent your organisation incorporating colours from your website’s palette.

Although most browsers will accept other formats such as GIF and PNG, the norm is to use the ICO format, the file being saved in the web root directory as favicon.ico. This format has the additional advantage of supporting a number of versions of your icon with different resolutions. Since 48 by 48 pixels icons are usually used for the desktop shortcuts and a scaled up 16 by 16 pixels image will probably look blurry, an icon of this size as well as others to cover other eventualities can be added to the favicon.ico file for this purpose.

Once you have your favicon, you may find that it isn’t displayed when you have a look at your website. Depending on the browser, you may need to delete caches, temporary files or the browsing history. Another trick is to place a ‘?’ at the end of the URL which will trick a browser into thinking the page is new and not cached. To complete your implementation of your favicon, you may also want to use a prompt to encourage visitors to you website to bookmark your site. When having such a feature added to your website, you should note that although this can be done via a pop-up window in Internet Explorer, most other browsers require the visitor to use CTRL-D.

So if you don’t have one, go ahead and ask your website design about getting a favicon.

, ,

No comments yet.

Leave a Reply