Preparing high-res icon files with Automator
This week's post is for all those Mac app developers out there. If you're not an app developer yet, it's a new year, and I'm sure becoming an app developer is at at the top of your resolution list. In any case, if you plan to develop apps, then you need to prepare icons for those apps. Apple provides very specific requirements for generating high resolution icons, which you can find listed on the Apple Developer Connection website.
In the past, Xcode came with a tool named IconComposer, which could be used to generate icon files. This tool, however, didn't generate high res icon files, so Apple now discourages its use. Instead, Apple provides instructions for generating icons using an iconset, a folder of image files that can be converted to an icon file using either Xcode or the iconutil command line tool. There are, of course, other ways of creating icons. In this post, however, we'll focus on an iconset.
To manually generate an iconset folder, you start by creating a square image to serve as your icon. Next, you generate versions of the image scaled to 16x16, 32x32, 128x128, 256x256, 512x512. These scaled versions are to be named as follows:
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
icon_256x256.png
icon_256x256@2x.png
icon_512x512.png
icon_512x512@2x.png
You place all of these images into a folder named FolderName.iconset. Then, you can process it with iconutil to generate an icns file.
Sure, creating scaled images and processing them isn't too difficult, but it's a lot of repetitive work. If you create icons regularly, it can get tedious. You're probably thinking, surely, Automator can be used to streamline the process. It can. Here, we'll create an application workflow you can run anytime you want to convert an image to an icon file. Let's get started...
Note: If you're an iOS developer, feel free to adjust the workflow below accordingly.
Creating the Workflow
Launch Automator and create a new Application workflow.
Next, insert and configure the following actions.
Note: This workflow is pretty long and repetitive. It's easy to get lost. If you get stuck, don't worry, you can download the complete workflow here, along with a sample icon image.
1. Ask for Finder Items - Set this action to ask for an image file at least 1024x1024 in size.
2. New Folder - Set this action to create a folder named MyIcon.iconset on your Desktop.
3. Set Value of Variable - From the popup menu in this action, choose New Variable and create a variable named iconset folder.
4. Get Folder Contents
5. Change Type of Images - Set this action to convert images to PNG format.
6. Scale Images - Set this action to scale the image to a size of 1024 pixels.
7. Rename Finder Items - Set this action to name a single item's basename only to icon_512x512@2x. This represents a 1024 image (i.e. a Retina display ready size) when the icon is created. Note that this action's title changes in the workflow to reflect the type of naming, in this case Name Single Item.
8. Duplicate Finder Items
9. Scale Images - Set this action to scale the image to a size of 512 pixels.
10. Rename Finder Items - Set this action to name a single item's basename only to icon_512x512.
11. Duplicate Finder Items
12. Rename Finder Items - Set this action to name a single item's basename only to icon_256x256@2x.
13. Duplicate Finder Items
14. Scale Images - Set this action to scale the image to a size of 256 pixels.
15. Rename Finder Items - Set this action to name a single item's basename only to icon_256x256.
16. Duplicate Finder Items
17. Rename Finder Items - Set this action to name a single item's basename only to icon_128x128@2x.
18. Duplicate Finder Items
19. Scale Images - Set this action to scale the image to a size of 128 pixels.
20. Rename Finder Items - Set this action to name a single item's basename only to icon_128x128.
21. Duplicate Finder Items
22. Scale Images - Set this action to scale the image to a size of 64 pixels.
23. Rename Finder Items - Set this action to name a single item's basename only to icon_32x32@2x.
24. Duplicate Finder Items
25. Scale Images - Set this action to scale the image to a size of 32 pixels.
26. Rename Finder Items - Set this action to name a single item's basename only to icon_32x32.
27. Duplicate Finder Items
28. Rename Finder Items - Set this action to name a single item's basename only to icon_16x16@2x.
29. Duplicate Finder Items
30. Scale Images - Set this action to scale the image to a size of 16 pixels.
31. Rename Finder Items - Set this action to name a single item's basename only to icon_16x16.
32. Get Value of Variable - Set this action to get the iconset folder variable you created way back at the beginning of the workflow. You also need to set this action to ignore its input, so it doesn't continue processing the 16x16px image from the previous action. Select Action > Ignore Image.
33. Run Shell Script - Set this action to pass input as arguments. Then, enter the following command:
iconutil -c icns "$@"
Preparing the Run the Workflow
Before you begin running the workflow, you need an image you can convert to an icon. Note that iconutil requires this image to be square. So, make sure it is. If you really want to be sure it's square, you can insert a Crop Images action between steps 5 and 6, and configure it to crop to 1024x1024, scaling to the shortest side before copping. However, if your image contains transparency, this action will remove it. So, it's best to prepare your starting image as a square.
Running the Workflow
When you run the workflow, you're first asked to choose an image. Select the desired image and click Choose.
The workflow runs, an iconset folder is created on your Desktop and passed to iconutil, which generates an icns file.
You're ready to plug your icns file into your app. Now, any time you need to generate an icon, just create a square image and trigger your workflow. Happy New Year and Happy App Developing!
