Site Blog
Common iPhone Application Icon Dimensions
All the main iPhone app icon dimensions in one handy place.
iPhone apps - common icon dimensions
When I first started producing icons and graphic elements for iPhone or iPod apps I couldn't seem to find a single place that listed all of the required icon sizes used throughout the standard GUI elements such as iPhone tab-bar icons and menu icons.
I hope you find the following list of sizes helpful:
Application icon: 57 x 57 pixels
This is the icon size we are most familiar with and is used to launch the app.
iTunes app icon: 512 x 512 pixels
This is the large icon size used in the iTunes app store.
Spotlight search results icon: 29 x 29 Pixels
This is used in the results from a spotlight search. If no specific icon is created for this purpose, the main app icon is automatically scaled down to this smaller icon size which can give mixed results, so it is worth doing this properly and providing an individual file.
These three icon should be as close to identical as possible, to maintain the brand you are trying to create.
Tips:
- Apple automatically adds the rounded corners to your iTunes and iPhone app icons so you don't need to worry about that.
- Apple automatically adds the 'gloss' to the iTunes icon but you can prevent the gloss being added to the iPhone app icon by specifying 'UIPrerenderedIcon' in your applications 'info.plist'. However you will need to make sure that the icon you submit still looks okay with the standard gloss applied in the iTunes store. If you have applied your own gloss or finish to the app icon you will need to add a 'glossless' version to the iTunes store icon.
- The 512 x 512 pixel iTunes icon needs to be submitted as a JPG, whilst the 57 x 57 pixel iPhone app icon should be a transparent PNG.
Common GUI icon sizes
Menu icons: 30 x 30 pixels
These are the icons, monochrome by default, used in some of the menus as seen below.
Tab-bar icons: 30 x 30 Pixels
These are the monochrome icons used in the black tab-bar at the bottom of iPhone applications.
Tips:
- You only need to submit a single icon for each tab in the tab-bar icons and Apple automatically applies the 'selected' affect (blue highlight and contrasting background).
- Use a transparent PNG file for both of the above icon types but do consider that the tab-icon will have an effect applied and what it might look like, so it is best to make the design as simple as possible.
- The tab-bar icon works on the transparency within the image so it doesn't matter what colour the 'solid' are of the design is, only the transparency is affected by the various states.
Comments
- Nobody has commented on this article yet - why not be the first?
Articles
Modern day cave paintings
Ability of icons to transcend cultural boundaries and access our primeval understanding.
An opportunity to rethink your product and brand
A chance to refresh your product and brand through rethinking your icon design
How Web 2.0 has affected icon design
Learn about some of the changes Web 2.0, with its sharing and social networking, has provoked in the icon-design world.
The multi-faceted uses of great icon design
It's never been as important as it is nowadays to give real thought to icon design. This post talks about the way such design can affect our perception of programs and products.
Ensuring that your icons package is a winner on all fronts
We live in an appearance-conscious world. You need to take account of this when designing icons packages.