While I was preparing version 1.0 of Textastic for Mac, one of the things I still needed to do was to create some basic document icons. Considering the amount of Mac apps out there, I was sure that either Apple or someone else would provide a template for that. Unfortunately, that doesn’t seem to be the case.

When Mac OS X came out, Apple seemingly provided a high-quality template for document icons in their Aqua Icon Kit. According to an old MacRumors thread, a beta version of Icon Composer even included functionality to easily generate document icons.

Apple provides some useful information about creating proper document icons in the OS X Human Interface Guidelines. But, they don’t link to any templates or tools you can use to ease the creation of them.

On Stack Overflow I found that the generic document icon used by Mac OS X is located at /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/GenericDocument.icns. One should be able to use this as the base for custom document icons.

So, now I needed a way to access the individual images in an icns file. Sure, you can open the file in Preview, but as soon as you try to copy and paste one of the images into Photoshop, you’ll notice that the pasted image doesn’t include an alpha channel and all transparency information is lost1. This isn’t very helpful. There’s also the “sips” command line tool, but it can only extract one png from the icns file or at least I don’t know how to make it extract all resolutions.

Thankfully, there is a solution if you have Xcode installed. Previously, you would create an icns file using the Icon Composer tool. The modern way, which also supports high-resolution icons for use with Retina screens, is to let Xcode create an icns file automatically from a set of png files in an iconset folder. Internally, Xcode uses the iconutil command line tool to create an icns file from an iconset folder. You can also use the iconutil tool manually and, even better: it also allows you to create an iconset folder with png files from an icns file!

Just use the following command:

iconutil --convert iconset GenericDocument.icns

This will create a GenericDocument.iconset folder which contains all resolution variants as neatly named png files - ready to be customized by you.

  1. Update: This works for me now when I use Adobe Photoshop CC 2014 on Mavericks. ↩