favicons. so tiny. so cute. so tricky.

February 13th, 2007

favicon.pngKnow what a favicon is? It's the tiny little image that appears next to the bookmark of your site in the bookmark toolbar.

It is such a tiny detail, but a favicon makes the site just a little bit nicer, because it makes your site sort of stand out from the others.

I don't think I've ever made a good favicon. Well, I haven't put a lot of thought into it either, but those little images are tricky. It's like you have to approach the issue in a whole different way, because small as they are, they are surprisingly vivid. Look at the favicon from Planet KDE, it's the K-logo scaled down to a tiny size, but still completely clear what it is.

Jennifer recommends starting with a larger canvas and scaling down the image. But if you look at these fantastic examples, it becomes clear that what works best is not pixel art, but rather drawings scaled down to a tiny size. So just draw something on a bigger scale and cross your fingers that it's still going to be visible on a 16x16 pixel canvas. A bit of a leap of faith that.

So just fire up inkscape and let's get cracking. The only problem is that I can't actually draw. It took me a couple of hours to figure out how to manage transparencies, combine shapes in the way I wanted and managing my layers (which I have to say is a pain, please give us that gimp layer window, pweease :sweeteye: ). Eventually I realized that my idea, okay as it was on a larger scale, was completely unsuited to such a small format. It's a lot easier to do something complicated and sufficiently convoluted to escape scrutiny, but it's that much harder to think simple.

favicon64.png But along the way of making it happen, I came across the state, which having rejected the original idea, became the final result. The new favicon is indeed very simple, so simple that it's almost painful to witness. But at least it looks okay on the scale it is made for.

faviconjack.pngUPDATE: In a contest between talent and no talent, bet on talent. Unline me, my friend Jack actually had a good idea and his suggestion kicks ass! :strong: And since I can't but admit defeat, I'll be using his icon instead. Thanks a lot, Jack! :D

:: random entries in this category ::

3 Responses to "favicons. so tiny. so cute. so tricky."

  1. Jack says:

    I am glad you are using my "creation". I never considered it as a contest, but if you put it that way, I'll enjoy my victory :D

    You're welcome.

  2. erik says:


    Jack, do one for me!! Mine is kinda lame right now :D

  3. Jack says:

    I know you are using it, it means you liked it.