| page.title=Launcher Icons |
| excludeFromSuggestions=true |
| parent.title=Icon Design Guidelines |
| parent.link=icon_design.html |
| @jd:body |
| |
| <div id="qv-wrapper"> |
| <div id="qv"> |
| |
| <h2>In this document</h2> |
| |
| <ol> |
| <li><a href="#goals">Goals of the Launcher Icon</a></li> |
| <li><a href="#dos_donts">Do's and Don'ts</a></li> |
| <li><a href="#size">Size and Format</a></li> |
| </ol> |
| |
| <h2>See also</h2> |
| |
| <ol> |
| <li><a href="icon_design_launcher_archive.html">Older guidelines</a></li> |
| <li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| Screens</a></li> |
| </ol> |
| |
| </div> |
| </div> |
| |
| |
| <div class="note design"> |
| <p><strong>New Guides for App Designers!</strong></p> |
| <p>Check out the new documents for designers at <strong><a |
| href="{@docRoot}design/index.html">Android Design</a></strong>, including more guidelines |
| for <a href="{@docRoot}design/style/iconography.html">Iconography</a>.</p> |
| </div> |
| |
| |
| |
| <p>A launcher icon is a graphic that represents your application. Launcher icons are used by |
| Launcher applications and appear on the user’s Home screen. Launcher icons can also be used to |
| represent shortcuts into your application (for example, a contact shortcut icon that opens detail |
| information for a contact).</p> |
| |
| <p>As described in <a |
| href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific |
| Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| Screens</a>, you should create separate icons for all generalized screen densities, including low-, |
| medium-, high-, and extra-high-density screens. This ensures that your icons will display properly |
| across the range of devices on which your application can be installed. See <a |
| href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a> |
| for suggestions on how to work with multiple sets of icons.</p> |
| |
| <p>A high-resolution version of your application launcher icon is also required by Google Play |
| for use in application listings. For more details on this, see <a |
| href="#icons_in_market">Application Icons on Google Play</a> below.</p> |
| |
| |
| <p class="note"><strong>Note:</strong> |
| |
| The launcher icon guidelines pertaining to all versions of Android have been re-written. If you |
| need to review the old guidelines, see the |
| <a href="icon_design_launcher_archive.html">launcher icon guidelines archive</a>. |
| |
| </p> |
| |
| |
| <h2 id="goals">Goals of the Launcher Icon</h2> |
| |
| |
| <div class="figure" style="width:400px" id="launcher_examples"> |
| <img src="{@docRoot}images/icon_design/launcher_examples.png" |
| alt="Example launcher icons for system and third-party applications" |
| width="400" /> |
| <p class="img-caption"> |
| <strong>Figure 1.</strong> Example launcher icons for system applications (left) and |
| third-party applications (right). |
| </p> |
| </div> |
| |
| |
| <p>Application launcher icons have three primary goals:</p> |
| |
| <ol> |
| <li>Promote the brand and tell the story of the app.</li> |
| <li>Help users discover the app on Google Play.</li> |
| <li>Function well in the Launcher.</li> |
| </ol> |
| |
| <h3 id="promoting_brand_story">Promote the brand story</h3> |
| |
| <p>App launcher icons are an opportunity to showcase the brand and hint at the story of what your |
| app is about. Thus, you should:</p> |
| |
| <ul> |
| <li>Create an icon that is unique and memorable.</li> |
| <li>Use a color scheme that suits your brand.</li> |
| <li>Don't try to communicate too much with the icon. A simple icon will have more impact and be |
| more memorable.</li> |
| <li>Avoid including the application name in the icon. The app name will always be displayed |
| adjacent to the icon.</li> |
| </ul> |
| |
| |
| <h3 id="help_users_discover">Help users discover the app on Google Play</h3> |
| |
| <p>App launcher icons are the first look that prospective users will get of your app on Google Play. |
| A high quality app icon can influence users to find out more as they scroll through lists of |
| applications.</p> |
| |
| <p>Quality matters here. A well-designed icon can be a strong signal that your app |
| is of similarly high quality. Consider working with an icon designer to develop the app’s launcher |
| icon.</p> |
| |
| <p class="note"><strong>Note:</strong> Google Play requires a high-resolution version of your |
| icon; for more details on this, see <a href="#icons_in_market">Application Icons in Google |
| Play</a> below.</p> |
| |
| |
| <h3 id="function_well_in_launcher">Function well in the Launcher</h3> |
| |
| <p>The launcher is where users will interact with the icon most frequently. A successful app |
| launcher icon will look great in all situations: on any background and next to any other icons and |
| app widgets. To do this, icons should:</p> |
| |
| <ul> |
| <li>Communicate well at small sizes.</li> |
| <li>Work on a wide variety of backgrounds.</li> |
| <li>Reflect the implied lighting model of the launcher (top-lit).</li> |
| <li>If the icon is 3D, use a perspective that doesn't feel out of place with other icons; |
| forward-facing works best. <ul> |
| <li>3D icons work best with a shallow depth.</li></ul> |
| </li> |
| <li>Have a unique silhouette for faster recognition; not all Android app icons should be square. <ul> |
| <li>Icons should not present a cropped view of a larger image.</li></ul> |
| </li> |
| <li>Have similar weight to other icons. Icons that are too spindly or that don't use enough of |
| the space may not successfully attract the user’s attention, or may not stand out well on all |
| backgrounds.</li> |
| </ul> |
| |
| |
| <h2 id="dos_donts">Do's and Don'ts</h2> |
| |
| <p>Below are some "do and don't" examples to consider when creating icons for your application.</p> |
| |
| <table style="width: 600px"> |
| <tbody> |
| |
| <tr> |
| <td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_settings.png" |
| alt="Side by side: overly complicated vs. simpler launcher icons"></td> |
| <td style="border:0; vertical-align:middle">Icons should not be overly complicated. Remember |
| that launcher icons will be used at often small sizes, so they should be distinguishable at |
| small sizes.</td> |
| </tr> |
| |
| <tr> |
| <td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_clock.png" |
| alt="Side by side: cropped and glossy vs. matte and single-shape launcher icons"></td> |
| <td style="border:0; vertical-align:middle">Icons should not be cropped. Use unique shapes |
| where appropriate; remember that launcher icons should differentiate your application from |
| others. Additionally, do not use too glossy a finish unless the represented object has a |
| glossy material.</td> |
| </tr> |
| |
| <tr> |
| <td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_custom_2.png" |
| alt="Side by side: overly thin vs. thicker, weightier icons"></td> |
| <td style="border:0; vertical-align:middle">Icons should not be thin. They should have a |
| similar weight to other icons. Overly thin icons will not stand out well on all |
| backgrounds.</td> |
| </tr> |
| |
| <tr> |
| <td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_custom.png" |
| alt="Side by side: full-frame vs. subtly rounded and treated icons"></td> |
| <td style="border:0; vertical-align:middle">Icons should make use of the alpha channel, and |
| should not simply be full-frame images. Where appropriate, distinguish your icon with |
| subtle yet appealing visual treatment.</td> |
| </tr> |
| |
| </tbody> |
| </table> |
| |
| |
| <h2 id="size">Size and Format</h2> |
| |
| <p>Launcher icons should be 32-bit PNGs with an alpha channel for transparency. The finished |
| launcher icon dimensions corresponding to a given generalized screen density are shown in the |
| table below.</p> |
| |
| <p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of |
| finished launcher icon dimensions for each generalized screen density.</p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th></th> |
| <th> |
| <code>ldpi</code> (120 dpi)<br> |
| <small style="font-weight: normal">(Low density screen)</small> |
| </th> |
| <th> |
| <code>mdpi</code> (160 dpi)<br> |
| <small style="font-weight: normal">(Medium density screen)</small> |
| </th> |
| <th> |
| <code>hdpi</code> (240 dpi)<br> |
| <small style="font-weight: normal">(High density screen)</small> |
| </th> |
| <th> |
| <code>xhdpi</code> (320 dpi)<br> |
| <small style="font-weight: normal">(Extra-high density screen)</small> |
| </th> |
| </tr> |
| <tr> |
| <th> |
| Launcher Icon Size |
| </th> |
| <td> |
| 36 x 36 px |
| </td> |
| <td> |
| 48 x 48 px |
| </td> |
| <td> |
| 72 x 72 px |
| </td> |
| <td> |
| 96 x 96 px |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p>You can also include a few pixels of padding in launcher icons to maintain a |
| consistent visual weight with adjacent icons. For example, a 96 x 96 pixel <code>xhdpi</code> |
| launcher icon can contain a 88 x 88 pixel shape with 4 pixels on each side for padding. |
| This padding can also be used to make room for a subtle drop shadow, which can help ensure |
| that launcher icons are legible across on any background color.</p> |
| |
| |
| <h3 id="icons_in_market">Application Icons on Google Play</h3> |
| |
| <p>If you are publishing your app on |
| Google Play, you will also need to provide a 512 x 512 pixel, high-resolution application icon |
| in the <a href="http://play.google.com/apps/publish">developer console</a> at upload time. This icon |
| will be used in various locations on Google Play and does not replace your launcher icon.</p> |
| |
| <p>For tips and recommendations on creating high-resolution launcher icons that can easily be scaled |
| up to 512x512, see <a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips"> |
| Tips for Designers</a>.</p> |
| |
| <p>For information and specifications about high-resolution application icons on Google Play, see |
| the following article:</p> |
| |
| <p style="margin-left:2em"><a href="http://market.android.com/support/bin/answer.py?answer=1078870"> |
| Graphic Assets for your Application (Google Play Help) »</a> |
| |
| <br><br> |