iOS Icon Design: All Icon Sizes
Different Icons
We’ve already gone over the icon sizes of the home screen icon for iPhone and iPod and even taught you how to create one. It turns out, however, that iOS has a lot more optional icons than just the home screen icon.
In fact you can provide icons for the settings panel, if you offer a settings pane, a spotlight icon (for the search results) as well as a document icon and of course the huge icon for iTunes.
iOS Icon Sizes
| Icon | Size | Radii | Devices |
|---|---|---|---|
| Homescreen | 57 x 57 pixels | 9 pixels | iPod iPhone iPhone 3G iPhone 3GS |
| Homescreen High Res | 114 x 114 pixels | 18 pixels | iPod (retina) iPhone 4 iPhone 4S |
| Homescreen iPad | 72 x 72 pixels | 11 pixels | iPad iPad 2 |
| iTunes | 512 x 512 pixels | none | All |
| Settings & Spotlight | 29 x 29 pixels | 5 pixels | iPod iPhone iPhone 3G iPhone 3GS iPad* iPad 2* |
| Settings & Spotlight High Res | 58 x 58 pixels | 10 pixels | iPod (retina) iPhone 4 iPhone 4S |
| Spotlight (iPad) | 50 x 50 pixels | 5 pixels | iPad iPad 2 |
| Document Icon | 22 x 29 pixels | none | iPod iPhone iPhone 3G iPhone 3GS |
| Document Icon High Res | 44 x 58 pixels | none | iPod (retina) iPhone 4 iPhone 4S |
| Document Icon iPad | 64 x 64 pixels | none | iPad iPad 2 |
iPod, iPhone, iPhone 3G & iPhone 3GS – Home Screen
57 x 57 pixels
Corner Radius: 9 pixels
This is the home screen icon for your application on the older devices. Despite the devices being older it is still wise to support these devices as iOS4 and iOS5, the two operating system you’re likely to support, still runs on iPhone 3GS and iPhone 3G runs iOS4.
iPod, iPhone 4 & iPhone 4S (retina) – Home Screen
114 x 114 pixels
Corner Radius: 18 pixels
This is the home screen icon displayed for your application on newer, retina enabled, devices including the new generation iPod Touch, iPhone 4 and iPhone 4S. The retina displays requires icons to be exactly twice as large as the icons for older devices as the pixel density is much greater.
iPad & iPad 2 – Home Screen
72 x 72 pixels
Corner Radius: 11 pixels
This is the home screen icon to be displayed for iPad applications. It is also worth mentioning that even if your application is not optimised for the iPad, still include an icon of this size as iPhone applications are able to run on iPads. Note: The iPad doesn’t currently support the retina display however this is much rumoured for the next iPad so take this into account when designing. If rumours are correct the next iPad screen will support icons 144 x 144 pixels.
iTunes
512 x 512 pixels
Corner Radius: none
This icon is used on the iTunes app store as well as the app section of iTunes. It is also the icon supplied to third party websites such as those that offer reviews of applications. 512 is the required size of the icon however iTunes scale this down in their store. Note: Apple recommend not adding or accommodating for corner radii as the icon is supplied to third parties without it.
iPod, iPhone, iPhone 3G, iPhone 3GS, iPad* & iPad 2* – Settings Pane & Spotlight Icon
29 x 29 pixels
Corner Radius: 5 pixels (unverified)
This icon is used as the icon for the settings pane in your iOS section if you use this, it is also used as the icon for your application when a user is shown results featuring your application. If you do not supply an icon iOS shrinks your application icon down which could cause distortion.
* Spotlight Icon excluded on iPad – separate icon should be defined
iPad & iPad 2 – Spotlight Icon
50 x 50 pixels
Corner Radius: 5 pixels (unverified)
This icon is used as your application icon when featured in spotlight search results. The Apple documentation does state that iOS will strip 1 pixel from each side resulting in a 48 x 48 pixel icon after rendering, take this into account when designing.
iPhone 4 & iPhone 4S – Settings Pane & Spotlight Icon
58 x 58 pixels
Corner Radius: 10 pixels (unverified)
This icon is used in the same way as the above settings and spotlight icon for iPhone and iPod but needs to be formatted for the larger displayed. If you fail to provide this icon your main icon will be shrunk down to fit.
iPod, iPhone, iPhone 3G & iPhone 3GS – Document Icon
22 x 29 pixels
If your application is able to open documents of s specific filetype you can specify an icon to be displayed before opening the document in your icon. A classic example its usage is in the Dropbox application, since iOS4 you have been able to open up a typically unsupported document in dropbox.
iPod, iPhone 4 & iPhone 4S – Document Icon
44 x 58 pixels
This is the same usage as above but a higher resolution for iOS devices supporting retina displays.
iPad & iPad 2 – Document Icon
64 x 64 pixels
A slightly different method for designing your document icon is employed for the iPad. I don’t want to go into detail on this so visit the user interface guidelines outlined by Apple here.
Phew…
Well as you can see your icon design isn’t as straight forward as you first thought. It involves a lot of work if you want your application to look perfect on every device and every function.
It’s worth mentioning that although there are a lot of iOS icons in different sizes and formats only 2 are required. You need an application icon as well as an iTunes icon, if you can leave out the rest and iOS will work some magic.
If you have any insight or resources you would care to share please post them in the comments.