Monday
15 Oct 2007

User Interface of the Day #2: Favicon.cc

UI Design Fundamentals

Today the Humanoids review favicon.cc. This simple, straightforward Web app enables you to quickly create your own favicons: Little images used to personalize and add a splash of color to your address bar. Pick up your digital pencils, sketch your ideas in a liberating 32×32 pixel grid, save the results, and presto!

After trying out the favicon generator, we gathered around the office table and shared our thoughts, which you can (and should!) read below.

Andrew Wilson
Andrew Wilson


What’s Cool:
This Website’s beauty lies in its focus and simplicity. The application itself is not hidden behind clicks, but is right there in the front page. You don’t have to log in, or type “start me now.” Instead, the default state is, “use me,” which truly makes it inviting.

What’s Not Cool: I’m not a skilled pixel-sketcher in general, so this app is not useful to me unless I want to draw a fabulous icon for something involving Frank Lloyd Wright. I couldn’t draw a simple character that wouldn’t look awful.

So? I really needed something that would perform anti-aliasing so that I could draw a straight line on diagonals.

Atul Varma
Atul Varma

What’s Cool: I like the preview — it really puts it in context.

What’s Not Cool: This app is missing an undo functionality; there’s no “click here” to go back. I tried using my browser’s back button, but that caused me to lose all of my work. Maybe if I registered a user name, it would implicitly save.

So? Overall, I really liked it. But it would be nice if you could start drawing something and then log in.

Aza Raskin
Aza Raskin

What’s Cool: This represents the height of web apps, in that it does one thing, and does it very well. The community aspect is nice; the interface makes it easy to share, reuse, and remix both your own and others’ work. It’s always a pleasure to see creative commons in practice. I also like that it doesn’t have a save button, because it implicitly saves. Except …

What’s Not Cool: … I don’t think it’s really saving! I clicked on a link to explore the community, hit the back button, and my pixellated masterpiece was gone forever. Not good at all. Also, I was disappointed by the color picker; they had the chance to do something unusual and interesting with it, like bringing it to my cursor location upon a key press, instead of forcing me to schlep back and forth when changing colors. As Fitts’ law predicts, the fastest place for a user to point to is right under the cursor.

So? My concern is this app’s seeming disregard for my work. Where does my work get saved, and how? Along those lines, I would also like to see an undo. Mistakes in favicon.cc are costly: Paint the wrong square, and it takes many clicks to return to where you were before. In particular, I would be very happy with a history slider — a scrollbar through time. In the same way that you can scrub through a movie, moving forward and backward in time, you should be able to scrub through the history of your (or others’) drawings. Bonus points for being able to link to points in time.

Jono DiCarlo
Jono DiCarlo

What’s Cool: This was really fun to play with. It brought back fond memories of using “ResEdit” on my old Mac. I really liked the preview that shows you how your favicon will look (in context, even) as you edit it. And Favicon.cc saves me from having to look up how many pixels across a favicon should be, and what file extension it should be saved with.

What’s Not Cool: If you didn’t know what a favicon is and came across this Website, you’d be confused; the explanation of what this app does is hidden behind a tiny “about us” link at the bottom. Also, the eraser is a checkbox, and the color-picker is another checkbox. You can only use one of them at a time, but the interface allows you to select both of them, confusingly. Why not use a tool-palette style interface?
So? Even though this is a drawing program that is very simple, it’s still a drawing program, so it ought to have a real tool palette with circle and straight-line tools. (Have you tried drawing a good circle in pixels? It’s hard!). Also, it would be great to have keyboard shortcuts so I can use my non-mouse hand to choose tools.

Lauri Apple
Lauri Apple

What’s Cool: This is incredibly simple and straightforward. If you have no artistic ability, you can upload an image and create a favicon in seconds. I made favicons of both the Chicago skyline and of open source software guru Richard Stallman, and was impressed by the high-quality results.

What’s Not Cool: Many words in the tag cloud are too small to read.

So? Even if this program wasn’t free, it would be worth using.

Scott Robbin
Scott Robbin

What’s Cool: They did a good job of indicating transparency. My first reaction was to question why they didn’t use the standard Photoshop-like checkerboard approach, but I quickly realized that it wouldn’t translate well to an already grid-based drawing tool. They made a good compromise by using the yellow, diagonal squiggle pattern.

What’s Not Cool: They could make better use of the screen real estate. The live favicon preview window — arguably the site’s best feature — could be placed more prominently next to the drawing grid, whereas the color picker could be displayed on an as-needed basis. The other site features, such as the tag cloud, best-of, and instructions would be best suited to some sort of tabbed pane, to make this a very useful one-page site. Also, the creators show a Hex value but don’t let you edit it; I’d like to be able to input that value as well.

So? This app’s greatest asset is its simplicity. The drawing and preview capabilities make this site a fun, easy way to create favicons. Some simple layout changes and javascript doodads would make this tool even more useful.

by Staff