Favicon Creation For Professionals And Amateurs

1) What Is A Favicon?
A favicon is a small 16 x 16 pixel image shown to the left of the navigation bar in most modern browsers. It is also used in the bookmarks/favourites section of a browser to help users navigate through all of their bookmarks.

2) Creating The Image For A Favicon
Favicon images start out as normal images that can be made in any paint or graphics manipulation program from Photoshop all the way down to MS Paint. A good way to make a tiny 16 x 16 image look as good as possible is to draw it larger and shrink it down. 64 x 64 is a good size to use as it gives you enough space to draw clearly and add detail but not enough to waste time drawing fine detail that when shrunk down will not be visible. You can of course draw at any size and then shrink down the image. This will often be the case if you have a large logo and wish to use that as your favicon.

It’s important to note that while drawing larger and then shrinking down will often result in a better image, it doesn’t always. You may find yourself with something that is a little blurry and require some fine adjustment to bring some of the detail back out.

If you are an amateur web designer and don’t have access to Photoshop then you will require a program to be able to shrink down your image, MS Paint just won’t cut it. The reason for this is it has no filtering when scaling an image. This means that when you shrink an image it will often look jagged and messy. A free paint package which does provide filtering when resizing images can be obtained from http://www.getpaint.net/

3) Turning Your Graphic Into A Finished Favicon
To turn your bitmap, or whatever file format you have used, into a favicon or .ico file you can employ a couple of solutions. The first and probably best method is to download a plug-in for Photoshop. This will allow you to create ico files in the same application you used to create them. The relevant plug-in for Photoshop can be downloaded from http://wwv.telegraphics.com.au/sw/ “ICO (Windows Icon) Format” is the plug-in you want to download.

The second method is only preferable to people that don’t have access to Photoshop, and that is to use a free online processor. There are several websites that allow you to upload 16 x16 graphics and then download them converted into ico format. A website that I have used in the past is http://www.dagondesign.com/articles/favicon-generator/
Be aware that not all web-based solutions offering conversion to favicons produce ico files with transparency. Some websites produce favicons where any transparent areas in the images you upload will be rendered white.

The plug-in method has the advantage of being much quicker than uploading a file, waiting for it to be processed and then downloading it. It also doesn’t require an internet connection though this isn’t much of a problem these days.

4) Using Your Finished Favicon File
To use your finished favicon file simply make sure that it is called “favicon.ico” and place it in the root directory of your website. This should be the same folder which contains your “index.html” file. Some browsers may be slow to recognise and display them so try clearing your cache if they don’t appear straight away.

Some people recommend adding additional code into every page on a site for maximum support. In my experience this is not necessary. I have conducted tests in the most recent versions of Firefox, Internet Explorer, Opera, Safari and Chrome with each browser displaying the favicon without any code added to the HTML.

Contact me at Ashfield Web Design - http://www.ashfieldwebdesign.co.uk/

Article Source:http://www.articlesbase.com/web-design-articles/favicon-creation-for-professionals-and-amateurs-800962.html