ios iPhone 应用程序图标 - 精确半径？

iPhone App Icons - Exact Radius?

提问by Frank Barson

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.

我正在尝试为我的 iPhone 应用程序创建图标，但不知道如何获得 iPhone 图标使用的确切半径。我搜索并搜索了教程或模板，但找不到。

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?

我敢肯定我只是个白痴，但是如何使用 Illustrator 或 Photoshop 中的图标使圆角完全正确？

Edit:

编辑：

What's the radius for the Retina iPad?

Retina iPad 的半径是多少？

回答by Bron Davies

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.

你可以为你的应用制作四个图标（截至今天），它们都可以有不同的外观 - 不一定基于 512x512 图像。

• 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)

• 512x512 图标的角半径 = 80(iTunesArtwork)
• 1024x1024图标的角半径 = 180(iTunesArtwork Retina)
• 57x57 图标的角半径 = 9（iPhone/iPod Touch）
• 114x114 图标的角半径 = 18(iPhone/iPod Touch Retina)
• 72x72 图标的角半径 = 11(iPad)
• 144x144 图标的角半径 = 23(iPad Retina)

If you do create a set of custom icons, you can set the UIPrerenderedIconoption 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.

如果您确实创建了一组自定义图标，则可以UIPrerenderedIcon在 info.plist 文件中将该选项设置为 true，它不会添加光泽效果，但会在其下方放置一个黑色背景，并仍然使用这些角半径围绕图像角因此，如果任何图标上的角半径较大，则边缘/角周围将显示黑色。

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

编辑：请参阅@devin-g-rhode 的评论，您可以看到任何未来的图标大小都应具有1:6.4角半径与图标大小的比率。https://stackoverflow.com/a/29550364/396005也有一个很好的答案，其中包含 SDK 中用于圆角图标角的图像蒙版文件的位置

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 [email protected] 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 [email protected] at 640x960.

要添加与视网膜兼容的文件，请使用相同的文件名并添加“@2x”。因此，如果我有一个名为 icon.png 的 72x72 图标文件，我还会向项目/目标添加一个名为 [email protected] 的 114x114 PNG 文件，Xcode 会自动将其用作视网膜显示器上的图标。如果您做得对，您可以在应用程序目标的“摘要”页面上看到此操作。这同样适用于您的启动图像。使用 320x480 的 launch.png 和 640x960 的 [email protected]。

回答by drbarnard

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 114gives 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.

在尝试了这篇文章中的一些答案后，我咨询了 Louie Mantia（前 Apple、Square 和 Iconfactory 设计师），到目前为止这篇文章中的所有答案都是错误的（或者至少是不完整的）。Apple 从 57px 图标开始，半径为 10，然后从那里放大或缩小。因此，您可以使用10/57 x new size（例如10/57 x 114给出 20，这是 114 像素图标的正确半径）计算任何图标大小的半径。这里列出了最常用的图标、正确的命名约定、像素尺寸和角半径。

1. Icon1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. [email protected] - 114px - 20
5. Icon-72.png - 72px - 12.632
6. [email protected] - 144px - 25.263
7. Icon-Small.png - 29px - 5.088
8. [email protected] - 58px - 10.175

1. Icon1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. 图标@2x.png - 114px - 20
5. Icon-72.png - 72px - 12.632
6. [email protected] - 144px - 25.263
7. Icon-Small.png - 29px - 5.088
8. 图标-小@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.

此外，如其他答案中所述，您实际上并不想裁剪您在二进制文件中使用的任何图像或提交给 Apple。这些都应该是方形的，没有任何透明度。Apple 将在适当的上下文中自动屏蔽每个图标。

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.

但是，了解上述内容对于在应用程序 UI 中使用图标很重要，您必须在代码中应用蒙版，或在 photoshop 中预渲染。在为网站和其他宣传材料创建艺术品时，它也很有帮助。

Additional reading:

补充阅读：

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

Neven Mrgan 关于其他图标大小和其他设计注意事项：ios 应用程序图标大小

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

Bjango的马克·爱德华兹在Photoshop创建roundrects及其重要性的不同选项：ROUNDRECT

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

Apple 关于图标大小和设计注意事项的官方文档：图标和图像

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.

