Jump to page content

Designing new icons for iCab

Since its first release for Mac OS X, the iCab Web browser had been using for its file icons the same icons that were used under Mac OS 9. Naturally, they looked out of place and, at larger sizes where they’re scaled up beyond hope of success, quite horrible.

Without any great inspiration of my own, I had a go at making an initial set of icons to get the ball rolling, and posted both the images and the Photoshop source file to the iCab e-mail list.

First draft

This was my first attempt at the new set of icons, although I did not attempt the full range of available icon types at first.

Basic Web page icon, two versions:

The second was supposed to be a visual depiction of a Web page in line with Apple’s file icons, but I was not quite sure how to achieve this effect. The former is snappier but meaningless to anyone unfamiliar with HTML.

The following is meant to represent an iCab preferences file. I could not find a high resolution copy of the planet icon actually used within iCab itself in its Preferences window so this was my substitute:

I was not very happy with the look. One possibility I considered was to just use a couple of radio buttons (the classic design). Or maybe something else entirely.

A Web archive:

My Photoshop skills are not that great, so I don’t want to even think about achieving a full-size WeightWatchers icon as used in the classic icon set. I could have taken a photograph of one of my trouser belts I suppose (assuming I have any that look correct) but I decided on the zipper from BOMArchiveHelper’s icons as after all, it is a Zip file. But at this stage, I considered the icon to be too non-descript.

Progress icons:

Nothing but a facelift of the original design.

Finally, the iCab Icons file, for anyone who still uses that file to customise their toolbar icons:

Second draft

Reaction from the e-mail list and from Alexander Clauss was positive, but no-one had any better ideas or designs, so I set about attempting another draft: someone had to do it! I figured that if whatever I did was not terrible, it would be better than nothing and it seemed to be down to me to take on the challenge. Alexander did request that the Web page icon remain nothing but a taxi, which made that icon easy for me!

As well as minor changes and a new icon for iCab’s saved sessions file, the second draft did see one significant change: thematic decoration. I felt that the icons were too bland, and lacked any significant distinguishing characteristics, and in a flash of inspiration, came up with a plan. Since iCab uses an American taxicab for its logo, I made a mental connection between American cabs and the chequered (sorry, checkered!) stripe seen down the side of some.

I just guessed that it was found on all their taxis, but it was apparently a design that belonged to the Checker Cab Company. The design in my mind was yellow and black, which I went with, but in fact, Checker Cabs primarily used white and black squares. Despite this mistake and further misgivings on the design (since it looks to me more like a racetrack or emergency services design), it proved to be a popular decision since it does also connote a taxi. The choice of black and yellow as opposed to black and white, while not conventional, does add colour to the design so I have stuck with it.

This was also the first time I produced smaller 32×32 and 16×16 modes.

Basic Web page icon:

Saved session file:

Web archive file:

Preferences file:

“Busy” file:

Final version

All icons in Photoshop 5 format
All .icns files

Alexander Clauss was very happy with the second draft, so I completed it (there were two icons missing from the second draft: aborted download and iCab icons file) and made a few other small revisions. I was still unhappy with the incorrect connotations with the chequered stripe, but no-one else was remotely bothered, so the design was accepted and added to the next release of iCab.

I have left up all the Photoshop master files for two reasons. Firstly, it is a kind of open source, in that other people are free to adjust and improve the icons and submit revisions either to myself or to Alexander Clauss. Further, the site is my back-up and since losing a Photoshop master makes further work very painful (not just revisions, but adding new icons when iCab gains new file types) this way I should not ever lose the files! (Whether anyone else can understand my working method is another story ;)

iCab 4 beta icons

Alexander Clauss rewrote iCab as a Cocoa application, with all new graphics by ludwig. Pending the creation of all new icons, he modified the original icons to share the new branding:

They appear not to have been created using the Photoshop master, hence some loss of detail, although the new torn paper edge for the broken download icon is good. The above designs illustrate the sort of improvement I had hoped someone would make out of the original designs. Using a yellow page allowed for the chequer pattern to return to the more common white and black instead of my unusual yellow and black. Better out-of-the-box thinking than mine.

iCab 4 icons (final)

All icons in Photoshop 7 format
All .icns files

iCab 4.5 was released over a month ago on the 3rd of March 2009, and the final icons are long overdue! I’ve been sitting on this task for over a year, since I sent Alexander redrawn 128×128 icons in January 2008 (the same as the icons above but rebuilt using the master graphics with correct alpha blending and shadows). Proper 32×32 and 16×16 modes are now drawn to match, as well as a variety of tweaks to the designs in general. A copy has been sent on its way to Herr Clauss.