Viewing Icons

An application’s icon file is stored within its Resources folder. These files use a .icns extension. Each application may contain one, several, or many different icon files. For example, iTunes contains nearly two dozen different icons, while Calculator has just one. Figure 4-3 shows iTunes’ large collection of icon resource files, which provide unique images for each of its associated file types, better known as its icon family. iTunes document types include playable audio files, visual plug-ins, playlists, and more.

Some of iTunes’ .icns files

Figure 4-3. Some of iTunes’ .icns files

Icon files are not structured like normal picture files; you cannot open one in Adobe Photoshop. Each .icns file contains several versions of the same image (and an associated mask) at several resolution levels, from small to big. The Finder uses the icon files and displays items at the appropriate resolution. Icon masks determine those parts of the icon that can be clicked or dragged. This allows the Finder to display scaled icons while minimizing computational overhead.

The best way to view a .icns file is with icns Browser (/Developer/Applications/Utilities), a utility that’s included with the Xcode Tools. Either drag an icon resource file onto icns Browser or launch the application and choose File Open (⌘-O). As Figure 4-4 shows, icns Browser displays the icon images and their associated masks from any icon file.

icns Browser allows you to display the contents of a .icns file in a unified window.

Figure 4-4. icns Browser allows you to display the contents of a .icns file in a unified window.

The icns Browser application has few options. One of these is the background color control, which you can use to test icons against various background hues and saturations. Properly designed icons will look right, regardless of their background color. Poorly designed icons may show edge effects against very bright or very dark backgrounds, or they may blend inauspiciously into neutrals.

Preview (/Applications) offers an alternate way to display .icns files. To open a .icns file, drag it onto the Preview application icon; you cannot use File Open. Preview allows you to view icon resources as a series of pages, each of which displays the icon at one of the built-in resolutions. Use the drawer to select which resolution to view. Unlike icns Browser, you cannot use Preview to examine the associated masks; however, you can export an icon image (File Export, or Shift-⌘-E) and save it as another format (such as a JPEG or TIFF). Figure 4-5 shows what an icon file looks like when displayed in Preview.

In Preview, each source image appears on a separate page. Use the drawer to pick which image to display.

Figure 4-5. In Preview, each source image appears on a separate page. Use the drawer to pick which image to display.

Mac OS X’s Xcode Tools offer two other ways to look at icon files, both somewhat less convenient to use than icns Browser and Preview. These applications are not viewing utilities; instead, they are production tools that can load and view .icns files:

Icon Composer

Meant to create icons rather than simply view them, Icon Composer allows you to open .icns files and display them in a single unified window.

Xcode

This development environment lets you preview .icns files at their highest resolution.

In addition, there’s any number of third-party utilities you can download to view and extract icons. Visit MacUpdate (http://www.macupdate.com) and search for “icons” I’ve used Iconographer (http://www.mscape.com) and Iconverter (http://www.extraneous.us) with good results.

Browsing system icons

If you’re the curious type, you might want to take a peek at Mac OS X’s system icons. The system icons bundle, found in the /System/Library/CoreServices directory, stores about 140 icons.

Start by opening a Terminal window, then change directories to /System/Library/CoreServices/SystemIcons.bundle/Contents/Resources. List the contents of the directory to get an idea of the kinds of icons stored in the folder.

$cd /System/Library/CoreServices/SystemIcons.bundle/Contents/Resources
$ls *.icns

Some of the files you’ll find include FullTrashIcon.icns, HomeFolderIcon.icns, ToolbarCustomizeIcon.icns, and so forth. From an application customization point of view, there are a few useful gems in this directory: GenericFolderIcons. icns, GenericDocumentIcon.icns, and GenericApplicationIcon.icns all offer excellent launching points for designing your own icons.

Use the open command to view icons in icns Browser or Preview. Avoid using the wildcard *.icns unless you’re comfortable opening over 140 windows at once.

$open–a "icns Browser" TrashIcon.icns
$open–a Preview TrashIcon.icns

Get Modding Mac OS X now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.