The Icon Handbook - a review

Ah yes, icons. While I have used icons on many websites over the years, and have created favicons for nearly all of them, I must admit that I am no expert.

So many formats for so many platforms, dozens of dedicated tools, and all kinds of issues to look out for when adding them to a website. I have been using standard CSS background image techniques to embed PNG icons till now, but have been increasingly, uncomfortably aware that there's much more to it than that. There are now several icon formats in addition to PNG that will work across browsers, and, with the emergence of a truly mobile web, it's become essential to understand how icons should be served to different platforms. And proliferation of small screen browsing devices means that icons are becoming more important than ever, as the most concise means of encapsulating brand and providing user interface guidance within a limited space.

Fortunately one of the leading icon designers in the world, Jon Hicks, published a comprehensive guide at the start of the year, The Icon Handbook, which I've finally had an opportunity to read (it had been sitting beside my desk, unwrapped, since January).

You will be familiar with Jon's work if you've used the web: he designed the Firefox logo in 2004, and has since created logos for clients including MailChimp, Opera, Shopify and Skype.

Knowing Jon's work, and a long time reader of his blog, I was hoping for two things from the book: that it would be beautiful, and that its subject matter would be discussed in forensic detail. The design is even better than I'd hoped for, as I hope the images on this page testify. And over the course of its 300 odd pages it provides a comprehensive guide to the complexities of designing and serving icons.

MailChip logo

A brief history of icons

The book's opening chapter sets contemporary icons in their historical context, describing how the idea of a unified, international visual language consisting of easily recognisable symbols emerged through the thought and work of Otto Neurath and Gerd Arntz in the early 20th century, who assembled a team of artists to develop a system of pictograms that are recognisable as the forerunners to today's computer iconography.

Isotype archive

The book reproduces several pages from the University of Reading's archive of Isotype symbols, and the classic pictograms used for the 1964 and 1972 Olympic Games which they inspired. (In fact an interesting post appeared a few days ago on the Marblehead Blog: The 72 Munich Olympics Identity by Otl Aicher.)

Jon goes on to discuss the first computer icons, which appeared on the Xerox Alto in 1974, and concludes the chapter with an interview with Susan Kare, the designer of Mac System Software 1.0 logos, which appeared 10 years later.

When to use them

He then considers why icons are so essential to contemporary user interface design, writing:

 

Imagine software, like a graphics editor or media player, without any icons. Instead of play and pause buttons, or a tool palette, what if they just had text labels or a list of names like Airbrush, Pencil, Blur Tool…? They would still be usable, but our brains would have to process a lot more information, and the interface would have to be much larger to accommodate the text. This becomes crucial on mobile devices, which have much more restricted space to convey functions. Icons often support text labels in software, but they're just as often used on their own.

 

There's a detailed discussion, illustrated with examples, of the use of icons for facilitating user interface functions such as navigation, status and notifications, provision of user feedback, the expression of emotion, and the overcoming of language barriers.

Jon stresses the danger of overusing icons:

When trying to decide whether an icon is necessary, the first step is always to remove it and see if it works well enough without it. If it does enhance the content or interface then it's earning its keep.

Favicons

The book continues with an incredibly helpful chapter discussing in detail the issues involved in designing and deploying favicons. Creating a favicon used to be quite easy: just a case of creating a 16 pixel ICO file and uploading it to your site's root folder. If time allowed you might also design a 32 pixel version to serve as a desktop icon. It's rather more complicated than that now. As Jon explains, we now need to consider at least the following icons for the following platforms:

  • 16px: for general use in all browsers
  • 24px: Toolbar favicon in Internet Explorer 9
  • 32px: New tab page in Internet Explorer
  • 57px: Standard iOS home screen
  • 72px: iPad home screen icon
  • 96px: GoogleTV platform favicon
  • 114px: iPhone 4+ home screen icon
  • 128px: Chrome Web Store
  • 256x160px: Opera Speed Dial

Insufficiently bold favicon disappearing into browser chrome

Jon offers practical advice on how many of these we realistically need to create, and there's a useful tutorial on drawing a 16 pixel favicon for maximum cross platform and browser legibility: it is not enough to simply downsize a logo and hope for the best. There's also a section on Apple Touch icons, making clear the appropriate usage of the apple-touch-icon and apple-touch-icon-precomposed formats. Favicons really have become a labyrinth, and this is a chapter I'll be referring to continuously over the next few months.

Drawing icons

The next two chapters provide detailed advice on actually designing an icon. That's not something I'm likely to need to do for the foreseeable future, but I read them with great interest. Jon discusses how to research an icon and decide on an appropriate metaphor, and advises on appropriate colour schemes, lighting angles and shading. There are interviews with several leading icon designers that illuminate the design process they use, and there are a number of hands-on tutorials.

Icon sketches

Deploying icons

The following chapter, 'Icon formats and deployment', is another exceptionally useful technical guide. As with the discussion of favicons, this, I think, is essential reading for any web designer, whether you actually design icons or not. This information is available, scattered, across the web, but Jon has gathered it all together into a single reference. All of the icon formats currently available are discussed carefully, and their merits weighed.

Jon maintains that the 'traditional' technique of deploying icons, as PNG files that can be embedded in the form of CSS sprites, still has much to commend it, and is really the only practical solution for larger, more detailed icons. But the need to serve icons at different sizes to accommodate varying screen resolutions means the technique is beginning to fray at the edges. We need to serve bitmap icons at several sizes to ensure sharpness is maintained when they are viewed on high resolution devices such as the iPhone 4 and the new iPad, with their Retina displays. Screen graphics are obtaining the crispness of print. The issue is accentuated now that all modern browsers offer full page zoom, not just text zoom.

So the emerging possibilities for serving icons in screen resolution independent vector format are becoming more important. Jon looks at SVG, Canvas, Data URIs, pure CSS icons and icon fonts, and concludes that icon fonts offer perhaps the most promise, just now. There are interesting interviews with Drew Wilson, designer of the Pictos icon font, and Lucian Marin, designer of the Peculiar pure CSS icon set.

The final chapter looks at application icons. Here we are no longer dealing with small graphics: these are large, rather beautiful images designed for pinsharp display on high resolution screens. It's the most lavishly illustrated chapter in the book, showcasing the work, often with interviews, of some of the world's best graphic designers. I doubt very much I'll be designing many application icons in the future, but the techniques discussed here can be applied to any type of vector illustration: as I say, the images discussed here are large and detailed, such that icon barely seems an adequate term.

Chapter title pages

The book concludes with an appendix providing a useful discussion of the software applications most useful for drawing icons: not just Illustrator, Fireworks and Photoshop, as one would expect, but also specialist icon tools such as IconBuilder and Opacity. The appendix also features very handy reference charts for the icon formats and sizes accepted by today's leading platforms: Android, iOS, Chrome, BlackBerry, Windows, Windows Phone and Symbian.

So, suffice to say I think this is an essential web design resource. For me, the chapters on favicons and icon deployment will be critical references for the foreseeable future. The design and use of website icons is becoming ever more complex, and this book is very timely. Many thanks Mr Hicks.

Categories: