Seeing Lo-Res & Double When All I Want is Bling

I solved the puzzler that I brought to Cocoaheads NYC a few weeks ago.

For some background, I have mostly written iOS apps, and I had written my first Mac App (Blinged JSON Validator, and yes, it is awesome), and I was in the final stretch with the app icons. In XCode, for an iOS app, you can drag and drop your app icons into the Asset Catalog, and upload the App Store Icon separately in iTunes Connect. But, when I filled up my Asset Catalog with the correctly named (icon_<size>x<size>@2x.png) and sized (@2x and without) icons for my Mac app, I would see a graded icon, and, on app submission, I was unhappily surprised to see such a low-res icon.

Here were my symptoms in one infographic:

Click to enlarge this image. You'll be able to see the low resolution and the funky tray icon behavior!

I showed the group that removing a few icons from the Asset Catalog would improve the tray icon, which is I submitted 1.0 with, but I got lots of Asset Catalog warnings about being incomplete. Plus, it still didn't solve my fuzzy App Store icon, even though I had both the 512 and  512@2x icons in there.

Something was funky, and the group shrugged.  But Bob recommended that I try using an .icns file instead, and to look into the Icon Composer.   It turns out Icon Composer is more or less defunct but there's an equivalent command-line tool to get you the .icns I needed.  I didn't use the Asset Catalog for the app icons, so if anyone's had success with it, I'd like to hear what you did.

 

Here's how I fixed up my project:

1. Prepare an .iconset file
   
   You can place all of your image files into a folder, and give that folder an extension .iconset, or you can use the Icon Composer 2x app to drop-in all of your images. I used the Icon Composer 2x app, and noticed that I hadn't generated a 64x64 image (though I made a 32x32@2x, following the docs), so I did that, and dropped it in.
   
   
2. Generate an .icns file
   
   Save the "Icon Composer 2x" file, or run the icon util on your existing folder:
   iconutil -c icns yourfoldername.iconset
   
   
3. Add the .icns file to your project
   
   
4. In the Target inspector, under General -> App Icons, change the dropdown to not use Asset Catalog. You should see a new square box appear. Drag your new .icns file to the box and make sure the preview appears with high quality.
   
   
5. Go to your Asset Catalog, and remove the AppIcon set altogether.
   
   
6. Edit your project's plist to use the Icon file property as the .icns file. Mine is:<key>CFBundleIconFile</key>
     <string>1.0.1.icns</string>

Build clean, reopen your project in XCode.

I just submitted BlingedJSONValidator 1.0.1 for approval, and, this time, my icons are READY!  Next week, I'm getting a retinal MBP, so I am slightly terrified to see what my bling looks like @2x, but, hey, there's always another release.

 

If you're reading this and you did not know I released an app, you should go get it! It's called Blinged JSON Validator (official info here). It takes a snippet of text, and, if it doesn't validate as JSON, it shows where parsing croaked, but, if it does, it shows syntax highlighting and diamonds!  

Here's a preview of how it works:

 

 

And if you're wondering how I made this gif, I recorded a desktop video using Quicktime, then I converted the movie into a gif using GifRocket, my new favorite tool.