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

User · Answer

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)

User · Answer

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

User · Answer

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  amp  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

User · Answer

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

User · Answer

Important  iOS 7 icon equation With the upcoming release of iOS 7 you will notice that the  quot standard quot  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

User · Answer

I tried 228px radius for 1024x1024 and it worked

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

If not considering stroke  the exact radius is actually 10px for 57x57 icon   I get this info from iconreference

[iphone] iPhone App Icons - Exact Radius?

Examples related to iphone

Examples related to ios

Examples related to ipad

Examples related to icons