Create your own Favicon

A favicon is that little image you can see in your url section just before the site address.

Don't be anonymous! Give your site a full personality. Most browsers save your favicon when your visitors bookmark your site and this is a good way to catch your visitors' attention, when they do to browse their bookmarks your site will be different from the mass!

Now I'll show you how our favicon got life.

Make a screenshot of your site (open it in your browser and press PRINT key)

Now open Photoshop and press Ctrl+N or make File>New and press enter with the default size proposed (Photoshop suggests you the sizes of the image that you have in your clipboard).

Now you have a blank document, press Ctrl+V or make Edit>Paste.

Now pick the Rectangular Marquee Tool and in the top configuration bar select Style: Fixed Aspect Ratio with values 1 and 1.

Now select a portion of the screenshot that will become your favicon. Remember that favicons are 16x16 px so I suggest you not to choose a too big image or it won't look good in your address bar.

Now Press Ctrl+C or make Edit>Copy. Now we'll make a new document again, press Ctrl+N (or File>New), press enter and paste there the image you just copied (Ctrl+V or Edit>Paste).

Now hit Image>Image Size, be sure that Constrain Proportions box is flagged and type 16 in the height or width, the other will adjust automatically to the same value.

Now Save it as bmp and name it favicon (File>Save As name it favicon and choose bmp as file format).

We're done with the graphical part of your favicon.

Now open your ftp client and upload it to your server. Once uploaded rename it from favicon.bmp to favicon.ico .

To have it load into your website you just have to add this html line to your pages: (assuming you stored it into the images folder on your server)