iPhone App Icons - Exact Radius?

Question

I'm trying to create the icon for my iPhone app, but don't know how to get the exact radius that the iPhone's icons use. I've searched and searched for a tutorial or a template but can't find one.

I'm sure that I'm just a moron, but how do you get the rounded corners exactly right with your icon from Illustrator or Photoshop?

Edit:

What's the radius for the Retina iPad?

@NickVeys No matter how old, an unanswered question bugs me. Not sure if this is the poster's intention, but it could be for a Jailbreak app, or artwork outside of iOS itself. — tkbx, May 26 '12 at 02:46
And then iOS 7 came, increased the "default" icon radius, and made this question instantly out-of-date. — marzapower, Jun 10 '13 at 23:42
Icons shouldn't be rounded any more. Apple now [requires square graphics with no corner rounding](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/AppIcons.html#//apple_ref/doc/uid/TP40006556-CH19-SW1). — Mark Whitaker, May 05 '15 at 07:49
You just need a 1024*1024 square icon, use some app such as [Prepo](https://itunes.apple.com/us/app/prepo/id476533227?l=en&mt=12) to generate all needed size. The device will do the rest for you. — NSDeveloper, Jul 18 '15 at 05:43
@MarkWhitaker that's true, but sometimes you need the rounded image to show to friends, family, and the Internet. — Dan Rosenstark, Mar 08 '17 at 22:36

score 357 · Answer 1 · edited May 23 '17 at 12:10

357

You can make four icons (as of today) for your app and they can all have a different look - not necessarily based on the 512x512 image.

corner radius for the 512x512 icon = 80 (iTunesArtwork)
corner radius for the 1024x1024 icon = 180 (iTunesArtwork Retina)
corner radius for the 57x57 icon = 9 (iPhone/iPod Touch)
corner radius for the 114x114 icon = 18 (iPhone/iPod Touch Retina)
corner radius for the 72x72 icon = 11 (iPad)
corner radius for the 144x144 icon = 23 (iPad Retina)

If you do create a set of custom icons, you can set the UIPrerenderedIcon option to true in your info.plist file and it will not add the gloss effect but it will place a black background under it and still round the image corners with these corner radii so if the corner radius on any of the icons is greater then it will show black around the edges/corners.

Edit: See comment from @devin-g-rhode and you can see that any future icon sizes should have a 1:6.4 ratio of corner radius to icon size. There is also a very good answer from https://stackoverflow.com/a/29550364/396005 which has the location of image mask files used in the SDK for rounding icon corners

To add a retina-compatible file, use the same file name and add '@2x'. So if I had a file for my 72x72 icon named icon.png, I would also add a 114x114 PNG file named icon@2x.png to the project/target and Xcode would automatically use that as the icon on a retina display. You can see this in action on the Summary page of the application target if you've done it right. The same works for your launch images. Use launch.png at 320x480 and launch@2x.png at 640x960.

edited May 23 '17 at 12:10

Community

1
1

answered Sep 28 '10 at 14:46

Bron Davies

5,930
3
30
41

As I stated in my answer, I found that the best approach is not handling the rounding of the corners by hand, but its better to let iOS do it for you. This way you will always be sure that the corners will always be up-to-date. – marzapower May 10 '11 at 08:23
110

512/80 == 114/18 == 72/11 == 57/9 == 6.4 You can take your icon's square length, and divide it by 6.4 to get the same ratio as apple does. So for a 19x19 icon, 19/6.4 ~ 3px border radius – Devin Rhode Jun 14 '11 at 15:57
8

The 80px radius for iTunesArtwork is definitely wrong. You can find the mask image that's used in iTunes in the iTunes bundle. It's 90 px. Could it have been changed lately? – zmippie Jun 18 '11 at 15:46
No it is definitely 80 and not 90. The point is it's approximately a fixed 15.625% border radius. – bitwit Apr 04 '12 at 03:06
6

The Retina iPad radius (144x144 icon) is **23** pixels, FYI. And 1024x1024 icons should have a **160** pixel radius. Pretty easy to calculate these yourself though. – Andrew R. Apr 16 '12 at 20:52
I thought UIPrerenderedIcon=true only gets rid of the gloss, not the corner radius. – Tenfour04 Aug 31 '12 at 02:25
Hey just thought I'd mention - the 1024px artwork should have a 180px border - not 160px as previously mentioned. – Nelga Sep 10 '12 at 03:52
@Nelga so I guess it's not THAT easy to figure out, as Andrew leads us to believe ;) – Oct 19 '12 at 06:03
1

This all won't work with iOS 7 any more. They increased the so-called-standard icon radius. – marzapower Jun 10 '13 at 23:38
It's been 12 years since this was asked by @frank-barson - can you mark this as the correct answer please? – Bron Davies Aug 03 '22 at 16:47

score 300 · Answer 2 · edited May 10 '19 at 17:15

After trying some of the answers in this post, I consulted with Louie Mantia (former Apple, Square, and Iconfactory designer) and all the answers so far on this post are wrong (or at least incomplete). Apple starts with the 57px icon and a radius of 10 then scales up or down from there. Thus you can calculate the radius for any icon size using 10/57 x new size (for example 10/57 x 114 gives 20, which is the proper radius for a 114px icon). Here is a list of the most commonly used icons, proper naming conventions, pixel dimensions, and corner radii.

Icon1024.png - 1024px - 179.649
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

Also, as mentioned in other answers, you don't actually want to crop any of the images you use in the binary or submit to Apple. Those should all be square and not have any transparency. Apple will automatically mask each icon in the appropriate context.

Knowing the above is important, however, for icon usage within app UI where you have to apply the mask in code, or pre-rendered in photoshop. It's also helpful when creating artwork for websites and other promotional material.

Additional reading:

Neven Mrgan on additional icon sizes and other design considerations: ios app icon sizes

Bjango's Marc Edwards on the different options for creating roundrects in Photoshop and why it matters: roundrect

Apple's official docs on icon size and design considerations: Icons and Images

Update:

I did some tests in Photoshop CS6 and it seems as though 3 digits after the decimal point is enough precision to end up with the exact same vector (at least as displayed by Photoshop at 3200% zoom). The Round Rect Tool sometimes rounds the input to the nearest whole number, but you can see a significant difference between 90 and 89.825. And several times the Round Rectangle Tool didn't round up and actually showed multiple digits after the decimal point. Not sure what's going on there, but it's definitely using and storing the more precise number that was entered.

Anyhow, I've updated the list above to include just 3 digits after the decimal point (before there were 13!). In most situations it would probably be hard to tell the difference between a transparent 512px icon masked at a 90px radius and one masked at 89.825, but the antialiasing of the rounded corner would definitely end up slightly different and would likely be visible in certain circumstances especially if a second, more precise mask is applied by Apple, in code, or otherwise.

Aleksandar, though it may look fine in most circumstances, starting with 90 won't work perfect in _all_ circumstances. See my update above. — drbarnard, Apr 20 '12 at 15:19
Great post with lots of detail. Very glad you bugged Louie for an exact answer. Mine have all been based on 57px then scaled up, but that was a fluke. Great to have confirmation that's what Apple do. — Marc Edwards, Apr 21 '12 at 01:23
Is this means that if app icon is not square, then we should use Illustrator to draw the icon? because Photoshop does not support radius with a decimal point..... — flypig, Nov 23 '12 at 09:43

score 49 · Answer 3 · edited Jul 26 '19 at 22:18

49

I see a lot of "px" discussion but no one is talking percentages which is the fixed number you want to calculate by.

22.37% is the key percentage here. Multiply any of the image sizes mentioned above in by 0.2237 and you will get the correct pixel radius for that size.

Before iOS 8, Apple used less rounding, using 15.625%.

EDIT: Thanks @Chris Prince for commenting with the iOS 8/9/10 radius percentage: 22.37%

edited Jul 26 '19 at 22:18

Owen Versteeg

342
2
14

answered Jul 17 '12 at 17:36

bitwit

2,589
2
28
33

For a 1024x1024 icon (I'm creating some press kit graphics), this gives a corner radius of 160, which is too small according to my eye. – Chris Prince Oct 01 '14 at 20:19
4

For my eye, again, for press kit graphics, not for any official Apple submission, 22.37% looks more pretty close to the iOS8 rounding. E.g., 229 px radius in photoshop for 1024x1024. – Chris Prince Oct 01 '14 at 20:43
@ChrisPrince This answer definitely needs updating for iOS8, thanks for the input – bitwit Oct 01 '14 at 23:08
2

Actually, the percentage is 22.5%. – saagarjha Apr 27 '20 at 01:08
1

@saagarjha please provide more information about the specific iOS versions this applies to if you want me to update this answer – bitwit Nov 09 '20 at 19:47
2

Uh, this would have been iOS 13 when I wrote that. I didn't check anything earlier. – saagarjha Nov 09 '20 at 23:03

score 30 · Answer 4 · edited Jun 20 '20 at 09:12

Important: iOS 7 icon equation

With the upcoming release of iOS 7 you will notice that the "standard" icon radius has been increased. So try to do what Apple and I suggested with this answer.

It appears that for a 120px icon the formula that best represents its shape on iOS 7 is the following superellipse:

|x/120|^5 + |y/120|^5 = 1

Obviously you can change the 120 number with the desired icon size to get the corresponding function.

Original

You should provide an image that has 90° corners (it’s important to avoid cropping the corners of your icon—iOS does that for you when it applies the corner-rounding mask) (Apple Documentation)

The best approach is not rounding the corners of your icons at all. If you set your icon as a square icon, iOS will automatically overlay the icon with a predefined mask that will set the appropriate rounded corners.

If you manually set rounded corners for your icons, they will probably look broken in this or that device, because the rounding mask happens to slightly change from an iOS version to another. Sometimes your icons will be slightly larger, sometimes (sigh) slightly smaller. Using a square icon will free you from this burden, and you will be sure to have an always up-to-date and good looking icon for your app.

This approach is valid for each icon size (iPhone/iPod/iPad/retina), and also for the iTunes artwork. I followed this approach a couple of times, and if you want I can post you a link to an app that uses native square icons.

Edit

To better understand this answer, please refer to the official Apple documentation about iOS icons. In this page it is clearly stated that a square icon will automatically get these things when displayed on an iOS device:

Rounded corners
Drop shadow
Reflective shine (unless you prevent the shine effect)

So, you can achieve whatever effect you want just drawing a plain square icon and filling content in it. The final corner radius will be something similar to what the other answers here are saying, but this will never be guaranteed, since those numbers are not part of the official Apple documentation on iOS. They ask you to draw square icons, so ... why not?

Yes, right on. This is exactly the conclusion I've come to; unless one has time to pay a designer to create AND TEST each icon size individually for each device. — Dogweather, Jul 24 '11 at 17:00
They are not downscaled. You have to set the correct icon size for each device, but instead of drawing the corners, you just leave the icons in a plain square format. Apple will do the rest of the work for you. No scaling needed. Just try and let me know! — marzapower, Sep 22 '11 at 19:50
Marzapower, you're right, as long as you're happy with Apple's lighting effect. You can't have one without the other unless you pre-render — Gordon Dove, Aug 08 '12 at 17:39
Apple's lighting effect has nothing to do with rounded corners. By the way you can change the overlay effect in your icons using a square icon, and everything will work fine. — marzapower, Sep 04 '12 at 15:02
This doesn't answer the question. Considering icon designs that have explicit 3D effects with rounded corners are popular these days, it's important to know the right answer to this question. It's not helpful to say "Just draw a square." — sobri, Oct 01 '12 at 03:58
This question cannot simple have a *single* answer, because Apple does not guarantee that icon corner radii will not change through time. It's like asking how to use a hidden private API. If Apple slightly changes these radii with iOS 6.0.1 all this page will become useless. — marzapower, Oct 04 '12 at 08:34
The iPhone 5c body has the same curves rounding to the back of the case. (Side top and bottom profile, not front profile) — uchuugaka, Jan 19 '14 at 13:39

Onur Yıldırım · Answer 5 · 2017-11-17T19:13:33.273

25

People arguing about the corner radius being slightly increased but actually that's not the case.

From this blog:

A ‘secret’ of Apple’s physical products is that they avoid tangency (where a radius meets a line at a single point) and craft their surfaces with what’s called curvature continuity.

You don't need to apply corner radius to icons for iOS. Just provide square icons. But if you still want to know how, the actual shape is called Squircle and below is the formula:

edited Nov 17 '17 at 19:13

answered Nov 17 '17 at 03:00

Onur Yıldırım

32,327
12
84
98

4

iPhone icons are no longer squares with rounded corners since iOS 7. This should be the accepted answer _(even if the formula isn't a clear answer to the size of the curved corners)_. – Crazyrems Dec 06 '18 at 10:29
1

@Crazyrems thanks but there is no radius size to give bec. corners are curved (not rounded) according to the size of the square with a specific "formula". – Onur Yıldırım Apr 12 '19 at 01:06

Agos · Answer 6 · 2012-04-20T08:10:35.223

16

The answer from dbarnard has the formula to calculate the correct radius, but since you were looking for the templates, all the masks and overlays can be found in this directory:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

(path is for recent versions of XCode. For older version it will probably be inside /Developer/).

As others have noted, you should NOT mask them yourself, but you can use these to check how your icons will look once masked.

(credits for this finding goes to Neven Mrgan IIRC)

edited Apr 20 '12 at 08:10

answered Apr 20 '12 at 08:01

Agos

18,542
11
56
70

1

This path changes with every version of the SDK. You can locate the current path with this command `find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'` – Bruno Bronosky Apr 09 '15 at 22:24

score 8 · Answer 7 · answered Jan 22 '10 at 02:09

8

The corner radius of the 57 x 57 pixel icon is 9 pixels.

answered Jan 22 '10 at 02:09

willc2

38,991
25
88
99

2

Willc2, you're correct - but if Frank is designing iPhone icons properly he'd be working with a 512x512 image and the border radius at that level is 80 pixels which rounds off to 9px when you scale it down to 57x57. – Jessedc Aug 06 '10 at 03:26

score 8 · Answer 8 · answered Apr 09 '15 at 22:46

As others have said, you don't want to round your corners. You want to ship flat (no layers or alpha) square graphics. Apple changed the mask they use for rounding your corners in iOS7 and then again in iOS8. You can find these masks inside your Xcode application bundle. The path changes with every new SDK version they release. So, I'll show you how you can always find it.

find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'

At this very moment, the path found by that command is /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.framework but don't trust that. Use the command to find it yourself.

That path points to a directory with these files (again, at the time of this post)

./AppFolderBadgeIconMask-128_1only_.png
./AppFolderBadgeIconMask-16_1only_.png
./AppFolderBadgeIconMask-256_1only_.png
./AppFolderBadgeIconMask-32_1only_.png
./AppFolderBadgeIconMask-512_1only_.png
./AppFolderBadgeIconOverlay-128_1only_.png
./AppFolderBadgeIconOverlay-16_1only_.png
./AppFolderBadgeIconOverlay-256_1only_.png
./AppFolderBadgeIconOverlay-32_1only_.png
./AppFolderBadgeIconOverlay-512_1only_.png
./AppFolderBadgeIconShadow-128_1only_.png
./AppFolderBadgeIconShadow-16_1only_.png
./AppFolderBadgeIconShadow-256_1only_.png
./AppFolderBadgeIconShadow-32_1only_.png
./AppFolderBadgeIconShadow-512_1only_.png
./AppIconMask@2x~ipad.png
./AppIconMask@2x~iphone.png
./AppIconMask@3x~iphone.png
./AppIconMask~ipad.png
./AppIconMask~iphone.png
./CarAppIconMask.png
./CarNotificationAppIconMask.png
./DefaultIcon-20.png
./DefaultIcon-20@2x.png
./DefaultIcon-20@3x.png
./DefaultIcon-29.png
./DefaultIcon-29@2x.png
./DefaultIcon-29@3x.png
./DefaultIcon-40.png
./DefaultIcon-40@2x.png
./DefaultIcon-40@3x.png
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./DocumentBadgeMask-145@2x.png
./DocumentBadgeMask-20.png
./DocumentBadgeMask-20@2x.png
./DocumentBadgeMask-20@3x.png
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./DocumentBase-48@2x.png
./DocumentBase-48@3x.png
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./DocumentMask-48@2x.png
./DocumentMask-48@3x.png
./NanoDefaultIcon-24.0@2x.png
./NanoDefaultIcon-27.5@2x.png
./NanoDefaultIcon-40.0@2x.png
./NanoDefaultIcon-44.0@2x.png
./NanoDefaultIcon-86.0@2x.png
./NanoDefaultIcon-98.0@2x.png
./NanoIconMaskChiclet-24.0@2x.png
./NanoIconMaskChiclet-27.5@2x.png
./NanoIconMaskChiclet-40.0@2x.png
./NanoIconMaskChiclet-44.0@2x.png
./NanoIconMaskChiclet-86.0@2x.png
./NanoIconMaskChiclet-98.0@2x.png
./NewsstandDefaultMagazine_1only_.png
./NewsstandDefaultNewspaper_1only_.png
./NewsstandMagazineGradientLeft@2x~ipad.png
./NewsstandMagazineGradientLeft@2x~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./NewsstandMagazineGradientRight@2x~ipad.png
./NewsstandMagazineGradientRight@2x~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./NewsstandMagazineSwitcherGradientLeft@2x.png
./NewsstandNewspaperGradientBottom@2x~ipad.png
./NewsstandNewspaperGradientBottom@2x~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./NewsstandNewspaperGradientLeft@2x~ipad.png
./NewsstandNewspaperGradientLeft@2x~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./NewsstandNewspaperGradientRight@2x~ipad.png
./NewsstandNewspaperGradientRight@2x~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./NewsstandNewspaperSwitcherGradientBottom@2x.png
./NewsstandNewspaperSwitcherGradientLeft.png
./NewsstandNewspaperSwitcherGradientLeft@2x.png
./NewsstandNewspaperSwitcherGradientRight.png
./NewsstandNewspaperSwitcherGradientRight@2x.png
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./NotificationAppIconMask@2x.png
./NotificationAppIconMask@3x.png
./SpotlightAppIconMask.png
./SpotlightAppIconMask@2x.png
./SpotlightAppIconMask@3x.png
./TableIconMask.png
./TableIconMask@2x.png
./TableIconMask@3x.png
./TableIconOutline.png
./TableIconOutline@2x.png
./TableIconOutline@3x.png

As you can see, there are a lot of different masks, but they are named pretty clearly. Here is the AppIconMask@3x~iphone.png image:

AppIconMask@3x~iphone.png

You can use that to test your icon to see if it will look okay after it is masked. But, don't round your corners. If you do, when Apple changes those masks again, you will have artifacts.

Mark Whitaker · Answer 9 · 2017-06-01T09:04:28.913

7

All the previous answers to this question are now out of date. Since at least May 2015, Apple requires you to provide square icons with no rounding:

Keep icon corners square. The system applies a mask that rounds icon corners automatically.

https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

edited Jun 01 '17 at 09:04

answered May 05 '15 at 07:48

Mark Whitaker

8,465
8
44
68

1

Link should be updated in this answer to: https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/ – Jeremy Wiebe Dec 30 '16 at 18:18

score 5 · Answer 10 · edited Jun 18 '13 at 08:20

5

If not considering stroke, the exact radius is actually 10px for 57x57 icon.

I get this info from iconreference.

edited Jun 18 '13 at 08:20

NANNAV

4,875
4
32
50

answered Dec 21 '10 at 09:49

Khomsan

543
5
5

1

I agree with this. Using a 9px radius doesn't quite look right if you're framing your app icon with an inside stroke to get an effect like the Settings app. 10px for a 57x57px icon and 20px for the @2x icon looks much better to me. – Alex Robinson Feb 14 '11 at 00:59

score 5 · Answer 11 · edited Jun 20 '20 at 09:12

5

Update (as of Jan. 2018) for App Icon requirements:

https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Keep icon corners square. The system applies a mask that rounds icon corners automatically.

Keep the background simple and avoid transparency. Make sure your icon is opaque, and don’t clutter the background. Give it a simple background so it doesn’t overpower other app icons nearby. You don’t need to fill the entire icon with content.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 08 '18 at 19:07

agirault

2,509
20
24

Yes, I created a square icon without rounded corners and with "Icon Set Create" (in App Store), all icons generated automatically. – J. Fdez Jul 11 '18 at 07:24

Andy Jazz · Answer 12 · 2022-06-08T13:05:37.077

5

WWDC 2022 brought good news!

Now, Xcode 14 automatically generates all the required app icon sizes based on a single input icon 1024x1024 pix (Single Size). However, if you need an old-school approach, choose All Sizes from dropdown menu.

So, all you have to know now is the radius of input icon which is 180 px.

edited Jun 08 '22 at 13:05

answered Jun 08 '22 at 13:00

Andy Jazz

49,178
17
136
220

score 4 · Answer 13 · answered Jan 20 '10 at 21:54

4

The iphone rounds corners for you, all you need is a square 57x57 png icon and u should be good

answered Jan 20 '10 at 21:54

Daniel

22,363
9
64
71

4

For official apps, this is true (well, sort of. 57x57 is certainly not the only size you need any more). But, for jailbreak apps, this rounding is NOT done for you. You need to do the rounding in the PNG graphics themselves. So, it very well might matter. – Nate May 13 '11 at 07:13

score 4 · Answer 14 · answered Sep 22 '11 at 16:50

When designing my app icons with Photoshop, I have found that no integer corner radius fits the device's mask exactly.

What I do now is create an empty project with Xcode, set a completely white PNG file as the icon, and turn off the preset bevel & gloss. Then, I run the app and take a screenshot of the home screen. Now, you can easily create a mask from that image, which you can use in Photoshop. This will get you perfectly rounded corners.

See @Agos answer, use the png-masks in the folder he mentions. — Gustav, Sep 11 '12 at 13:22

score 3 · Answer 15 · answered Apr 19 '13 at 08:17

There are two totally conflicting answers with large number of votes one is 160px@1024 the other is 180px@1024. So witch one?

I ran some experiments and I think that it is 180px@1024 so drbarnard is correct.

I downloaded iTunes U icon from the App Store it's 175x175px I upscaled it in photoshop to 1024px and put two shapes on it, one with 160px radius and one with 180px.

As you can see below the shape (thin gray line) with 160px (the 1st one) is a bit off whereas the one with 180px looks just fine.

shape with 160px radius enter image description here

This is what I do now in PhotoShop:

I create a canvas sized 1026x1026px with a 180px mask for main design Smart Object.
I duplicate the main Smart Object 5 times and resize them to 1024px, 144px, 114px, 72px and 57px.
I put a "New layered Based Slice" on each Smart Objects and I rename slices according to their size (e.g. icon-72px).
When I save the artwork I select "All User Slices" and BANG! I have all icons necessary for my app.

what if you resize the image but keep the thin gray line the same? answer: it will eventually match the grey line. so its not the border radius that is wrong, but the icon size for that border radius... — MoralCode, Feb 26 '16 at 22:36

score 2 · Answer 16 · answered Mar 25 '14 at 05:17

2

I tried 228px radius for 1024x1024 and it worked :)

answered Mar 25 '14 at 05:17

Ruby

752
2
8
23

score 1 · Answer 17 · edited Jul 24 '17 at 15:39

1

You don't need to apply corner radius to your app icon, you can just apply square icons. The device is automatically applying corner radius.

edited Jul 24 '17 at 15:39

Cameron

1,049
12
24

answered Jun 28 '17 at 11:46

Vinayak

329
1
3
10

I did it but app icons showing squarish within rounded cornered box on app store. See https://www.dropbox.com/s/yoeb2q7cy4rjggh/Skype_Picture_2021_05_13T05_59_20_238Z.jpeg?dl=0 – Arvind K. May 13 '21 at 06:01

iPhone App Icons - Exact Radius?

17 Answers17

Important: iOS 7 icon equation

Update (as of Jan. 2018) for App Icon requirements: