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.
Effective favicons
I don’t think I’ve actually identified what makes an effective favicon yet.
Proportions
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.
Photos
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.
Favicon galleries
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?
Gonna take my suggestion and make an “apple-touch-icon”? haha π
Heh, sure I will… not sure if I’ll do it right away or wait ’til I’m happy with my favicon.
Well it’s a tricky one for your redesign, I’ll give you that.
I’m really :huh: for ideas, sorry π
Hi! I’m Clara from Prague. Your blog is very interesting… but could you please answer a very silly question. What is favicon? I haven’t found this word in dictionary!
Thanks
What do you mean you don’t have anything insightful? I think your mentioning how you use them is insightful and I hadn’t thought of it! Hehe, though I might get you to replace that snapshot when I make a real favicon for CC.
What I find interesting is that each of those last group that you showed, I can identify: SimpleBits, Problogger, Gmail and Hicks Design. Just from the favicon! Now that’s good branding.
Hi Clara, it’s basicaly what I said earlier on,
You can add it as a shortcut image in the “head” area of your HTML, but if it’s in the root directory of your site and named favicon.ico it will be used by browsers automatically.
LaurenMarie β heh, thanks π I guess the post turned out to be a bit more useful than I originally thought it was going to be. I suppose in the end I didn’t say much about making them, more about using them?
Spot on about the last four. Damn, I wish I had the simple bits logo. π It might not be as well known if I did, but it’s so cool!
I can see how it’s not straightforward with your choice.
I was going to mention using the ‘k’ from your header, as opposed to Georgia, but you’re already thinking along those lines.
You could always use a solid blue square, with a tone lifted from your header image, or you could show a little of a cloud moving across the blue sky, which also ties in. For me, either of those would work better than the ‘k’, but of course you have to be happy with it.
Esben and David, thanks for your comments. It is a difficult decision. Leading up to this design I spent ages trying to come up with a logo that I could use for that sort of thing, but to no avail.
I will give those ideas a go. Thanks David π
Why not use your Avatar as your favicon. It seems the logical choice, at least to me, which is what I have done. Those who know be by my avatar immediately recognize my blog ownership by having it as my favicon of choice, maybe its just a male thing, over simplifying things. :angel:
Heh, thanks Sire. I think yours might be better for it than mine: it’s monochrome, and relatively high contrast. I played around with mine for a bit, increased the contrast and so on, but at 16×16 I didn’t think it was really happening. Might try again, now that you’ve suggested it though. π
You never know, sometimes what didn’t look right the first time around may take on new substance with a few little tweaks. Good luck.
Check it out!
In the same week that this post was written, Google changed their favicon from a capital G in a square to the blue lower case g in the name.
I don’t think it’s as effective, but it maybe because I was just used to the old one.
Eh, I don’t like the lowercase g as much either.
New favicon is up!!
I need some help making one for my blog. Also, how do I implement the favicons once it’s created? Thanks!
-Mig