Dinosaurs with Laserz

There’s a lot of repetition in the iOS Human Interface Guidelines and it isn’t particularly pleasant to read. I’ve set out to remove the noise and assemble the information of value into this multipart series. This in no way supersedes Apple’s guidelines, think of it as an accompaniment.

Okay so what kind of heavy lifting have we got to do for our app’s icons?

At the very least our app needs a custom icon and launch image. We should also provide an icon for Spotlight search results, and a Settings icon if our app uses that.

The following table outlines custom icon and image sizes. There are a number of tools available that will output a single image into all the various sizes you’ll need. See the article on this blog Creating Icons for iOS.

24bit pngs are recommended for all images and icons, but don’t use transparency in the Application icons. See the Application icon’s section further below for more info.

Custom icon and image sizes

Description	Size for iPhone/ iPod touch (px)	Size for iPad (px)	Guidelines
Application icon required	57 x 57 114 x 114 (hi-res)	72 x 72	“Application Icons”
App Store icon required	512 x 512	512 x 512	“Application Icons”
Small icon for Spotlight search results and Settings (recommended)	29 x 29 58 x 58 (hi-res)	50 x 50 for Spotlight search results 29 x 29 for Settings	“Small Icons”
Document icon (recommended for custom document types)	22 x 29 44 x 58 (hi-res)	64 x 64 320 x 320	“Document Icons”
Web clip icon (recommended for web apps and websites)	57 x 57 114 x 114 (hi-res)	72 x 72	“Web Clip Icons”
Toolbar and navigation bar icon (optional)	20 x 20 approx 40 x 40 (hi-res) approx	20 x 20 approx	“Icons for Navigation Bars, Toolbars, and Tab Bars”
Tab bar icon (optional)	30 x 30 approx 60 x 60 (hi-res) approx	30 x 30 approx	“Icons for Navigation Bars, Toolbars, and Tab Bars”
Launch image required	320 x 480 640 x 960 (hi-res)	For portrait: 768 x 1004 For landscape: 1024 x 748	“Launch Images”

Application icons

The application icon is the one that appears on a user’s home screen and is tapped to start the app. If your app’s a game, it will also be used in Game Center.

When iOS displays your app icon it automatically adds the following effects:

• Rounded corners
• Drop shadow
• Reflective shine (unless you prevent the shine effect)

You can turn off the reflective shine effect. You need to add the UIPrerenderedIcon key to your application’s Info.plist file. See The Information Property List in iOS Application Programming Guide.

Small icons

iOS displays a small icon in Spotlight search results (seriously though have you ever used spotlight search on iOS?!). For iPhone and iPod touch, iOS uses the same icon for both Spotlight search results and Settings.

Despite the dimensions provided in the table above, iOS trims 1 pixel from each side of your artwork and adds a dropshadow. Factor this into your artwork.

Document icons

If your app creates documents of a custom type, you can provide a custom icon for them. If you don’t iOS will place your application icon on a default page icon:

Document icon specs for iPhone

See the table above for this icon’s dimensions. iOS adds a dropshadow around the outside.

Document icon specs for iPad

For both document icon sizes on iPad there is what’s called a ‘safe zone’. Apple intends for you to leave the area around the safe zone empty as padding, but you don’t have to. The upper right corner is partially obscured by the page curl effect that iOS adds.

For instance the 64×64 pixel safe zone is as follows:

And here’s the dimensions for the iPads larger document icon:

Web Clip icons

A web clip is basically an .ico file for iOS. Just in the same way an .ico file is used by a browser’s bookmarking system, a web clip is what gets added to your Home screen when you ask to bookmark a web page or app to your home screen. You’ll need to add a <link rel=”"> tag to your html, see Specifying a Webpage Icon for Web Clip in the Safari Web Content Guide.

iOS automatically adds the same effects to the web clip icon as it does to the application icon. You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (iOS2+).

Icons for Navigation Bars, Toolbars, and Tab Bars

Creating custom icons for use on iOS’s standard UI elements:

• Use pure white with appropriate alpha transparency
• Do not include a drop shadow
• Use anti-aliasing
• If you add a bevel, it should be 90° (light source positioned at top)

See table above for dimensions. These icons are used by iOS as masks, colour will note reproduce.

Launch images

iOS displays the launch image instantly from once the user starts your app until it’s fully ready to use. The name of the screen shown once the launch screen is removed is called the first screen. The guidelines stress that it shouldn’t be designed as a splash screen, about window or branding element. It reasons that you want to mask as best possible the fact that an interim screen is being shown while you’re app starts up. It goes on to say:

Generally, design a launch image that is identical to the first screen of the application.

The exceptions are don’t include parts of your first screen in the launch screen that are dynamic, so it doesn’t appear parts of your interface inexplicably change. See below for an example of what a launch image should look like (left).

The guidelines state that it’s not an opportunity for artistic expression, lol.

The final section in this part offers advice on creating artwork for the retina display, but is nothing you’d already know if you’ve created icons before. See that content in the guidelines if you’d like to learn more.

And that’s the end of the guidelines – hooray! Someone get me a drink.