A Favicon is also known as a
website icon, URL icon, or bookmark icon. It is the little graphic that
displays in the top left of the browser address bar, the sites bookmark
and sometimes the tabs bar on the users browser window.
A favicon is a file containing an image or images usually at 16 x 16
pixels in size.
You can use any graphics program to make a favicon but you need to be
able to see it magnified and at final size while you are working on it
to get the best from it. The 16 x 16 pixel image is a small size so
there are some interesting design issues to overcome.
I used Photoshop to design the icon for the site
www.goldandsilverhallmarks.com
(bottom left of this page).
(you can see the enlarged version on the right).
How to
design a favicon?
To make a favicon work well it needs to be clear at 16 x 16 pixels so
for a simple solution I chose the letter H for the logo. I viewed this
at 100% magnification until it was readable at 16 x 16 pixels. Enlarging
the image to about 400% made it easier to edit and work on the 2 layers
I needed.
For the background layer I played around with some
ideas and blends until I had
something that looked fairly smooth at its final size and the foreground
layer contained the un rasterised letter to allow for font changes. Both
of these layers were then flattened onto a single layer when it seemed
that the image was correct.
At this point the icon was magnified to make tiny adjustments to tones
and shape, giving the logo a slightly rounded edged look. Next it was
saved in a jpeg and a PSD format so I could make changes later without
losing quality on the jpeg. You don’t need to save the favicon in a PSD
format but it is useful if you decide to change something later on.
How to make a
favicon
The .ico format is standardized file format that can be used as a
favicon, so you need a way to convert your image into an .ico file
before uploading it to your site. There are many free and paid services
that do this on the internet you just upload your jpeg or gif image to
them and press convert and your .ico file is ready to be used.
Search for .icon converters and you will most likely find one that meets
your needs.
The final stage is to upload the newly created .ico file to your root
directory on your server and the icon should be ready to view in your
browsers address bar. If it doesn’t display immediately try closing down
your browser and trying a fresh restart.
