How To Create a Favourites Icon.(Favicon)

Ever noticed those little icons next to the names of websites you have saved in your favourites?

If you have, and wondered how you could add one on to your website. It is pretty simple, today I'm going to show you how to do it.

First off, have a think about how you might represent your school or business with a tiny graphic image that is no more than 16 x 16 pixels. This is no mean feat. Once you have come up with an idea. You will need a graphics package that is up to the job. I used Photoshop CS.

I recommend.

Photoshop or Photoshop Elements , Failing that Paint Shop Pro or The Gimp will do nicely.

These Graphics packages will allow you the level of control you need to make a really clear image. Some would argue, Why not use "Paint"? . Well my only answer to that is "why eat mince when you could eat steak"? Using the best tools helps you master the digital arts and introduces you to a wider range of artistic possibilities.

That said on with the tutorial.

1. Create a canvas of 16x 16 in your graphics package. It should go something like this.File/New/ width 16/ height 16 / resolution 72/
   
   
2. Choose you colours and add your text. The CLC favicon is borrowed from the BBC Favicon. I noticed it this morning and decided to remodel ours in a similar fashion.
   
   
3. I took a snapshot of the browser window using the printsceen key on the keyboard. I then used the zoom tool to zoom in on the favicon the BEEB had used.
   
   As I did this I noticed that their icon was quite pixelated, because the icon was so small the chance of your letters becoming to pixelated are high. I had to get round this ..I'll explain more in a minute..
   
   
4. I drew a box round the outside of the icon's border with the marquee tool, then I filled in the box with the dark blue colour I had chosen to fit the CLC theme.
   
   I then chose Arial as my font and wrote out the text using the text tool. There were only three letters, so the text didn't need to be too fussy. When designing for the web, more often than not, less is more.
   
   
5. As I mentioned in point 3, the text looked pixelated, so to get around this I needed to draw round the text to give it a crisper edge. I selected the text layer, then the
   layer menu/rasterize. This changes the properties of the text layer so it can no longer be selected and altered with the text tool. It becomes a normal graphical layer.
   
   This enabled me to use the marquee tool to draw around the edge of the letters to make them crisp and unpixelated.
   
   I used Snag it to make a little video tutorial of how I did this part.
   
   Watch the Video Tute. - 3.58 mb
   
   
6. Now that you have made your icon, you need to save it...but don't save as GIF or JPG...oh no no no, save it as favicon.ico
   
   Once you have done this , upload it to your webserver. N.B this icon must live in the root folder of your website. If this is too technical, get your webmaster to upload it.
   
   
7. Finally you need to add this line of code into your homepage
   
   
   
   
   Then preview in your browser. You might have to refresh your browser, or even restart it to see the icon.

That's all folks......