我在 Photoshop CS6 中进行了一些测试，似乎小数点后 3 位的精度足以得到完全相同的向量（至少与 Photoshop 在 3200% 缩放时显示的一样）。圆角矩形工具有时会将输入四舍五入到最接近的整数，但您可以看到 90 和 89.825 之间的显着差异。并且有几次圆角矩形工具没有四舍五入，实际上在小数点后显示了多个数字。不确定那里发生了什么，但它肯定在使用和存储输入的更精确的数字。

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.

无论如何，我已经更新了上面的列表，只包含小数点后的 3 位数字（之前有 13 位！）。在大多数情况下，可能很难区分以 90px 半径遮罩的透明 512px 图标和以 89.825 遮罩的透明图标之间的区别，但圆角的抗锯齿效果肯定会略有不同，并且可能在某些情况下可见，尤其是如果 Apple 以代码或其他方式应用了第二个更精确的掩码。

回答by bitwit

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

我看到很多“px”讨论，但没有人谈论百分比，这是您要计算的固定数字。

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.

22.37%是这里的关键百分比。将上面提到的任何图像尺寸乘以 0.2237，您将获得该尺寸的正确像素半径。

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

在 iOS 8 之前，Apple 使用较少的舍入，使用 15.625%。

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

编辑：感谢@Chris Prince 评论 iOS 8/9/10 半径百分比：22.37%

回答by marzapower

Important: iOS 7 icon equation

重要提示：iOS 7 图标方程

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.

随着即将发布的 iOS 7，您会注意到“标准”图标半径已增加。因此，请尝试按照 Apple 和我在此答案中的建议进行操作。

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

对于 120 像素的图标，在 iOS 7 上最能代表其形状的公式似乎是以下超椭圆：

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

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

显然，您可以更改120具有所需图标大小的数字以获得相应的功能。

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)

您应该提供具有 90° 角的图像（避免裁剪图标的角很重要——iOS 在应用圆角蒙版时会为您执行此操作）（Apple 文档）

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.

最好的方法根本不是将图标的角四舍五入。如果您将图标设置为方形图标，iOS 将自动使用预定义的蒙版覆盖图标，该蒙版将设置适当的圆角。

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.

如果您手动为图标设置圆角，它们在这个或那个设备中可能看起来很糟糕，因为从 iOS 版本到另一个版本，圆角蒙版碰巧略有变化。有时您的图标会稍大一些，有时（叹气）稍小一些。使用方形图标将使您摆脱这种负担，并且您将确保您的应用程序始终保持最新且美观。

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.

这种方法适用于每个图标大小（iPhone/iPod/iPad/retina），也适用于 iTunes 图稿。我遵循了这种方法几次，如果您愿意，我可以向您发布一个指向使用原生方形图标的应用程序的链接。

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:

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:

1. Rounded corners
2. Drop shadow
3. Reflective shine (unless you prevent the shine effect)

1. Rounded corners
2. Drop shadow
3. 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?

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?

回答by Onur Y?ld?r?m

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

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

From this blog:

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.

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 needto apply corner radius to icons for iOS. Just provide square icons. But if you still want to know how, the actual shape is called Squircleand below is the formula:

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

回答by Agos

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:

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/).

(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.

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)

(credits for this finding goes to Neven Mrgan IIRC)

回答by willc2

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

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

回答by Bruno Bronosky

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.

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.frameworkbut don't trust that. Use the command to find it yourself.

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.frameworkbut 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)

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
./[email protected]
./[email protected]
./DefaultIcon-29.png
./[email protected]
./[email protected]
./DefaultIcon-40.png
./[email protected]
./[email protected]
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./[email protected]
./DocumentBadgeMask-20.png
./[email protected]
./[email protected]
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./[email protected]
./[email protected]
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./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
./[email protected]
./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
./[email protected]
./NewsstandNewspaperSwitcherGradientLeft.png
./[email protected]
./NewsstandNewspaperSwitcherGradientRight.png
./[email protected]
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./[email protected]
./[email protected]
./SpotlightAppIconMask.png
./[email protected]
./[email protected]
./TableIconMask.png
./[email protected]
./[email protected]
./TableIconOutline.png
./[email protected]
./[email protected]

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

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

You can use that to test your iconto 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.

You can use that to test your iconto 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.

回答by Mark Whitaker

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:

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.

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/

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

回答by Khomsan

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

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

I get this info from iconreference.

I get this info from iconreference.