Question

I have an icon for my iOS app that seems to be missing some margins that other icons have. This creates an irregular, unwanted border around the icon when it is selected in Springboard (as the darkened selection overlay is smaller than the actual icon), as visible in this image:

When selected, missing margins create a irregular, unwanted border around the icon

When another app is selected (Safari, for example), there is no extra border: When another icon is selected, there is no extra border

I've tried this out with "Prerendered" setting (in the Xcode Target Summary page) on and off with no visible difference. I've also noticed other apps icons that have this issue. When I look at the icon for an app that doesn't have this issue, I do notice margins of a few pixels on every side.

I couldn't find any values listed online for the margins of different icon sizes. Does someone happen to know the values for the margins, or a program that can create the images with the correct margins? Or is there something else I may be missing?

(Note that the icons are not parallel due to the wiggling icons do in the app-deletion mode of Springboard. The 72@2x visible on the icon is--I assume--a separate issue.)

UPDATE: I myself have verified this on both a iPod Touch 4 (iOS 5) and iPhone 4 (iOS 6). (If it matters, both devices are jailbroken.) The project contains the following icons: Icon (57x57), Icon@2x (114x114), Icon-72 (72x72) and Icon-72@2x (144x144).

UPDATE 2: Since I'm developing an app for Cydia, the automatic icon rounding done by Springboard for regular App Store apps doesn't seem to be a possibility (see comments in @Vojtech Vrbka's answer).

UPDATE 3: Posted my solution to this problem (also removed the linked question in the last paragraph before the updates).

Was it helpful?

Solution 2

It turns out the main problem I had was not knowing what margins to use, but that my app did not get the automatic rounded corners (and margins) from Springboard which regularly installed apps would get (as my app is for Cydia, meaning it's basically a System App, and I was installing it manually to /Applications).

I found a similar question here, which had two useful answers, one which provides a potential way to prepare the icons manually, and another which names a useful app in Cydia which can create the icons correctly: http://cydia.saurik.com/package/org.thebigboss.iconmaker (most likely using the method from the other answer).

OTHER TIPS

If you are making round corners manually, don't. Use square icon and the round corners will be added automatically.

Here is list of all sizes, that you should include in your app: Custom Icon and Image Creation Guidelines

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top