Icon sizes for Android, iOS and web apps
Graphics designers can easily get lost with all the different sizes required for mobile/tablet apps. And who can blame them? The specifications are scattered all around the web and they occasionally change. In this article we attempted to collect various specs for icon sizes for Android apps, iOS apps, web apps, and put them down in plain pixel sizes. For future reference, the following collection was compiled in May 2014.
Resolution
Android's ecosystem is so wide, it has devised an approach on pixel density. Irrespectively of how many inches the device monitor is, pixel density is the crucial factor for Android. Based on this, Android has a "Low Dots Per Inch" version, a.k.a. LDPI, a Medium DPI (MDPI), a High DPI (HDPI), an eXtra High DPI (XHDPI), and so on until XXXHDPI. iOS is a lot simpler in this area. There is the "standard resolution" for legacy devices and the "high resolution" for the retina monitors.
Optical square
We picked up this term from the Android iconography guidelines. In most cases there is a maximum limit on the size an icon. The optical square is an inner part of the provisioned space you are supposed to use. In some cases your artistic creativity may think of a design that needs to partially escape the limits; that is how the space outside the optical square becomes useful.
Icon types
The following list includes many different types of icons. Android and iOS have different ways of referring to the same types of icons. We used a common ground in the "Icon type" column. The roles of each type are:
- Launch icon: These are the icons in your device's home screen. Users click them to open the app.
- Launch image: There are images used as comfortable way to have your users wait until the app is ready to launch. These types of resources are used only by iOS.
- Appstore icon: Icons used by app stores. These icons are seen by users before they download the app.
- Notification icon: These are icons on the status bar on the top of the device.
- Action bar icon: Icons for the area right under the status bar (second from the top). In Android, this area is called the action bar. In iOS there are two types of controls for the same purpose: Toolbars and Navigation bars.
- Small/contextual icon: As the name suggests these are small icons or icons in contextual menus. These types of icons are used only by Android.
- Tab bar icon: Icons for tab controls. These types of icons are used only by iOS.
- Settings icon: Icons for settings. These types of icons are used only by iOS.
- Spotlight icon: Icons for spotlight. These types of icons are used only by iOS.
Required icons
Android and iOS each have their own way of setting the standards for required icons. The symbol [R] denotes the icons declared as required in either platform. Android has a wide range of icons for you to add. Any one of them is enough. It is recommended to use several of them to ensure a nice result on various devices. But if you have to choose one, a good choice would probably be the XHDPI resolution. Before you are able to publish your app you will be required to prepare a large version for the Google Play app store and several screenshots. iOS is more explicit on which icons are required. Look for the [R] symbol down the list, also study the references. iTunes Connect will also require you to prepare a large icon for the iTunes app store as well as screenshots.
Integration
Android and iOS have their dedicated IDEs (Android Studio and Xcode respectively) to help you with the integation of the icons inside the app. If you want a practical example on how to integrate icons in a web app read our previously posted article "Hello World" web app for Android and iOS.
Icon sizes
| Size (pixels) | Platform | Icon type | Description |
| 12 x 12 |  |
Small/contextual icon | Android LDPI small/contextual icon - Optical square: 9 x 9 |
| 16 x 16 | |
Small/contextual icon | Android MDPI small/contextual icon - Optical square: 12 x 12 |
| 18 x 18 | |
Notification icon | Android LDPI notification icon - Optical square: 16 x 16 |
| 22 x 22 |  |
Action bar icon | Icon for toolbar or navigation bar (standard resolution) Size is the recommended optical square - No maximum is given |
| 24 x 24 | |
Action bar icon | Android LDPI action bar icon - Optical square: 18 x 18 |
| 24 x 24 | |
Small/contextual icon | Android HDPI small/contextual icon - Optical square: 18 x 18 |
| 24 x 24 | |
Notification icon | Android MDPI notification icon - Optical square: 22 x 22 |
| 29 x 29 | |
Settings icon | Settings icon for iPhone, iPod touch, iPad (standard resolution) |
| 32 x 32 | |
Action bar icon | Android MDPI action bar icon - Optical square: 24 x 24 |
| 32 x 32 | |
Small/contextual icon | Android XHDPI small/contextual icon - Optical square: 24 x 24 |
| 36 x 36 | |
Launch icon | Android LDPI launch icon |
| 36 x 36 | |
Notification icon | Android HDPI notification icon - Optical square: 33 x 33 |
| 40 x 40 | |
Spotlight icon | Spotlight search icon for iPhone, iPod touch, iPad (standard resolution) |
| 44 x 44 | |
Action bar icon | Icon for toolbar or navigation bar (high resolution) Size is the recommended optical square - No maximum is given |
| 48 x 32 | |
Tab bar icon | Tab bar icon (standard resolution) - Optical square: 25 x 25 |
| 48 x 48 | |
Launch icon | Android MDPI launch icon |
| 48 x 48 | |
Action bar icon | Android HDPI action bar icon - Optical square: 36 x 36 |
| 48 x 48 | |
Small/contextual icon | Android XXHDPI small/contextual icon - Optical square: 36 x 36 |
| 48 x 48 | |
Notification icon | Android XHDPI notification icon - Optical square: 44 x 44 |
| 58 x 58 | |
Settings icon | Settings icon for iPhone, iPod touch, iPad (high resolution) |
| 60 x 60 | |
Launch icon | App icon for iPhone and iPod touch (standard resolution) |
| 60 x 60 |  |
Launch icon | HTML launch icon for Apple iPhone Safari (standard resolution) |
| 64 x 64 | |
Action bar icon | Android XHDPI action bar icon - Optical square: 48 x 48 |
| 64 x 64 | |
Small/contextual icon | Android XXXHDPI small/contextual icon - Optical square: 48 x 48 |
| 72 x 72 | |
Launch icon | Android HDPI launch icon |
| 72 x 72 | |
Notification icon | Android XXHDPI notification icon - Optical square: 66 x 66 |
| 76 x 76 | |
Launch icon | App icon for iPad (standard resolution) [R] |
| 76 x 76 | |
Launch icon | HTML launch icon for Apple iPad Safari (standard resolution) |
| 80 x 80 | |
Spotlight icon | Spotlight search icon for iPhone, iPod touch, iPad (high resolution) |
| 96 x 64 | |
Tab bar icon | Tab bar icon (high resolution) - Optical square: 50 x 50 |
| 96 x 96 | |
Launch icon | Android XHDPI launch icon |
| 96 x 96 | |
Action bar icon | Android XXHDPI action bar icon - Optical square: 72 x 72 |
| 96 x 96 | |
Notification icon | Android XXXHDPI notification icon - Optical square: 88 x 88 |
| 120 x 120 | |
Launch icon | App icon for iPhone and iPod touch (high resolution) [R] |
| 120 x 120 | |
Launch icon | HTML launch icon for Apple iPhone Safari (high resolution) |
| 128 x 128 |  |
Launch icon | HTML launch icon for Google Chrome (low resolution) |
| 128 x 128 | |
Action bar icon | Android XXXHDPI action bar icon - Optical square: 96 x 96 |
| 144 x 144 | |
Launch icon | Android XXHDPI launch icon |
| 152 x 152 | |
Launch icon | App icon for iPad (high resolution) [R] |
| 152 x 152 | |
Launch icon | HTML launch icon for Apple iPad Safari (high resolution) |
| 192 x 192 | |
Launch icon | Android XXXHDPI launch icon |
| 196 x 196 | |
Launch icon | HTML launch icon for Google Chrome (high resolution) |
| 320 x 480 | |
Launch image | HTML startup image for Apple iPhone and iPod touch Safari |
| 320 x 480 | |
Launch image | Launch image for iPhone and iPod touch (standard resolution) |
| 512 x 512 | |
Appstore icon | Google Play Store icon [R] |
| 512 x 512 | |
Appstore icon | Apple iTunes Connect icon (standard resolution) |
| 640 x 960 | |
Launch image | Launch image for iPhone and iPod touch (high resolution) [R] |
| 640 x 1136 | |
Launch image | Launch image for iPhone 5 and iPod touch (5th generation) (high resolution) [R] |
| 768 x 1024 | |
Launch image | Launch image for iPad portrait (standard resolution) [R] |
| 1024 x 768 | |
Launch image | Launch image for iPad landscape (standard resolution) [R] |
| 1024 x 1024 | |
Appstore icon | Apple iTunes Connect icon [R] |
| 1536 x 2048 | |
Launch image | Launch image for iPad portrait (high resolution) [R] |
| 2048 x 1536 | |
Launch image | Launch image for iPad landscape (high resolution) [R] |
References:
Read the Iconography guidelines for Android for various different types of icons. You may also want to read our previously posted article Icon sizes for Android apps for a translation of Android's guidelines to actual pixel sizes.
iOS Human Interface Guidelines has a collection of articles on iconography artwork for iOS. The comprehensive reference version is Icon and Image Sizes, and you can find more details in App Icon, Launch Images and Bar Button Icons
Adding Chrome webpage icons to home screen - Notice: Chrome is the default browser in Android devices since Android v4.0 (API level 14).
You can find the artwork references for Safari at Safari Web Content Guide and Web Clip Icons of iOS Human Interface Guidelines