DO YOU REALLY NEED
A FANCY FAVICON?
FACES . EXPRESSIONS . SYMBOLS . ICON-SIZED GRAPHICS
DRAWING . New addition:- PAINTING on tablets and smartphones
An icon file needs to have a large wardrobe. It never knows where it's going to have to appear!
You ask your desktop icons to show in a variety of sizes. Agenda icons appear in spacious daily or cramped monthly calendar views on a phone or tablet. Favicons can be displayed in a number of browsers, in bookmark lists, history lists and explorer bars; even occasionally at larger size on a desktop. No surprise then that dedicated icon editors make icon files that hold several images. Not only that. The pictures can be different sizes at different colour depths and with differing degrees of transparency.
Luckily you only really need one version of your Favicon
For a favicon, you only really need one 16 x 16 pixel image with 16 colours. Why? Unlike a desktop icon, your mini logo will rarely in fact appear outside a browser Favorites, History list or Address Bar, where it's shown at small size. You don't need to make it in a special icon editor.
Nor do you need many colours. There isn't room for them!
You can make a favicon icon as a single image in almost any art programme and convert it to an .ICO file with apps like Irfanview or Graphic Converter.
As you see below, the small size can look reasonable on the rare occasions when it wanders outside the browser and puffs itself up large.
('Large' is 32 x 32 pixels. Width and height are both doubled ... 16 x 2 = 32... which results in four times the area.)
You do get a better display when each size has its own picture, but this is not strictly necessary for a favicon.
When you make a favicon icon outside one of the dedicated icon editors, just preview your picture at 32 x 32 pixels as well as at 16 x 16. Check that the small size will at least look acceptable if magnified.
WHY IS THE DOWNSIZED FAVICON CROSS EYED?
You will notice the 'Large icon Reduced' picture is slightly askew. This is because it is shrunk down to an even number of pixels wide - the regulation 16. Since a central pixel is needed between the eyes, one side of the face must now be a pixel narrower than the other. At twice the width, this assymetry doesn't show. At tiny size, every pixel counts. Automatic processing does not always cope too well.
There are sites where you can make a Favicon online. The icon editors or generators I have looked at myself make only the 16 x 16 pixel size, but will send your design by email as a usable favicon.
TIP. Have your symbol pattern worked out in advance if you are going to draw it online. Try it on graph paper, or print out this grid to use.
Ideograms or picture symbols...
CREATING SYMBOLS Cliches . Symbol fonts
FAVICON Favicon Tutorial . Start with ABC . Pictograms . Icons . Upload favicon
(c) Valerie Beeby 1998 - 2011
Images and articles on this site may not be reproduced or used for any commercial purposes without written permission.