Icon sizes you need to support iOS 12 and Android Oreo devices.

With the explosion of mobile devices, it keeps getting more difficult to keep track of the myriad icon sizes required for mobile apps.  This post simply lists the required sizes and uses for iOS and Android devices (as of now).

When creating an application icon, it is best to start with an image that is (at least) the size of the largest icon necessary, which is currently 1024 x 1024, and then reduce that image to the necessary sizes, reducing level of detail as/if necessary for smaller icons.

iOS App Icons

As of Xcode 10 (iOS 12), Apple iOS devices have application icons for the app on three different device types (iPhone, iPad, and iPad Pro), the store, spotlight (search), settings, and notifications, and these icons may need to be provided in single (unadorned), double (“@2x”), or triple (“@3x”) scale factors.

For a “universal” app, you need to provide icons in 13 resolutions (for 15/18/19 different uses, depending on how you count).  iPhone only apps need 8 resolutions; iPad only apps need 9 resolutions.

Here is a list of the iOS icon sizes, along with a color-coded list of the uses:

• 1024 x 1024
  • App Store – all applications  (<title>.png)
• 180 x 180
  • iPhone application @3x  (<title>_iphone@3x.png)
• 167 x 167
  • iPad Pro application @2x  (<title>_pro@2x.png)
• 152 x 152
  • iPad application @2x  (<title>_ipad@2x.png)
• 120 x 120
  • iPhone application @2x  (<title>_iphone@2x.png)
  • iPhone spotlight @3x  (<title>_search@3x.png)
• 87 x 87
  • iPhone settings @3x  (<title>_settings@3x.png)
• 80 x 80
  • iPhone spotlight @2x  (<title>_search@2x.png)
  • iPad spotlight @2x  (<title>_search@2x.png)
• 76 x 76
  • iPad application  (<title>_ipad.png)
• 60 x 60
  • iPhone notification @3x  (<title>_notify@3x.png)
• 58 x 58
  • iPhone settings @2x  (<title>_settings@2x.png)
  • iPad settings @2x  (<title>_settings@2x.png)
• 40×40
  • iPad spotlight  (<title>_search.png)
  • iPhone notification @2x  (<title>_notify@2x.png)
  • iPad notification @2x  (<title>_notify@2x.png)
• 29 x 29
  • iPad settings  (<title>_settings.png)
• 20 x 20
  • iPad notification  (<title>_notify.png)

Android App Icons

Android icon requirements had remained fairly consistent, but as of Android 8.0 (Oreo, API 26), those application icons are now classified as “legacy”, though still required for support on earlier devices (i.e., 85.4% of the market); the latest devices can use “adaptive” icons.  All applications should have a store icon.

For most Android apps, you should provide application icons in 6-8 resolutions (none of which overlap with the iOS resolutions).

Store Icon

Android apps, if they are to be published, require a store icon:

• 512 x 512 – Google Play

Legacy Icons

To support devices running Android 7.1 (Nougat, API 25) and earlier, which you absolutely should, provide legacy icons in resolutions supporting 5 (or 6) different screen densities:

• 192 x 192 – xxxhdpi
• 144 x 144 – xxhdpi
• 96 x 96 – xhdpi
• 72 x 72 – hdpi
• 48 x 48 – mdpi
• 36 x 36 – ldpi (optional)

Note that some legacy icons can (technically) be omitted, but those sizes will be generated by the Android system from other sizes, and not necessarily the best resolution (i.e., a larger icon may be generated from a lower resolution icon, which looks poor).  Therefore, only the low density (ldpi) icon is considered optional; no modern devices are low density, and if one was it would necessarily generate the icon from a larger source.

Adaptive Icons

Adaptive icons were introduced in Android Oreo to allow the system to perform visual effects with the shape and/or contents of an application icon.  In order for this to be supported, adaptive icons need to be separated into foreground and background layers; the foreground contains the important content of the icon, toward the center, and the background is an image or color that may provide branding but could be clipped.

These are the components:

• foreground – 108 x 108 image with transparency, icon content in center 72 x 72
• background – color or 108 x 108 image to be composited with foreground

The foreground and background may be moved or sized independently before being composited together, and the resulting image will likely be cropped into an arbitrary shape; Android reserves an 18 pixel border for these kind of visual effects.

For more information, see this page about supporting adaptive icons.

Conclusion

For a mobile app to support all recent iOS and Android phones and tablets, you will need to create about 20 icons, in the resolutions above, including separate foreground and background layers for adaptive icon support.  If possible, start by creating an App Store icon (1024 x 1024) from a separate foreground and background.  Use that as a source icon to generate the smaller Google Play, iOS, and Android legacy icons, adjusting detail as necessary.  Finally, resize the foreground and background layers appropriately to generate the components for the adaptive icons.  (Then, take a deep breath.)

Now you are ready to implement your application. 😉  Of course, if you want to support Android TV, Apple TV, Android Wear, Apple Watch, Android Auto, and/or Apple CarPlay…