From the title one might think that I have something insightful to say about the art of making a favicon (the little shortcut icon that shows up in your browser’s address bar, on tabs and in bookmark lists). Really, I just want to say two things.
First thing about favicons
They’re damn cool: they make identifying websites in a list or in my tab bar so much easier. They’re definitely an asset to a website and they say something about the attention to detail the owner or creator of the website has paid.
Have a look at my tab bar:
How much easier is it to identify an icon than half of the site name?!
Second thing about favicons
It’s difficult to make a good one! Since I changed my blog design I have noticed the absence of a favicon, because it always helped me to identify my tab amongst the others I had open.
To get ideas for a favicon I looked at my site; I saw the little hot air balloons in the header and thought they might be a cute favicon.
It was okay, but I didn’t love it.
I had another look and saw the letters and the clouds. I started to make a 3D k, but realised that, in the header, were grey and my browser window is grey… it might get lost. So I thought I’d try a little cartoon with a cloud and a k.
As favicons go I don’t mind it, but I didn’t want it to represent me… possibly too much blue.
I had a look at a few other favicons and noticed that small, simple shapes make effective favicons. I thought I’d try to make a k within a grid of dots (not really related to any elements on the site, but hey).
It looked good large, but when it shrunk down and was displayed by the browser I didn’t like it. Perhaps more space in between the dots would make them clearer at a small size.
In the end I decided to use a plain k. The font is Georgia. I would have preferred to use Diavlo, which is the font in the header, but I can’t get Inkscape to see my custom fonts and I use Georgia for all the other headings in the blog. It’s not just a letter on a background though, the letter is actually transparent/negative space.
I’m not sure how much I like the k either, but it can stay until I come up with something better. 😛
Update 30 May 2008: Made a new favicon already, can be seen in your address bar (unless the old one is cached) or in the next post.
I don’t think I’ve actually identified what makes an effective favicon yet.
When making them (and working at a larger size or zoomed in) you need to make lines quite thick so that they’re visible at 16x16px. Yet, many favicons look remarkably detailed.
Bitmap illustrations seem to be much more effective and more widely used than photos, but every now and again someone uses a photo well.
Be careful using a photo if you try to mask out the background. When you shrink it down to 16px the edges get much harder: dark lines that you couldn’t see at larger size suddenly appear and it’s difficult to know how much background to delete.
Related to the website
Overall I think the most effective favicons are the ones that tie in with the theme of the site, often using a tiny version of the main logo.
I suspect the art of making a favicon is related to the principles of pixel art, something I’ve never really tried.
Ironically, some of those links don’t have favicons!
Have you got a favicon? How did you make or choose it? Have any tips to share with us favicon newbies about making them?