Description

Make iPhone Icons
This article provides information on the following topics:
Required Product
See Also
In this topic, we'll learn how to create
icons for iPhone and iPod Touch applications. The topic is based on the Apple article
Introduction
The Apple iPhone device (as well as the iPod Touch device) defines new standards in personal application development. The device has a multi-touch interface that brings the user experience to a new level of ergonomics. In this environment, icons have an important role to play to guide the user intuitively.
In addition, some applications need custom icons to represent custom document types or application-specific functions and modes in navigation bars, toolbars, and tab bars. These icons must meet specific criteria so that the iPhone OS can display them properly.
iPhone Icons Criteria
The following table contains a summary of information about these icons and images and provides links to specific guidelines for creating them:
Size in pixels
Guidelines
Application icon (required)
App Store icon (required)
Launch image (required)
Small icon for Spotlight search results and Settings (recommended)
58 x 58 (high resolution)
Document icon (recommended for custom document types)
44 x 58 (high resolution)
Web Clip icon (recommended for web applications and websites)
57 x 57
Toolbar and navigation bar icon (optional)
Tab bar icon (optional)
No larger than 96 x 64 (high resolution)
Important
Top of Page
Application Icons
For iPhone and iPod touch two sizes are required:
57 x 57 pixels
When iOS displays your application icon on the Home screen of a device, it automatically adds the following visual effects:
Rounded corners
Drop shadow
Reflective shine (unless you prevent the shine effect)
For example, a simple 57 x 57 pixel iPhone application icon might look like this:
Note
Ensure your icon is eligible for the visual enhancements iOS provides. You should produce an image that:
Give your application icon a discernible background. Icons with visible backgrounds look best on the Home screen primarily because of the rounded corners iOS adds. This is because uniformly rounded corners ensure that all the icons on a user's Home screen have a consistent appearance that invites tapping. If you create an icon with a background that disappears when it's viewed on the Home screen, users don't see the rounded corners. Such icons often don't look tappable and tend to interfere with the orderly symmetry of the Home screen that users appreciate.
An icon that appears to float on a visible black background looks especially unattractive on a Home screen that displays a custom picture.
To create an application icon in Axialis IconWorkshop, follow the procedure below:
Top of Page
Application Icons for the App Store
To create an application icon for the App Store in Axialis IconWorkshop, follow the procedure below:
Top of Page
Launch Images
Supply a launch image to improve user experience; avoid using it as an opportunity to provide:
An About window
Because users are likely to switch among applications frequently, you should make every effort to cut launch time to a minimum, and you should design a launch image that downplays the experience rather than drawing attention to it.
Design a launch image that is identical to the first screen of the application, except for:
Text. The launch image is static, so any text you display in it will not be localized.
For iPhone and iPod touch, create launch images that include the status bar region in the following sizes:
The Settings launch image displays only the background of the application, because no other content in the application is guaranteed to be static:
In the launch image for Stocks, only static images are included because these are always visible in the front view of the Stocks application:
Top of Page
Small Icons
Every application should supply a small icon that iOS can display when the application name matches a term in a Spotlight search. Applications that supply settings should also supply this icon to identify them in the built-in Settings application. This icon should clearly identify your application so that people can recognize it in a list of search results or in Settings.
For iPhone and iPod touch, iOS uses the same icon for both Spotlight search results and Settings. If you do not provide this icon, iOS might shrink your application icon for display in search results and in Settings. Create icons that measure:
58 x 58 pixels (high resolution for latest generations of device with Retina displays)
To create small icons for your iPhone application in Axialis IconWorkshop, follow the procedure below:
Top of Page
Document Icons
Optionally, you can provide custom artwork for iOS to use instead of your application icon. To do this:
Place your custom artwork within each rectangular space as desired: The artwork can be centered, offset, or it can fill the entire space. Keep in mind that iOS applies a gradient that transitions from transparent (at the top edge) to black (at the bottom edge).
Similarly, if you supply a 44 x 58 pixel icon that looks like the image on the left, iOS creates a document icon that looks like the image on the right:
Top of Page
Web Clip Icons
If you have a web application or a website, you can provide a custom icon that users can display on their Home screens using the Web Clip feature. Users tap the icon to reach your web content in one easy step. You can create an icon that represents your website as a whole or an icon that represents a single webpage.
For iPhone and iPod touch create icons that measure:
57 x 57 pixels
Note
As it does with application icons, iOS automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds:
Rounded corners
Drop shadow
Reflective shine
For example, a simple 57 x 57 pixel webpage icon might look like this:
Note
Ensure your icon is eligible for the visual enhancements iOS adds (if you want them). You should produce an image in PNG format that:
Does not have any shine or gloss
To create an Web Clip icon in Axialis IconWorkshop, follow the procedure below:
Top of Page
Icons for Navigation Bars, Toolbars, and Tab Bars
As much as possible, you should use the system-provided buttons and icons to represent standard tasks in your application. For a complete list of standard buttons and icons, and guidelines on how to use them, see System-Provided Buttons and Icons (Apple website).
Of course, not every task your application performs is a standard one. If your application supports custom tasks users need to perform frequently, you need to create custom icons that represent these tasks in your toolbar or navigation bar. Similarly, if your application displays a tab bar that allows users to switch among custom application modes or custom subsets of data, you need to design tab bar icons that represent these modes or subsets.
Before you create the art for your icon, you need to spend some time thinking about what it should convey. As you consider designs, aim for an icon that is:
Simple and streamlined. Too many details can make an icon appear sloppy or indecipherable.
Not easily mistaken for one of the system-provided icons. Users should be able to distinguish your custom icon from the standard icons at a glance.
Readily understood and widely acceptable. Strive to create a symbol that most users will interpret correctly and that no users will find offensive.
Important
Use pure white with appropriate alpha.
Do not include a drop shadow.
Use anti-aliasing.
For toolbar and navigation bar icons, create an icon in the following sizes:
For tab bar icons, create an icon in the following sizes:
No larger than 96 x 64 pixels (high resolution)
These sizes represent the maximum dimensions a tab bar icon can have. If you provide a larger icon, iOS will center it and clip the excess.
Note
The icon you provide for toolbars, navigation bars, and tab bars is used as a mask to create the icon you see in your application. It is not necessary to create a full-color icon.
Give all icons in a bar a similar visual weight. Aim to balance the overall size, level of detail, and use of solid regions across all icons that can appear in a specific bar. In general, it does not look good to combine in the same bar icons that are large, blocky, and completely filled with icons that are small, detailed, and unfilled.
To create these icons in Axialis IconWorkshop, follow the procedure below:
Related Topics
make cursors
Send us feedback about the site.
Microsoft, Windows, Windows XP, Windows Vista are registered trademarks of Microsoft Corporation
Adobe, Flash, Photoshop, Illustrator are registered trademarks of Adobe System Incorporated
Apple, AppStore, Ipod, iPhone, iPad are registered trademarks of Apple Inc