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

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.

favicon bookmarks

I grabbed this image aeons ago, but it still serves as an example. Of the companies that have favicons here, only one is an entirely visual symbol - the old 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 of making favicon, 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.



A good way to get started making favicon 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 colour and shape


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. Red and orange contrast well with the commonly found colour 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.


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 for making favicon? 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.

graphic - graph paper for making favicon

Introducing favicon...

Step up to ideograms...NEXT ideograms

(c) Valerie Beeby 2000 - 2015