What makes a good icon

SYMBOLS

WHAT MAKES A GOOD ICON DESIGN?

STARTING WITH ABC

Desktop icons open documents or applications. Favicons open websites, and are mini logos. It's important that a favicon you make should be:-

bold and distinctive
a strong expression of your personality

Open your Favorites (Internet Explorer 5+) or Bookmarks (eg Mac Safari) folder. Not all browsers show favicons, but if yours does, you should have a few. Take a good look at them.

favicon bookmarks

Of the companies that have favicons on the list, only one is an entirely visual symbol - the TV set for My DigiGuide. The others are verbal. They just show the initial of the company name. G for Google, Y for Yahoo, W for Wired. This is the easiest way to make a design, even if not the most original. It does have the advantage that a letter links the logo with your name, though it helps a little if your name is Yahoo or Google.

STARTING WITH ABC

IF YAHOO CAN, YOU CAN TOO!

A good way to get started making your own graphic is to play around with your company initial. When you've discovered what makes a good strong symbol, you may be keen to generate a less literary image.

ASIDE. Talking of initials, if you're just at the start of opening a local business, here's a plea to resist the temptation to name it with your own and your partners' initials! They may mean something to you, but not to the general public. Take a look at the Yellow Pages and see how long you remember names like 'GRD Electrics' or 'WDC Builders'. Not long, I shouldn't wonder.

Even when they only contain a letter, icons can stand out and express their identity with two attributes, colour and shape.

COLOUR

Strong colours work best in a favicon. They may look brash at larger sizes, but it's difficult to be garish in a 16 pixel square!

Contrast is another card to play. Both Internet Explorer and Safari have standard bookmark icons in pale blue - an 'e' and a globe. Reds, orange and even bright yellow contrast well with blue. Or you might find a hue that stands out well against a graphic used by a competitor.

Mood is also strongly conveyed by colour. Red is exciting and dynamic, dark blue sober and businesslike, and so on. Bear in mind, though, that colours can mean different things in different parts of the world.

Of course, you may be forced to stick with your company colour scheme. In which case, look at how you can vary shapes.

SHAPE

Broad, bold filled-in areas look best in a tiny icon. Don't be tempted to break up the impact by dotting bits of detail here and there.

Avoid thin lines. They'll make your logo look like a gnat - and just about as significant.

Mood is conveyed by shape as strongly as it is by colour. Squares say solidity. Arrowlike forms denote speed. Doodle a few versions of the letter W and see how the variations alter its personality.

Maybe you have a favourite font on your computer. Why not use it to print your company initial at a very large size? Sketch out a grid of lines on it if you like - then shrink it to 16 x 16 squares, each representing one pixel.

Alternatively you could copy your letter on graph paper. That's how the very first GUI (Graphical User Interface) icons were made for Apple. You may like to try a few designs on this 16 x 16 grid. (Right-click it on a PC or Control-click it on a Mac. Open it in your paint or photo editor and print it out as many times as you like.)

Since a favicon is only 16 pixels square, it isn't worth the bother of scanning your sketches into your computer, (and probably wouldn't work). It's easy enough to copy them pixel by pixel into Photoshop or another graphics editor.

You may prefer to make a favicon from the start on the computer. That way you can repeatedly zoom in and out, first to work on the detail, then to see how the icon looks at tiny size. You can't do that on paper.

Introducing favicon...

Step up to ideograms...

FAVICON What makes a good icon?