IOS 之界面开发设计的一些资料

拼搏现实的明天。 2022-09-20 05:55 141阅读 0赞

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html\#//apple\_ref/doc/uid/TP40006556-CH27-SW1 原文地址

Every app needs an app icon and a launch file or image. In addition, some apps need custom icons to represent app-specific content, functions, or modes in navigation bars, toolbars, and tab bars.

Unlike other custom artwork in your app, the icons and images listed in Table 41-1 must meet specific criteria so that iOS can display them properly. In addition, some icon and image files have naming requirements (to learn about naming these files, see [App Icons][] and [App Launch (Default) Images][App Launch _Default_ Images]).

<table style="border:1px solid rgb(233,233,233); font-size:12px; margin:20px 0px 36px; outline:0px; padding:0px; vertical-align:baseline; border-collapse:collapse; border-spacing:0px; empty-cells:hide; width:683px; background:transparent"> 
 Table 41-1Size (in pixels) of custom icons and images 
 <thead style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <tr style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <th style="border-width:0px 0px 0px 1px; border-left-style:solid; border-left-color:rgb(233,233,233); margin:0px; outline:0px; padding:5px 10px; vertical-align:baseline; font-weight:400; background:rgb(249,249,249)"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> Asset </th> 
 <th style="border-width:0px 0px 0px 1px; border-left-style:solid; border-left-color:rgb(233,233,233); margin:0px; outline:0px; padding:5px 10px; vertical-align:baseline; font-weight:400; background:rgb(249,249,249)"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> iPhone 6 Plus (@3x) </th> 
 <th style="border-width:0px 0px 0px 1px; border-left-style:solid; border-left-color:rgb(233,233,233); margin:0px; outline:0px; padding:5px 10px; vertical-align:baseline; font-weight:400; background:rgb(249,249,249)"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> iPhone 6 and iPhone 5 (@2x) </th> 
 <th style="border-width:0px 0px 0px 1px; border-left-style:solid; border-left-color:rgb(233,233,233); margin:0px; outline:0px; padding:5px 10px; vertical-align:baseline; font-weight:400; background:rgb(249,249,249)"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> iPhone 4s (@2x) </th> 
 <th style="border-width:0px 0px 0px 1px; border-left-style:solid; border-left-color:rgb(233,233,233); margin:0px; outline:0px; padding:5px 10px; vertical-align:baseline; font-weight:400; background:rgb(249,249,249)"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> iPad and iPad mini (@2x) </th> 
 <th style="border-width:0px 0px 0px 1px; border-left-style:solid; border-left-color:rgb(233,233,233); margin:0px; outline:0px; padding:5px 10px; vertical-align:baseline; font-weight:400; background:rgb(249,249,249)"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> iPad 2 and iPad mini (@1x) </th> 
 </tr> 
 </thead> 
 <tbody style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <tr style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> App icon (required&nbsp;for all apps) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 180 x 180 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 120 x 120 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 120 x 120 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 152 x 152 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 76 x 76 </td> 
 </tr> 
 <tr style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> App icon for the App Store (required&nbsp;for all apps) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 1024 x 1024 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 1024 x 1024 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 1024 x 1024 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 1024 x 1024 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 1024 x 1024 </td> 
 </tr> 
 <tr style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> Launch file or image (required&nbsp;for all apps) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> Use a launch file (see<a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html#//apple_ref/doc/uid/TP40006556-CH22-SW1" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,136,204); text-decoration:none; background:transparent" rel="nofollow">Launch Images</a>) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> For iPhone 6, use a launch file (see&nbsp;<a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html#//apple_ref/doc/uid/TP40006556-CH22-SW1" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,136,204); text-decoration:none; background:transparent" rel="nofollow">Launch Images</a>) <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> For iPhone 5, 640 x 1136 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 640 x 960 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 1536 x 2048 (portrait) <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 2048 x 1536 (landscape) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 768 x 1024 (portrait) <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 1024 x 768 (landscape) </td> 
 </tr> 
 <tr style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> Spotlight search results icon (recommended) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 120 x 120 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 80 x 80 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 80 x 80 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 80 x 80 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 40 x 40 </td> 
 </tr> 
 <tr style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> Settings icon (recommended) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 87 x 87 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 58 x 58 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 58 x 58 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 58 x 58 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 29 x 29 </td> 
 </tr> 
 <tr style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> Toolbar and navigation bar icon (optional) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> About 66 x 66 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> About 44 x 44 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> About 44 x 44 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> About 44 x 44 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> About 22 x 22 </td> 
 </tr> 
 <tr style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> Tab bar icon (optional) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> About 75 x 75 (maximum: 144 x 96) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> About 50 x 50 (maximum: 96 x 64) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> About 50 x 50 (maximum: 96 x 64) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> About 50 x 50 (maximum: 96 x 64) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> About 25 x 25 (maximum: 48 x 32) </td> 
 </tr> 
 <tr style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> Default Newsstand cover icon for the App Store (required&nbsp;for Newsstand apps) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> At least 1024 pixels on the longest edge </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> At least 1024 pixels on the longest edge </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> At least 1024 pixels on the longest edge </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> At least 1024 pixels on the longest edge </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> At least 512 pixels on the longest edge </td> 
 </tr> 
 <tr style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; background:transparent"> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> Web clip icon (recommended for web apps and websites) </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 180 x 180 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 120 x 120 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 120 x 120 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 152 x 152 </td> 
 <td style="border:1px solid rgb(233,233,233); margin:0px; outline:0px; padding:5px 25px 5px 10px; vertical-align:middle; max-width:260px; background:transparent"> <p style="border:0px; font-size:1.4em; margin-top:0px; margin-bottom:0px; outline:0px; padding-top:0px; padding-bottom:0px; vertical-align:baseline; color:rgb(65,65,65); line-height:20.2999992370605px; word-break:break-word; min-width:50px; background:transparent"> 76 x 76 </td> 
 </tr> 
 </tbody> 
</table>

For all images and icons, the PNG format is recommended. You should avoid using interlaced PNGs.

The standard bit depth for icons and images is 24 bits—that is, 8 bits each for red, green, and blue—plus an 8-bit alpha channel, for a total of 32 bits.

You don’t need to constrain your palette to web-safe colors.

[App Icons]: https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/ExpectedAppBehaviors/ExpectedAppBehaviors.html#//apple_ref/doc/uid/TP40007072-CH3-SW1
[App Launch _Default_ Images]: https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/ExpectedAppBehaviors/ExpectedAppBehaviors.html#//apple_ref/doc/uid/TP40007072-CH3-SW3