How to design a favicon
In a world where a picture speaks a thousand words, favicons are the epitome of miniaturised corporate identity. It's only small, and you don't see it in many places, but it can make a web site seem more professional if it has a favicon that is clear and instantly recognisable. Today we'll be looking at some hints and tips on how to create a favicon that makes the most of the tiny realestate.
Introduction - what is a favicon?
A favicon is a 16x16 bitmap image that is associated with a web page or domain. We actually have Internet Explorer to thank for this idea (you don't hear that every day!), according to Wikipedia. Of course, it has since been adopted by other browsers, who inevitably took it to a whole new level and left IE stuck in its own ruts resenting the fact that its idea had been stolen. Traditionally favicons are in Windows Icon (.ico) format, although modern browsers accept all sorts of different formats including PNG and GIF.
Where will you see favicons? These days, you'll see them in three places:
1. In the address bar, next to the URL
2. In the bookmarks menu, next to the bookmark name
3. In tabs, next to the site name
Example - Circular Sandwich
For the sake of illustration, I've just made up a company called Circular Sandwich*, and created a simple logo for it. Answers on a postcard for what the company could sell, I can't be bothered to make that up as well. The logo is fairly straightforward, comprising the C and S letters, a red circle, the company name and a line between the two words. Nothing too complicated, but it'll work well for this demonstration.
* The company name "Circular Sandwich" is entirely fictional and any resemblance between this and a real company is entirely coincidental. Please don't sue me.
How not to design a favicon
You'll notice that this logo, like many others, is landscape in orientation, i.e. it's wider than it is tall. That's fine in most cases, but when we are creating a favicon it does present us with problems. If we take this logo as-is and scale it down to 16x16 we get something that is so small that it's unrecognisable and completely unhelpful (shown here at 16x16 size and magnified in so you can see each pixel more clearly):
That, to me, looks more like a key, and doesn't convey the Circular Sandwich brand very effectively at all. In the vast majority of cases, this will be the same for you too, so don't create your favicon by simply scaling the original logo.
Stripping out the unnecessaries
All the sparkle and design flair that you've put into your full size logo are going to be lost in a 16x16 icon, so take them out. In our example logo we've got graded fills and drop shadows, so we're just going to take them out completely. You'll probably want to do the same with reflections, and possibly borders too. Obviously you don't want to take out everything, but take out as much as you can without losing the essence of the logo.
Our logo, before scaling, now looks like this:
Making it square
For our Circular Sandwich logo, we can quite effectively make the logo square by removing the "Circular Sandwich" text and the separator line. We can get away with this because in this case the "C" and "S" in the circle is the primary part of the logo design. That leaves us with a circular logo, which will sit quite nicely in a square.
Iconising it
The final step is to tweak it just a little bit more to make the most use of those 16x16 pixels. Firstly, choose your background. If you are using a GIF or PNG format then you'll be able to use a transparent background, but bear in mind that it might not appear correctly in Internet Explorer, if at all. If you use a grey background then it might blend into the background of the browser, depending on where it's shown - that might be deliberate, in which case go for it. Similarly, a white background will appear transparent if put on a white background, such as the address bar. So choose the background carefully.
Next, trim any dead area around the logo so that your logo takes up as much of the realestate as possible.
With our example, we find ourselves with this:
Finally, we scale the image to 16x16 pixels and save in Windows Icon format (.ico). How you do that will depend partly on what program you're using, and there are plenty of third-party programs available to convert images to icons if your software doesn't do it natively. And finally, after all that trimming and tweaking, we have this:
Artistic license
Despite the way I phrased the previous paragraph, actually there may be an additional step or two before we're actually done, depending on how your favicon looks at this point. In our case, we have the unfortunate situation where the scaling process has merged the two letter together a little too much, and the definition has been lost. This is partly because the yellow and light grey are very similar colours, and the narrow spacing between the letters doesn't show up in the icon.
To resolve this predicament, we need to change the logo itself to artificially create a little more space between the letters. I'm going to make the 'S' ever so slightly smaller, and perhaps try to make the 'C' a tad more skinny.
That gives us a favicon that looks like this:
That extra bit of definition is just what we needed, and our favicon is ready. It instantly conveys the essence of the original logo, without being too fussy, and will allow visitors to be able to quickly pick out our site from the rest.
Putting it into your code
Referring to the almighty Wikipedia, this is the code required to add your favicon to your web page (this goes in the html head, by the way):
<link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" /><link rel="icon" type="image/png" href="/somepath/image.png" /><link rel="icon" type="image/gif" href="/somepath/image.gif" />
This post was originally published on www.matthewdawkins.co.uk.
Copyright © Matthew Dawkins 2009
About Matthew Dawkins
Matthew is a web designer based in Somerset, UK. He has a passion for CSS and design, and runs his own web design business.
Write a comment