iOS 图标尺寸及用途

圆角半径

iTunes Artwork icon ───────────────────────── 512px (90px)

App icon(iPhone4) ────────────────────────── 114px (20px)

App icon(iPad) ───────────────────────────── 72px (12px)

App icon(iPhone 3G/3GS) ───────────────────── 57px(10px)

Spotlight/Settings icon icon(iPhone4) ───────────── 58px (10px)

Spotlight/Settings icon icon(iPhone 3G/3GS/iPad) ──── 29px (9px)

=====================================================================

 

Designing an app for iPhone, iPad or iPhone4? Here's a couple of things to keep in mind:

iPhone & iPod Touch (1st, 2nd & 3rd Generation)

<span style="background-color: rgb(255, 255, 255);"><span class="pun">•</span><span class="pln">   </span><span class="typ">Portrait</span><span class="pun">:</span><span class="pln"> </span><span class="lit">320</span><span class="pln"> x </span><span class="lit">480</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">320</span><span class="pln"> x </span><span class="lit">480</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Landscape</span><span class="pun">:</span><span class="pln"> </span><span class="lit">480</span><span class="pln"> x </span><span class="lit">320</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">480</span><span class="pln"> x </span><span class="lit">320</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Status</span><span class="pln"> </span><span class="typ">Bar</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">20point</span><span class="pln">

</span><span class="pun">•</span><span class="pln">   DPI</span><span class="pun">:</span><span class="pln"> </span><span class="lit">163dpi</span><span class="pln">

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Color</span><span class="pln"> </span><span class="typ">Mode</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8bit</span><span class="pln"> RGB

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Color</span><span class="pln"> </span><span class="typ">Temperature</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Warm</span><span class="pln">


</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Application</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">57</span><span class="pln"> x </span><span class="lit">57</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">57</span><span class="pln"> x </span><span class="lit">57</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Appstore</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">512</span><span class="pln"> x </span><span class="lit">512</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">512</span><span class="pln"> x </span><span class="lit">512</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Spotlight</span><span class="pln"> search icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">29</span><span class="pln"> x </span><span class="lit">29px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">29</span><span class="pln"> x </span><span class="lit">29</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Document</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">22</span><span class="pln"> x </span><span class="lit">29</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22</span><span class="pln"> x </span><span class="lit">29</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Webclip</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">57</span><span class="pln"> x </span><span class="lit">57</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">57</span><span class="pln"> x </span><span class="lit">57</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Toolbar</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20</span><span class="pln"> x </span><span class="lit">20</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">20</span><span class="pln"> x </span><span class="lit">20</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Tab</span><span class="pln"> bar icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">30</span><span class="pln"> x </span><span class="lit">30</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">30</span><span class="pln"> x </span><span class="lit">30</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Launch</span><span class="pln"> image</span><span class="pun">:</span><span class="pln">  see above portrait</span><span class="pun">/</span><span class="pln">landscape</span></span>

RAW

Notes: n/a

iPhone4

<span style="background-color: rgb(255, 255, 255);"><span class="pun">•</span><span class="pln">   </span><span class="typ">Portrait</span><span class="pun">:</span><span class="pln"> </span><span class="lit">640</span><span class="pln"> x </span><span class="lit">960</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">320</span><span class="pln"> x </span><span class="lit">480</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Landscape</span><span class="pun">:</span><span class="pln"> </span><span class="lit">960</span><span class="pln"> x </span><span class="lit">640</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">480</span><span class="pln"> x </span><span class="lit">320</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Status</span><span class="pln"> </span><span class="typ">Bar</span><span class="pun">:</span><span class="pln"> </span><span class="lit">40px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">20point</span><span class="pln">

</span><span class="pun">•</span><span class="pln">   DPI</span><span class="pun">:</span><span class="pln"> </span><span class="lit">326dpi</span><span class="pln">

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Color</span><span class="pln"> </span><span class="typ">Mode</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8bit</span><span class="pln"> RGB

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Color</span><span class="pln"> </span><span class="typ">Temperature</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Cool</span><span class="pln">


</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Application</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">114</span><span class="pln"> x </span><span class="lit">114</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">57</span><span class="pln"> x </span><span class="lit">57</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Appstore</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">512</span><span class="pln"> x </span><span class="lit">512</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">512</span><span class="pln"> x </span><span class="lit">512</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Spotlight</span><span class="pln"> search icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">58</span><span class="pln"> x </span><span class="lit">58</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">29</span><span class="pln"> x </span><span class="lit">29</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Document</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">44</span><span class="pln"> x </span><span class="lit">58</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22</span><span class="pln"> x </span><span class="lit">29</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Webclip</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">114</span><span class="pln"> x </span><span class="lit">114</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">57</span><span class="pln"> x </span><span class="lit">57</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Toolbar</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="lit">40</span><span class="pln"> x </span><span class="lit">40</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">20</span><span class="pln"> x </span><span class="lit">20</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Tab</span><span class="pln"> bar icon</span><span class="pun">:</span><span class="pln">  </span><span class="lit">60</span><span class="pln"> x </span><span class="lit">60</span><span class="pln"> px</span><span class="pun">,</span><span class="pln"> </span><span class="lit">30</span><span class="pln"> x </span><span class="lit">30</span><span class="pln"> point

