The 5 Minute Favicon

Its always nice to finish off your masterfully designed website with a personal touch and a favicon, the tiny image which appears by your URL on your browsers address bar and on your favorites section, is the proverbial cherry on top.

1. To create your own favicon the first step is to decide on the image you would like to use. We usually find that a simple, relevant image from the site itself, perhaps from your logo or from a meaningful image tends to work well.

2. Once you have decided on your image it is time to open it up with your favourite image editor. In this example i shall be using a screen grab of our sites logo and we will be editing with Microsoft Paint.

To create a screen grab press shift and print screen this will copy an image of what is currently displayed on your desktop to your clip board.  You can then copy the image as usual to your image editor

3. The next job is to cut out the part of the image you would like to turn in to a favicon.

The easiest way to do this in Microsoft Paint is to move the whole image so that the top left hand corner of the part of the image you want to use is in the top left hand corner of the editing space as shown below:

We next crop the chosen part of the image in a square. We can do this by putting our mouse over the little blue square at the bottom right of the image:

and dragging the screen in towards the top left hand side until it is flush with bottom right of our required image like so:

4. Now we have our image we need to resize it to 32 by 32 pixels. You do this from the top menu option Image -> Attributes.

5. And by changing the width and height of the image to 32 pixels.

6. Next save your image as a gif.

7. Now that we have a suitable image we need to convert the .gif image into a .ico file. The easiest and quickest way to do this is to use an online tool such as http://tools.dynamicdrive.com/favicon/.

From this page just browse for your image and click on the create icon button.

View the preview of your favicon and if your happy click the download favicon button.

8. We now have a working favicon file!  Next step is to get it on to your site. To do this you will need to be able to edit your website code and access your sites files via ftp.

First of all you will need to upload your new favicon to your site's server.  We usually drop the favicon in our site's root folder, the same folder which contains your index file.

Next you will need to add the following piece of code into the head of each of your page files making sure that you are pointing the correct address within your sites file structure.

for example:

If you cant see your favicon right away after refreshing your browser try clearing your browser cache (in tools -> clear private data in firefox and Internet Options -> General -> Delete (under browsing history) ->  delete files (under temporary internet files) in internet explorer 7.

And that should be that!  If you have any questions please leave a comment and we'll get back to you as soon as we can!