: IOS App Icon design - the rounded corners issue The problem: The anti-aliased rounded corners of my app icons show, due to the transparency, some pixels of the underlying background. My quick

@Pierce403

I always extend the colour and let the OS mask the corners.

The exact radius for each size is (getting the corner radius perfect ensures the masking done by iOS matches closely):


Icon512.png - 512px - 89.825
Icon.png - 57px - 10
Icon@2x.png - 114px - 20
Icon-72.png - 72px - 12.632
Icon-72@2x.png - 144px - 25.263
Icon-Small.png - 29px - 5.088
Icon-Small@2x.png - 58px - 10.175


As discussed here: stackoverflow.com/a/10239376/1347722
Start with a 10px radius on the 57×57px icon and scale the document up and down from there to get the correct corner radius.

Here's some examples of icons I've made, with the various corners unmasked. I really do think extending the art beyond the corner gives the best results.



Sometimes it means building your shapes a little differently to get the desired effect.

And the second problem I have with this is that wherever the icon is used as well (testflight, app reviews) where I have no control over what icon gets picked, the cornerless version simply does not represent the final design.

It's a shame you can't control everything, but users are less likely to see your design on those sites than on their home screen or in the App Store.

Vote Up Vote Down

@RJPawlick971

Compromise. Build your icons with your own rounded corners with a transparent background, but let the corner radius be just a tad smaller than what iOS uses. That way iOS still gets to crop as it sees fit to make the nice round corner, and those that just grab the full version will still see a rounded corner, albeit at a slightly different radius/slightly thicker edge.

Vote Up Vote Down