Wednesday, 29 October 2008

Making a Favicon

I may have covered this subject before, but here is how I made my favicon for this blogspot blog:

1. First you will need to find a strong image that is going to be recognisable at 16pixels x 16pixels - you may actually be surprised at how much detail the human eye can see in such a small picture. Martin Lewis of actually has his photograph as a favicon...
So you have your picture - I can often be found searching for images using Google image search and then editing the picture beyond all recognition using 'Fireworks'...
Some cropping and colorizing may be required, but the final step will be to shrink that sucker right down to 16x16 and export it as a 'gif' file.

2. The next step you will need to take is to get the thing uploaded somewhere - can be anywhere as long as it has a unique URL... FTP the file to a site that you have control of or host it with a free image hosting service.

3. The final step is then to get some HTML into your template, this code can be used within the HTML of a normal website or a blog if you have access to edit the HTML. This should go somewhere before the /HEAD tag (end of head section), and should look something like this:
The red part is the URL of my icon (called 'hammer.gif'), this section in your code is the complete address of your icon including the 'gif' file extension. I have used this on a number of different platforms and it seems to work on all of them. Normally you can just leave a 16x16 gif file entitled 'favicon.ico' in the root of your website (assuming you can use FTP) and that will automatically become your favicon for the entire site. This little bit of HTML code gives you the freedom to place your favicon file anywhere and even have different favicons on different pages or sub-sections of your website.
If you copy this code letter-for letter into your site, my hammer motif will become your favicon, changing the red part allows you to pick any image on the web (limited to files of 16x16pixels...)

No comments: