How to create a favicon for your website

A favicon is an important element to include on your site as it strengthens your brand and gives your site a unique identity. This post will describe how to take an image and convert that to a favicon for use on your site.

Selecting an image for your favicon

The image that ends up as your favicon and appears on your web browser tool bar will be 16 x 16 pixels in size. This is a very small number of pixels so it is important that you do not choose an image that has too much detail in it as a large part of that will be lost when the image is shrunk. Good images to choose from are symbols, letters, or distinct images like flower heads or stars. The image also needs to be square so crop it in your favourite image editor if it is not. The number of pixels is not important at this time but your source image should ideally be 192 x 192 or bigger so that there is a reasonable quality to begin with.

The other approach is to use an Icon Editor to draw your own icon. This can be a bit trickier than it sounds but is well worth spending the time to create your own unique style. Our favourite icon editor is X-Icon Editor . This tool will also allow you to import any picture that you want to use and allow you to do detailed edits on it. The image used for the icon on this site was imported into the tool and it showed the following as the preview.

x-icon-preview

The tool also allows the icon file to be exported for your use.

Adding the icon to your website

There are two parts to adding the icon to your website. Firstly it needs to be downloaded to the website; you would typically do this using the ftp client that you use as part of your development. Note that the file does not need to be placed at the home directory, it can exist in any folder. The image used on this site is stored at http://www.linearthoughts.co.uk/images/favicons/favicon.ico for example.

The final thing that needs to be done is to add a link to this in your home page. The following code should be added to the head section of your page if the icon is in the home directory.

	<link href="favicon.ico" rel="shortcut icon" />

If it is in a folder at a lower level, the href reference just needs to be changed to show the longer path. For example, the code to use the favicon on this site is

	<link href="http://www.linearthoughts.co.uk/images/favicons/favicon.ico" rel="shortcut icon" />

Note that if you are using wordpress there are number of plugins available that can setup the html for you and in some cases download the image as well.

Further reading

3 Comments

  • Any good ideas for how get a good looking icon? My experience of drawing freehand into tools like the one you mention here are that the result is ok but not particularly eye catching.

    • Hi Neil, Its a good point. I have updated the post to add a link to Jon Hicks article that he wrote for .net which talks more about that.

  • Web Design Manchester

    Hi Kev,
    Could you recommend me a tool which you can use to create favicons for not just web browers, but also phone applications and windows 8 icons?
    Many Thanks