As a follow-up to the bestselling Thinking with Type, Ellen Lupton has edited a new primer on typography for the digital age. Type on Screen presents the classic typographic concepts you may already know in the context of printed pages, updated for use on screen-based applications like electronic publications and websites, as well as video and mobile devices. This post excerpts a section on creating scalable app icons for PCs and mobile devices.
A desktop icon for Mac OS may be viewed as small as 16×16px in a sidebar or as large as 1024×1024px in Apple’s flip-through “cover flow” interface. Creating scalable application icons thus demands attention to pixel-perfect detail. Doing it well requires making at least six different versions of the same icon for various display purposes. A Mac OS icon file (ICNS) consists of multiple image files at different sizes, each simplified according to its scale, with more detail possible at larger sizes. The ICNS format supports the following sizes: 16×16, 32×32, 48×48, 128×128, 256×256, 512×512, and 1024×1024px. Begin drawing the icon at the largest size and work your way down to the smaller sizes, redrawing elements as needed. For the sidebar icon, you can eliminate the reference to a folder, as seen in the tiny 16px camera icon below.
Right Draw each size individually, simplifying and adjusting as needed for legibility.
Wrong Simply scaling an icon down creates illegible forms that lack detail and refinement.
Wrong Likewise, scaling an icon up from the smallest size yields odd-looking icons at larger sizes.
Apple’s iOS requires icons in a multitude of sizes for various devices and presentation situations:
512 × 512 px iTunes artwork
114 × 114 px Home screen icon for iPhone Retina Display
72 × 72 px Home screen icon for iPad
58 × 58 px Spotlight and settings icon for iPhone Retina Display
57 × 57 px App store and home screen icon for iPhone / iPad Touch
50 × 50 px iPad Spotlight search results
29 × 29 px Settings icon in iPad and iPhone, and spotlight icon on iPhone
Find more like this in Type on Screen, available now from Princeton Architectural Press.
Enter your email address to win a copy of Type on Screen by Ellen Lupton and Abbott Miller: Design and Contentfor your school library (or a school library of your choice), plus a $100 Princeton Architectural Press gift certificate for yourself.