MAKING FAVICON
What makes a good icon?
FACES . EXPRESSIONS . SYMBOLS . ICON-SIZED GRAPHICS
DRAWING . New addition:- PAINTING on tablets and smartphones
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
Take a look at the favicons showing in your browser. You should have quite a few lurking in your Favorites/Bookmarks or your History list.
Of the companies that have favicons on this 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 an icon, 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 have 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 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. Not that you have much scope, but it is possible!
Avoid thin lines. They will 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, tweak it a bit, 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.
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.