• iPhone and iPad Icon Development

    Posted on April 29, 2012 by in Development, Home Impressions


    Icons and splash screens for the iPhone developed at 48HoursLogo.com (http://www.48hourslogo.com/project.php?id=10896).

    Producing product art in the 21st Century has been revolutionized by sites like 48HoursLogo.com.  After the competing designers have produced an extraordinary range of creative variations, the client must select a winner — often, there’s a strong sense that it would be nice to be able to use three or four of the logo designs!  But, sadly, branding works best if only a single idea is selected.

    The final step in the icon development process is the conversion of the finished artwork into the forms used on the iPhone and iPad.  Although Apple’s developer documentation is very complete, it is sometimes too verbose for the immediate need.  In 2010, Weston Digital Solutions posted a terrific blog post, Icons and launch images for iPhone and iPad apps, that provided exactly the right level of detail.  But, with lesson’s learned and the release of the iPad2, we now have an even simpler form:

    App Icon for the App Store (Required):
    iTunesArtwork@2x.png 1024 x 1024 (corner diameter 359)

    Application Icons (Required):
    Icon@2x.png 114 x 114 (corner radius 20)
    Icon.png 57 x 57 (corner radius 10)
    Icon~ipad@2x.png 144 x 144 (corner radius 25.263)
    Icon~ipad.png 72 x 72 (corner radius 12.683)

    Small Icon for Settings and Spotlight Search Results (Recommended):
    Icon-settings@2x.png 58 x 58 (corner radius 10.175)
    Icon-settings.png 29 x 29 (corner radius 5.088)
    Icon-spot~ipad@2x.png 100 x 100
    Icon-spot~ipad.png 50 x 50

    Document Icons (Optional):
    Icon-doc~ipad320.png 320 x 320 (220 x 220 at 50, 42 for safe zone top:5px left:50px right:50px bottom:20px)
    Icon-doc~ipad64.png 64 x 64 (44 x 44 at 10, 8 for safe zone top:1px left:10px right:10px bottom:4px)
    Icon-doc@2x.png 44 x 58
    Icon-doc.png 22 x 29

    iTunes Splash Screens (high-res only):
    iTunes~iPad-Page1.png 1536 x 2048
    iTunes~iPad-Page1.png 1536 x 2008 (no Status Bar)
    iTunes-iPhone-Page1.png 640 x 960
    iTunes-iPhone5-Portrait: 640 x 1136
    iTunes-iPhone5-Portrait: 640 x 1096 (no Status Bar)
    iTunes-iPhone5-Landscape: 1136 x 640
    iTunes-iPhone5-Landscape: 1136 x 600 (no Status Bar)

    Launch Image* (Required):
    Default-568h@2x.png 640 x 1136 Retina (4-inch)
    Default@2x.png 640 x 960 Retina (3.5-inch)
    Default.png 320 x 480
    Default-Portrait@2x~ipad.png 1536 x 2008
    Default-Portrait~ipad.png 768 x 1004
    Default-Landscape@2x~ipad.png 2048 x 1496
    Default-Landscape~ipad.png 1024 x 748

    * iOS Human Interface Guidelines recommend that the default screen correspond to the initial state of the app UI. However, many developers implement this image as an artistic (rather than utilitarian) startup screen.
    ** Corner radius http://stackoverflow.com/questions/2105289/iphone-app-icons-exact-radius

Comments are closed.