</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Launch</span><span class="pln"> image</span><span class="pun">:</span><span class="pln">  see above portrait</span><span class="pun">/</span><span class="pln">landscape</span></span>

RAW

Notes: effectively pixel-doubled previous generations, bare in mind the screen is the same size and concessions will have to be made e.g. keeping assets the same *physical size but doubling their effective resolution. see below.*

iPad

<span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Portrait</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">768</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">1024px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">768</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">1024point</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Landscape</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">1024</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">768px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">1024</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">768point</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Status</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Bar</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">20px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">20point</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   DPI</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">132dpi</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Color</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Mode</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">8bit</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> RGB

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Color</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Temperature</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Warm</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">


</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Application</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> icon</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">72</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">72</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">72</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">72</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> point

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Appstore</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> icon</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">512</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">512</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">512</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">512</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> point

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Spotlight</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> search icon </span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">(</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">results</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">):</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">50</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">50</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">50</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">50</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> point

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Spotlight</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> search icon </span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">(</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">settings</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">):</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">29</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">29</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">29</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">29</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> point

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Document</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> icon</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">64</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">64</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">64</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">64</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> point

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Webclip</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> icon</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">72</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">72</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">72</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">72</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> point

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Toolbar</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> icon</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">20</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">20</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">20</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">20</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> point

</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">•</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">   </span><span class="typ" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">Tab</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> bar icon</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">:</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">30</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">30</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> px</span><span class="pun" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">,</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">30</span><span class="pln" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> x </span><span class="lit" style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">30</span><span class="pln"><span style="font-family:Arial;color:#333333;"><span style="font-size: 14px; line-height: 26px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> point
</span></span><span style="background-color: rgb(255, 255, 255);">
</span></span><span style="background-color: rgb(255, 255, 255);"><span class="pun">•</span><span class="pln">   </span><span class="typ">Launch</span><span class="pln"> image</span><span class="pun">:</span><span class="pln"> see above portrait</span><span class="pun">/</span><span class="pln">landscape</span></span>

RAW

Notes: many apps include a rounded mask at the corners of the screen/split view - its part of the default view of many apps by the OS. The radius of the rounded corner of these are 6px onto a black background and are optional.

Icon size radii (via Toxinide):

<span style="background-color: rgb(255, 255, 255);"><span class="pun">•</span><span class="pln">   </span><span class="lit">29x29px</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pln">

</span><span class="pun">•</span><span class="pln">   </span><span class="lit">50x50px</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">9px</span><span class="pln">

</span><span class="pun">•</span><span class="pln">   </span><span class="lit">57x57px</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln">

</span><span class="pun">•</span><span class="pln">   </span><span class="lit">58x58px</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> 

</span><span class="pun">•</span><span class="pln">   </span><span class="lit">72x72px</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">12px</span><span class="pln">

</span><span class="pun">•</span><span class="pln">   </span><span class="lit">114x114px</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pln"> 

</span><span class="pun">•</span><span class="pln">   </span><span class="lit">512x512px</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">90px</span></span>

RAW

Apple automatically bevels/rounds the corners of icons and optionally automatically applies a gloss to icons used in development of iTunes Appstore icons and as such you should not apply the above border-radii to your icons when you export them, they are best left for preview/mockup artwork.

Use the UIPrerenderedIcon plist setting to disable the default gloss feature:

developer.apple.com/iphone/library/documentation/General/Reference/InfoPlistKeyReference/Articles/…

Icons should be exported as either high quality JPEGs or preferably PNGs (24bit, alpha-capable where appropriate). More information regarding icons can be found at:

developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/IconsImages/…

A word about points: The point sizes listed here are not "Photoshop-points" as you may know them, but more accurately "Apple-points" as described in the Resolution Independence Guide:

developer.apple.com/mac/library/documentation/UserExperience/Conceptual/HiDPIOverview/HiDPIConcepts/…

Essentially what this means is that in cases like iPhone4 where you have double the resolution, you do not have double the amount of space to place items, only double the 'definition'. Specifically this means, the screen display is too small for you to show artwork (text specifically) like you would otherwise. Just be aware that even though you have twice the pixels, its still the same size screen and there is a limit to how much information you can place on such a screen without straining one's eyes.

A word about image formats: iOS devices are predisposed to preferring PNG file formats for a number of reasons, both hardware and software. For more information on the subject (via jeffbarg):

iphonedevelopment.blogspot.com/2008/10/…

Comments/Suggestions? Did I get something wrong or could I add more? I'd like to hear your feedback, lets make this as comprehensive as possible :-)

• Share on Twitter