The Sapience Society

I’m writing this post because I was not able to find anything remotely close to solving this problem elsewhere.

The goal (for me, but there are other uses): custom theme stacks icons so that dock reflections work properly. There are more reasons to do this though, such as making icons display correctly in categories. You could also use this to fix jailbroken apps which don’t have nice iPhone style icons.

1. Locate your app’s folder. If the target app is a stock/jailbroken one, you’re going to look in /private/var/stash/Applications/yourApp. If it’s an AppStore app, look in /private/var/mobile/Applications (you just have to look through the folders to find it).
2. Get the app’s icon. Inside the app’s folder you’ll find another folder called “appname”.app, inside this folder look for a file called “icon.png”. If you can’t find that, you can look at Info.plist which should give you the name of the icon file.
3. Copy the icon to your machine.
4. Try to look at it. If you can see the icon skip to step 7.
5. This is the mac-only solution. I don’t know what to do if you’re trying to do this on a windows machine. It looks like your icon is encoded with apple’s weird proprietary format. That won’t work, so you need to fix it. Go here and download the link in the 2nd response.
6. Open a terminal window and run ./fixpng “path/to/icon.png” “path/to/fixedicon.png” – hopefully you’ll now have a readable png image.
7. We’re going to need the mask images that the iPhone OS uses. These are located on the iPhone at /System/Library/Frameworks/UIKit.framework/Other.artwork. Copy the “Other.artwork” file to your machine.
8. To extract this file we’ll use another tool. Go download iPhoneShop. (you will need the latest version of the java runtime installed too)
9. Put the Other.artwork file into the same folder as iPhoneShop, and create a new directory called “pngs”
10. Use the following command to extract the Other.artwork file – “java -jar iPhoneShop-0.6.jar ARTWORK Other.artwork export pngs”
11. The three files you will want are “AppIconMask.png”, “AppIconOverlay.png”, and “AppIconShadow.png”.
12. Open your image editing program of choice, and open the app icon you grabbed. I used Photoshop CS4
13. Change the size of the icon to 59×60 with the icon at the top center.
14. Add the AppIconShadow behind the app icon layer, and the AppIconOverlay on top of it
15. Add the AppIconMask as a layer mask to both the icon and the AppIconOverlay. In Photoshop this is done by clicking the layer mask and using Image/Apply Image…
16. Depending on the app, you may or may not need to use the AppIconOverlay, just check what looks right visually
17. Save the icon as a PNG with the alpha layer. In Photoshop you can do this by using “Save for Web & Devices…” and then save as a PNG-24 with transparency enabled.
18. Now, either make a theme (I’m not going to describe how to do that) or overwrite the icon_b.png file in each stacks directory (located in /private/var/stash/Applications/Stack#.app with your new icon.

Ta-da, success! I’m pretty much positive that almost no one will be able to follow this whole tutorial… but I’ll be happy to answer any questions you might have.