xref: /frameworks/base/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd

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 users 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 apps 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 users 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) &raquo;</a>

<br><br>