Adding a favicon to your website

Introduction

Firstly, what exactly is a favion? Well it's short of favourites icon and is a small image, most often 16x16 pixels, displayed in the address bar amoungst other places in the browser window. Favicon on spyka Webmaster An example of a favicon is shown to the left on the Firefox 3 browser. Older browsers, namely Internet Explorer 6.0, only show a websites favicon if the website has been bookmarked by the user. All new browsers (Firefox, IE7.0+, etc) will always attempt to display a websites favicon. Favicons also may show in the tab, bookmark and history menus depending on the browser.

Creating the favicon

Your favicon image needs to be 16 x 16 pixels. Clearly this doesn't leave much room so many favicons are very simple - maybe just a colour or a few letters. However there is room for creativity. Here are some examples from popular and well known websites to give you a few ideas:

Favicon
Now the image needs to be .ico format. Your graphics package may be able to create your favicon in this format however if not you can simply save it as a more common image file (.jpg, .png and such) and convert it using one of many online applications. Personally I use ConvertIcon which will allows you to convert PNG files to ICO files. Favicon.co.uk allows you to convert a wider range of image files to ICO files. Name the file favicon.ico

Adding the favicon to your site

You should upload your favicon.ico file to the root of your website - that is you can access it directly at yourdomain.com/favicon.ico (example). Many browsers will look for a favicon at this location automatically however to make sure every browser knows about your brand new favicon you'll need to add a line of HTML in any pages you want the favicon to show on. Inbetween the <head></head> tags add the following line of HTML:

<link rel="icon" href="/favicon.ico" type="image/x-icon">

If you are using a XHTML doctype you'll need to use this code instead:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

And it's all done! You may have to restart your browser and/or clear your cache for the favicon to first show.