As some of you might know, the iOS treatment of app icons is ruthlessly strict. It forces a certain roundness of the corners and allows no transparency, hence enforcing a unified look. I think that's nice.

I recently fell in love with Iconfactory's Flurry icon set and making new icons in that style made me think; what's the easiest way of applying a mask and an overlay on a custom image, and generate all sizes needed for a complete OS X icon file (icns)?

As mentioned below I'm not looking for technical explainations of how iOS generates its icons, nor a system wide solution for generating icons on the fly. Just what's mentioned in bold above. I'm also aware of the IconBuilder approach and although it's a great tool, it's not what I'm asking for. I'd prefer a drag-and-drop interface of some sort.

5 Answers 5


Building off of cksum's answer, if you can get ahold of the mask, overlay and shadow images at high enough resolution (@2x images are still only about 140px square,) and you're comfortable with the command line/shell scripting, you can use ImageMagick, a nice command line image processor, to actually mask and compose the icon.

Once you've installed ImageMagick (They have installation instructions here) you should be able to process your image with the mask, overlay and shadow:

convert YourImage.png overlay.png -composite YourImage_overlay.png
convert YourImage_overlay.png mask.png -alpha off -compose CopyOpacity -composite YourImage2.png
convert shadow.png YourImage2.png -composite YourImage_largest.png
convert YourImage_largest.png -geometry 512 Icon512.png
convert YourImage_largest.png -geometry 256 Icon256.png

This assumes that Your_Image is large and square (1024x1024) and that the mask.png, overlay.png and shadow.png are the same size.

Ideally, you wouldn't just resample the largest icon down to get the smaller versions, but you could instead use normal icon making software (e.g. IconBuilder) and use it to make YourImage at each size, then do the above to each one individually.

As for getting the mask, overlay and shadow images to the correct size, my best recommendation would be to enlarge them and then build them back (i.e. drawing a new roundrect and gradients) at full resolution with Photoshop or GIMP.

Once you have the image at each resolution, you can throw it into Apples own Icon Composer (in the iOS/Mac SDK) to create the .icns

It's not the easiest solution, but it provides you the flexibility of specifying the exact mask and other effects and of the command line.

  • Thanks for this answer! Never thought of the IM approach. Not very user friendly, but I'm for it if it does what I want. Will try it out before the bounty ends!
    – yusf
    Mar 21, 2012 at 12:41
  • 1
    Speaking of user friendly, I was just looking at this again and the commands are out of order: overlay, mask, then shadow, not mask, overlay, shadow. I've fixed the post, just a heads-up.
    – jgriego
    Mar 21, 2012 at 22:35

Perhaps if someone wrote a hack (but I remain skeptical as all this could be easily done by getting the icon's template (PSD file) and doing it manually.

iOS has a framework in place to deal with SpringBoard icons. The files are as follows (naming convention taken from iOS 5. Previous iOS versions drop the ~iphone suffix):

  1. AppIconMask@2x~iphone.png
  2. AppIconOverlay@2x~iphone.png
  3. AppIconShadow@2x~iphone.png

(1) is the clipping mask, that dictates the shape of the icon. (2) is the "gloss" effect that has somewhat fallen out of favor in the past couple of years and is optional. (3) is the base of the icon, the shadow that is applied under the final product.

I made a graphic and accompanying explanation of how they all work together on my website which should help better explain how iOS delivers icons on its respective device.

Jaku iOS Theme icon mask pictogram

OS X has no such system in place. Each icon is simply constrained by the dimensions set in Finder. Apple never sought to control the way icons look on OS X, but wanted to have a uniform appearance on iOS (and I don't blame them), hence the reason why they developed such a framework.

You could try contacting a Cocoa developer on porting the MobileIcons.framework from iOS to OS X, but again, because Finder can adjust sizes (in Lion, anywhere from 1024x1024 on down), I remain skeptical that it at all possible.

  • Thank you cksum for explaining the underlying techniques of iOS icon treatment. Your understanding of my question is a bit off though. I'm not aiming for a OS X version of MobileIcons.framework, just a way of generating all appropriate sizes for a icns, with masking and gloss to my likings.
    – yusf
    Mar 19, 2012 at 0:34
  • Ah, I see. Give iconfactory.com/software/iconbuilder a try. It allows you to create a PSD template that includes any size you wish, then save them as a single icns file. You'll have to run Ps in 32bit mode as it has not been updated in a while, but it does exactly what you want. It produces something like this: iconfactory.com/graphics/software/iconbuilder/screen1.jpg Since it leverages the power of Ps, once you have the templates set up, you can create your icons with relative ease.
    – user10355
    Mar 19, 2012 at 0:45
  • Thank you! I'm aware of the IconBuilder approach and I've used it but would not regard it as to "generate icons".
    – yusf
    Mar 19, 2012 at 1:03

The other apps mentioned have their uses, but for your stated request, there are 2 apps that accomplish it very easily:

Both are available on the Mac App Store, but I prefer icons between the two—it's vastly more robust, and quite polished. As you'll see from the screen-cap I added, icons makes tinkering with all the variables (corners, shine, export sizes, etc.) very easy—and that's only one part of the app! (The other tabs address non-iDevice icons…)

screen-cap of ***icons*** app interface

  • Thank you for answering! This is kind of what I'm looking for, but Icons got some strong limitations: It doesn't allow me to custumize the mask and I can't control the masks and "glass" overlay for each size. Bulk generating would be nice too.
    – yusf
    Mar 21, 2012 at 12:40

First, check out Img2Icns for the easiest way to make an ICNS file from a 512x512 image file. (The free version works great).

Second, check out CandyBar to manage and install replacement icons. Costs a few dollars, but it's a great program.

Third, search DeviantArt for Flurry icons that have already been created. Search for both flurry icon and ios icon.

Finally, if you can't find what you're looking for, use this Flurry template to create new icons.

  • Sorry, this doesn't at all answer my question. Frankly, it's quite off point. And writing "…making new icons in that style…" indicates that I've already created a few of my own.
    – yusf
    Mar 19, 2012 at 0:27
  • You said, "what's the easiest way of applying a mask and an overlay on a custom image, and generate all sizes needed for a complete OS X icon file (icns)?" The PSD template can be used to apply a mask and gloss effect on on your custom image. Img2Icns will then generate all sizes needed for a complete icns file. Sorry if I misunderstood your question, I was just trying to help.
    – flakshack
    Mar 19, 2012 at 14:43

There is no need to create the corners and shine, they are added automatically by your app at compile time.

From the docs1:

When iOS displays your application icon on the Home screen of a device, it automatically adds the following visual effects:

  • Rounded corners
  • Drop shadow
  • Reflective shine (unless you prevent the shine effect)
  • 2
    Welcome to Ask Different! Thanks for posting an answer! The OP is not talking about iOS app icons for iOS, rather he is referring to iOS style icons in OS X.
    – daviesgeek
    Mar 20, 2012 at 21:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .