\n<\/i><\/p>\n
I will admit that I’m a terrible graphic artist. Any icons, logos, graphics, etc. coming out of iAchieved.it LLC most certainly did not come from me. Yet, I do have to deal with taking the artwork created for us and importing it into our iOS applications, and although it has gotten easier, Apple hasn’t yet made it trouble-free. Trouble-free in my opinion would be supplying one file (the original master) to XCode and letting it take care of the rest. But, we aren’t there yet so let’s look at the next best thing.<\/p>\n
In this blog post I’ll look at how to take your application icon and create all the right files to import into your XCode project. Now, there will be a few assumptions. They are:<\/p>\n
- \n
- you have an original 1024×1024 PNG file of your application icon\n
- you are using XCode 5 and are ready to explore the joys of
Images.xcassets<\/code>\n- you’ve at least heard of OS X Automator<\/a>\n<\/ul>\n
If you don’t have a 1024×1024 PNG of your application icon, I suggest you go get one. You will at least need it to create your application entry in iTunesConnect<\/a>. Every other year Apple seems to be raising the resolution that the AppStore icon must be in. Suffice it to say, this year its 1024×1024.<\/p>\n
As the iPhone and iOS operating system have evolved over the years, so have the icon sizes required in your application bundle. On a “non-retina” iPhone (such as the 3GS), you could get by with supplying a 57×57 PNG and be done with it. Unfortunately on an iPhone 4 (retina display), the 57×57 PNG looked like, well, less than crisp. So, you had to begin bundling a 114×114 (note that 114 is 57 times 2) icon with your application. If you read up on Apple’s documentation<\/a> you could supply on a single icon labeled
@2x<\/code> that was 114×114 and the OS would display the image correctly regardless of the phone.<\/p>\nWith iOS 7 and XCode 5 it gets even crazier. You can supply all of the following dimensions for your application icon:<\/p>\n
- \n
- for an iOS 7 launchpad icon, supply a 60pt icon in 2x resolution (that is 120×120)\n
- for an iOS 5 or 6 launchpad icon, supply a 57pt icon in 2x resolution (that is 114×114)\n
- for an iOS 7 Spotlight icon (the miniature icon that displays when you search for an application), supply a 40pt icon at 2x resolution (that is, 80×80)\n
- for an iOS 5 or 6 Spotlight icon, supply a 29pt icon at 2x resolution (58×58)\n
- for an iOS 5, 6, or 7 Settings icon, supply a 29pt icon at 2x resolution (58×58)\n<\/ul>\n
And for any phone that has a target earlier than iOS 7 you have to supply 1x versions for the Spotlight and Launchpad icons, 29pt and 57pt, respectively. Yikes!<\/p>\n
I don’t know about you, but I get tired of resizing icons and all that. So, before we get to using
Images.xcassets<\/code>, let’s take a look at an Automator script that we can add to our Mac as a Service. This will allow us to take our source application icon (the one at 1024×1024 resolution), and generate all of the little icons we need. Then its drag-and-drop into XCode and done. <\/p>\nEnter Automator, and better, enter Automator Services. We’ll save how to create Automator scripts (actually, I think they are called “workflows”) for a later date. For now, we’ll just give you our Automator Service Workflow CreateXCodeIcons<\/b>. To get it, simply download CreateXCodeIcons.zip<\/a>, unzip, and then right-click on the CreateXCodeIcons<\/b> file. The application is currently unsigned, so you will get a prompt requesting whether or not to open a file from an unknown developer. Click Open.<\/p>\n
A prompt that looks like this will ask whether or not you want to install the CreateXCodeIcons<\/b> service. <\/p>\n
![\"want_to_install_service\"](\"http:\/\/dev.iachieved.it\/iachievedit\/wp-content\/uploads\/2014\/01\/want_to_install_service.png\")
<\/a><\/p>\nClick Install, and now you will have a new menu item in your Finder called CreateXCodeIcons<\/b>.<\/p>\n
![\"workflow_installed\"](\"http:\/\/dev.iachieved.it\/iachievedit\/wp-content\/uploads\/2014\/01\/workflow_installed.png\")
<\/a><\/p>\nOkay, now take your 1024×1024 icon (which in our screenshots we’ll call
icon.png<\/code>), place it in its own folder (this is important to keep everything organized, otherwise the Service will scatter icons in whatever location you had your original in) and right click on it, scroll down toServices<\/code> and selectCreateXCodeIcons<\/code>. The automator service will begin creating copies of the original and resizing them to the dimensions that will be loaded into your XCode project. <\/p>\n![\"ding_finder_icons\"](\"http:\/\/dev.iachieved.it\/iachievedit\/wp-content\/uploads\/2014\/01\/ding_finder_icons.png\")
<\/a><\/p>\nNotice the original
icon.png<\/code> followed by<\/p>\n- \n
60pt@2x.png<\/code>\n57pt@2x.png<\/code>\n<\/ul>\nand so on. These are the files that you will drag into the XCode
Images.xcassets<\/code> folder to provide icons for your application. The names we created are arbitrary, when you add them to your XCode project they will actually be copied and embedded into the project. But, there is a method to our madness. The names line up with where you will place them on the AppIcon canvas. For example, the60pt@2x.png<\/code> icon would be dragged to the location that indicates “2x 60pt”, as shown below:<\/p>\n![\"ios760pt\"](\"http:\/\/dev.iachieved.it\/iachievedit\/wp-content\/uploads\/2014\/01\/ios760pt.png\")
<\/a><\/p>\nAdding Icon Assets to Your XCode Project<\/h2>\n
Now that we can easily create all of the icons we need for our application, let’s look at adding them and some of the nuances involved. For a quick start, download our
ding<\/code> project from GitHub<\/a>. Select the master<\/b> branch which does not contain any app icon assets.<\/p>\nOpen the XCode project, select the
ding<\/code> target, and go to the General<\/b> tab of the target. Scroll down to the section that says App Icons and notice it probably looks like this:<\/p>\n![\"asset_catalog_panel\"](\"http:\/\/dev.iachieved.it\/iachievedit\/wp-content\/uploads\/2014\/01\/asset_catalog_panel.png\")
<\/a><\/p>\nTo get started with using an asset catalog for your app icons first select the text that says “Don’t use asset catalogs” and then you must click on the button that says “Use Asset Catalog”. A dialog indicating that there currently isn’t an asset catalog will pop up, and you will want to click Migrate<\/b>.<\/p>\n
![\"migrate_app_icons\"](\"http:\/\/dev.iachieved.it\/iachievedit\/wp-content\/uploads\/2014\/01\/migrate_app_icons.png\")
<\/a><\/p>\nYou will now see a new folder in your project named
Images.xcassets<\/code>.<\/p>\n![\"new_images_xcassets\"](\"http:\/\/dev.iachieved.it\/iachievedit\/wp-content\/uploads\/2014\/01\/new_images_xcassets.png\")
<\/a><\/p>\nOnce you’ve added the
Images.xcassets<\/code> folder you will want to add a LaunchImage as well, otherwise you will receive the errorAsset Catalog Compiler Error: None of the input catalogs contained a matching launch image set named \"LaunchImage\".<\/code>. This is simple to fix: click on theImages.xcassets<\/code> folder and then beneath the list (of one) that containsAppIcon<\/code>, click the plus sign and choose New Launch Image<\/b>. The asset catalog compiler error will go away.<\/p>\nYou can build the application at this point, you will just get the default iOS “pencil-sketch” icon. Let’s add some icons. Take the
60pt@2x.png<\/code> icon that was generated and drag-and-drop onto the AppIcon<\/b> canvas in the spot for iPhone App iOS 7 60pt<\/b>. If your target is for iOS 7.0 and higher you can stop right here. This is the only icon you actually are required<\/i> to supply, but since we already generated the Settings and Spotlight icons, you might as well add them, they are highly recommended in the Human Interface Guide<\/a> from Apple.<\/p>\niOS 6 and Earlier<\/h2>\n
By default our
ding<\/code> target is set to deploy to iOS 7.0 and higher. It turns out that iOS 7 is available only for iPhone 4 and up, and those models do not use a 57×57 “low-resolution” icon. However, if you want to target the iOS 6, that OS runs on the iPhone 3GS which does<\/i> use the lower resolution icons. To see what happens when you don’t provide all of the required icon assets for your Deployment Target, go back to the Deployment Info<\/b> panel of theding<\/code> target application and change 7.0<\/b> to say, 6.1<\/b>. XCode won’t recognize right away that you haven’t included all of the proper icons, but if you then run the application (or build it), you will see a warning along the lines ofA 57x57 app icon is required for iPhone apps targeting releases of iOS prior to 7.0<\/code>, as well as a warning similar indicating that a@2x<\/code> icon is required. To fix, drag-and-drop the57pt@2x.png<\/code> and57pt.png<\/code> icons onto the AppIcons<\/b> canvas and XCode will automatically create entries for the devices\/targets they support. The final canvas should have these entries:<\/p>\n![\"final_icons\"](\"http:\/\/dev.iachieved.it\/iachievedit\/wp-content\/uploads\/2014\/01\/final_icons.png\")
<\/a><\/p>\nRemember, Apple recommends you supply icons for Settings and Spotlight, and the CreateXCodeIcons<\/b> service from above creates the right icons for these too!<\/p>\n
Conclusion<\/h2>\n
Managing all of the various dimensions of application icons required for an iPhone application can be a real pain. Fortunately, we can automate and streamline a lot of the drudgery. Using the OS X service CreateXCodeIcons<\/a> and the Asset Catalog<\/b> feature of XCode 5 projects, app icon management overhead can be kept to a minimum.<\/p>\n
- you’ve at least heard of OS X Automator<\/a>\n<\/ul>\n