1 page.title=Launcher Icons (Archive) 2 parent.title=Icon Design Guidelines 3 parent.link=icon_design.html 4 @jd:body 5 6 <div id="qv-wrapper"> 7 <div id="qv"> 8 9 <h2>In this document</h2> 10 11 <ol> 12 <li><a href="#icon5">Android 2.0</a> 13 <ol> 14 <li><a href="#style5">Style</a></li> 15 <li><a href="#size5">Size</a></li> 16 <li><a href="#materialscolors5">Materials and colors</a></li> 17 <li><a href="#effects5">Effects</a></li> 18 <li><a href="#dodonts5">Do's and don'ts</a></li> 19 <li><a href="#examples5">Example icons</a></li> 20 </ol> 21 </li> 22 <li><a href="#icon1">Android 1.6 and Earlier</a></li> 23 </ol> 24 25 <h2>See also</h2> 26 27 <ol> 28 <li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple 29 Screens</a></li> 30 </ol> 31 32 </div> 33 </div> 34 35 <p class="warning"> 36 <strong>Warning:</strong> This document describes obsolete guidelines for 37 creating launcher icons. Follow the <a href="icon_design_launcher.html">latest 38 launcher icon guidelines</a> instead. 39 </p> 40 41 <p>A Launcher icon is a graphic that represents your application on the device's 42 Home screen and in the Launcher window.</p> 43 44 <p>The user opens the Launcher by touching the icon at the bottom of the Home 45 screen. The Launcher opens and exposes the icons for all of the installed 46 applications. The user selects an application and opens it by touching the 47 Launcher icon or by means of any hardware navigation controls available, such as 48 a trackball or d-pad.</p> 49 50 <p>As described in <a href="icon_design.html#icon-sets">Providing 51 Density-Specific Icon Sets</a>, you should create separate icons for low-, 52 medium-, and high-density screens. This ensures that your icons will display 53 properly across the range of devices on which your application can be installed. 54 See <a href="icon_design.html#design-tips">Tips for Designers</a> for 55 suggestions on how to work with multiple sets of icons.</p> 56 57 58 59 <h2 id="market">Application Icons on Google Play</h2> 60 61 <p>If you are <a href="{@docRoot}tools/publishing/publishing.html">publishing 62 your application on Google Play</a>, you will also need to provide a 512x512 63 pixel, high-resolution application icon in the <a 64 href="http://play.google.com/apps/publish">developer console</a> at upload-time. 65 This icon will be used in various locations on Google Play and does 66 not replace your launcher icon.</p> 67 68 <p>For tips and recommendations on creating high-resolution launcher icons that 69 can easily be scaled up to 512x512, see 70 <a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips"> 71 Tips for Designers</a>.</p> 72 73 <p>For information and specifications about high-resolution application 74 icons on Google Play, see the following article:</p> 75 76 <p style="margin-left:2em"><a 77 href="http://market.android.com/support/bin/answer.py?answer=1078870"> 78 Graphic Assets for your Application (Google Play Help) »</a> 79 80 81 82 83 <h2 id="icon5">Android 2.0 and Later</h2> 84 85 <p>Starting with Android 2.0, launcher icons should be front-facing, instead of 86 at a three-quarter perspective. The following guidelines describe how to design 87 launcher icons for Android 2.0 (API Level 5) and later.</p> 88 89 <h3 id="style5">Style</h3> 90 91 <p>The launcher icons that you create should follow the general style principles 92 below. The guidelines aren't meant to restrict what you can do with your icons, 93 but rather they are meant to emphasize the common approaches that your icons can 94 share with others on the device. Figure 1, at right, provides examples. </p> 95 96 <div class="figure"> 97 <img src="{@docRoot}images/icon_design/IconGraphic_Icons_i.png" 98 width="340"> 99 <p class="img-caption"> 100 <strong>Figure 1.</strong> Example launcher icons for Android 2.0 and 101 greater. 102 </p> 103 </div> 104 105 <p>Clean and contemporary:</p> 106 107 <ul> 108 <li>Launcher icons should be modern and sometimes quirky; they should not 109 appear aged or ragged. You should avoid overused symbolic metaphors whenever 110 possible.</li> 111 </ul> 112 113 <p>Simple and iconic:</p> 114 <ul> 115 <li>Android Launcher icons are caricatural in nature; your icons should be 116 highly simplified and exaggerated, so that they are appropriate for use at small 117 sizes. Your icons should not be overly complicated. </li> 118 <li>Try featuring a single part of an application as a symbolic 119 representation of the whole (for example, the Music icon features a speaker). 120 </li> 121 <li>Consider using natural outlines and shapes, both geometric and organic, 122 with a realistic (but never photorealistic) rendering. </li> 123 <li>Your icons <em>should not</em> present a cropped view of a larger 124 image.</li> 125 </ul> 126 127 <p>Tactile and textured:</p> 128 <ul> 129 <li>Icons should feature non-glossy, textured material. See 130 <a href="#materialscolors5">Materials and colors</a>, below, for more 131 information.</li> 132 </ul> 133 134 <p>Forward-facing and top-lit:</p> 135 <ul> 136 <li><em>New for Android 2.0 and later platforms</em>: Android Launcher 137 icons should be forward-facing, with very little perspective, and they 138 should be top-lit.</li> 139 </ul> 140 141 <p class="note"><strong>Note:</strong> Android applies separate text labels 142 using the application name when displaying launcher icons, so you should avoid 143 embedding text in your icon and instead focus on designing a distinct and 144 memorable icon.</p> 145 146 147 148 <h3 id="size5">Size and positioning</h3> 149 150 <p>Launcher icons should use a variety of shapes and forms that are scaled and 151 positioned inside the asset to create consistent visual weight with other 152 icons.</p> 153 154 <p>Figure 2 illustrates various ways of positioning the icon inside the 155 asset. You should size the icons <em>smaller than the actual bounds of the 156 asset</em> to create a consistent visual weight and to allow for shadows. If 157 your icon is square or nearly square, it should be scaled even smaller.</p> 158 159 <p>In order to indicate the recommended size for the icon, each example in 160 Figure 2 includes three different guide rectangles:</p> 161 162 <ul> 163 <li>The red box is the bounding box for the full asset.</li> 164 <li>The blue box is the recommended bounding box for the actual icon. 165 The icon box is sized smaller than the full asset box so that there is space to 166 include shadows and allow for special icon treatments.</li> 167 <li>The orange box is the recommended bounding box for the actual icon when 168 the content is square. The box for square icons is smaller than that for other 169 icons to establish a consistent visual weight across the two types.</li> 170 </ul> 171 172 <table> 173 <tr> 174 175 <td style="border:0;"> 176 <ol class="nolist"> 177 <li>Launcher icon dimensions for high-density (<code>hdpi</code>) screens:</li> 178 <ol class="nolist"> 179 <li>Full Asset: 72 x 72 px</li> 180 <li>Icon: 60 x 60 px</li> 181 <li>Square Icon: 56 x 56 px</li> 182 </ol> 183 </li> 184 </ol> 185 </td> 186 <td style="border:0;"> 187 <img src="{@docRoot}images/icon_design/launcher_size_hdpi.png" width="450"> 188 </td> 189 </tr> 190 <tr> 191 <td style="border:0;"> 192 <ol class="nolist"> 193 <li>Launcher icon dimensions for medium-density (<code>mdpi</code>) screens:</li> 194 <ol class="nolist"> 195 <li>Full Asset: 48 x 48 px</li> 196 <li>Icon: 40 x 40 px</li> 197 <li>Square Icon: 38 x 38 px</li> 198 </ol> 199 </li> 200 </ol> 201 </td> 202 203 <td style="border:0;"> 204 <img src="{@docRoot}images/icon_design/launcher_size_mdpi.png" width="450"> 205 </td> 206 </tr> 207 <tr> 208 <td style="border:0;"> 209 <ol class="nolist"> 210 <li>Launcher icon dimensions for low-density (<code>ldpi</code>) screens:</li> 211 <ol class="nolist"> 212 <li>Full Asset: 36 x 36 px</li> 213 <li>Icon: 30 x 30 px</li> 214 <li>Square Icon: 28 x 28 px</li> 215 </ol> 216 </li> 217 </ol> 218 </td> 219 220 <td style="border:0;"> 221 <img src="{@docRoot}images/icon_design/launcher_size_ldpi.png" width="450"> 222 </td> 223 </tr> 224 225 <tr> 226 <td style="border:0;"></td> 227 <td style="border:0;"> 228 <p class="table-caption"><strong>Figure 2.</strong> 229 Launcher icon sizing and positioning inside the bounds of the 230 icon asset.</p> 231 </td> 232 </tr> 233 234 </table> 235 236 237 238 239 <h3 id="materialscolors5">Materials and colors</h3> 240 241 <p>Launcher icons should make use of tactile, top-lit, textured materials. Even 242 if your icon is just a simple shape, you should try to render in a way that 243 makes it appear to be sculpted from some real-world material.</p> 244 245 <p>Android launcher icons usually consist of a smaller shape within a 246 larger base shape and combine one neutral and one primary color. Icons may 247 use a combination of neutral colors but should maintain a fairly high level of 248 contrast. Icons should not use more than one primary color per icon, if 249 possible.</p> 250 251 <p>Launcher icons should use a limited color palette that includes a range 252 of neutral and primary colors. The icons should not be over-saturated.</p> 253 254 <p>The recommended color palette to use for Launcher icons is shown in Figure 3. 255 You can use elements of the palette for both the base color and the highlight 256 color. You can use the colors of the palette in conjunction with a 257 white-to-black vertical linear gradient overlay. This creates the impression 258 that the icon is lit from above and keeps the color less saturated.</p> 259 260 <img src="{@docRoot}images/icon_design/IconGraphic_Colors.png" width="530"> 261 <p class="img-caption"> 262 <strong>Figure 3.</strong> Recommended color palette for icons.</p> 263 264 <p>When you combine the materials in Figure 4 with a color highlight from the 265 recommended palette above, you can create materials combinations such as those 266 shown in Figure 5. To get you started, the 267 <a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon Templates Pack</a> 268 includes a Photoshop file (<code>ic_launcher_template/example_materials.psd</code>) 269 that provides all of the default materials, colors, and gradients. </p> 270 271 <table> 272 <tbody> 273 <tr> 274 <td style="border:0;"> 275 <img src="{@docRoot}images/icon_design/IconGraphic_Materials.png" width="450"> 276 <p class="img-caption"> 277 <strong>Figure 4.</strong> Example materials that you can use to create 278 your icons.</p> 279 </td> 280 <td style="border:0;border-left:1px solid #ccc;margin-left:1em;padding-left:1em"> 281 <img src="{@docRoot}images/icon_design/IconGraphic_AccentColor.png" width="450"> 282 <p class="img-caption"> 283 <strong>Figure 5.</strong> Examples of materials combined with base 284 and highlight colors from the recommended palette.</p> 285 </td> 286 </tr> 287 </tbody> 288 </table> 289 290 291 292 <h3 id="effects5">Effects</h3> 293 294 <p>Launcher icons are flat and the perspective is straight-on, rather than at an 295 angle. A drop shadow is used to create a sense of depth. Launcher icons can use 296 varying textures and lighting effects, but must be lit directly from above 297 (straight down).</p> 298 299 <p>In order to maintain consistency, all launcher icons should use the same 300 drop shadow effect, as shown in Figure 6.</p> 301 302 <table class="image-caption"> 303 <tr> 304 <td class="image-caption-i"> 305 <img src="{@docRoot}images/icon_design/launcher_style.png"/> 306 </td> 307 <td class="image-caption-c"> 308 <div class="caption grad-rule-top"> 309 <p><strong>Figure 6. </strong>Style, light and effects for launcher icons.</p> 310 <div class="image-caption-nested"> 311 <p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p> 312 <table> 313 <tr><td><em>1.</em></td><td nowrap>Lighting:</td><td>Top-lit, using appropriate lighting details<br><br></td></tr> 314 <tr><td><em>2.</em></td><td nowrap>Drop shadow:</td><td><code>#000000</code>, 75% opacity<br>angle 90°<br>distance 1px<br>size 3px<br><br></td></tr> 315 <tr><td><em>3.</em></td><td nowrap>Textures:</td><td>Tactile, appear to use real-world materials (monochromatic noise in example image)<br><br></td></tr> 316 </table> 317 </div> 318 </div> 319 </td> 320 </tr> 321 </table> 322 323 324 325 <h3 id="dodonts5">Do's and don'ts</h3> 326 327 <p>Below are some "do and don't" examples to consider when creating icons for 328 your application. </p> 329 330 331 <table> 332 <tr> 333 <td style="border:0;width:50%"> 334 335 <h4>Android Launcher icons are...</h4> 336 337 <ul> 338 <li>Modern, minimal, matte, tactile, and textured</li> 339 <li>Forward-facing and top-lit, whole, limited in color 340 palette</li> 341 </ul> 342 </td> 343 <td style="border:0;width:50%"> 344 345 <h4>Android Launcher icons are not...</h4> 346 347 <ul> 348 <li>Antique, over-complicated, glossy, flat vector</li> 349 <li>Rotated, Cropped, Over-Saturated</li> 350 </ul> 351 </td> 352 </tr> 353 <tr> 354 </table> 355 356 <img src="{@docRoot}images/icon_design/IconGraphic_DosDonts.png"/> 357 <p class="img-caption"> 358 <strong>Figure 7.</strong> Side-by-side examples of "do's and don'ts" for 359 Android launcher icons. </p> 360 361 362 363 364 365 <h3 id="examples5">Example icons</h3> 366 367 <p>Shown below are examples of high-density launcher icons used by 368 Android applications. The icons are provided for your reference only — 369 please do not reuse these icons in your applications.</code>.</p> 370 371 <img src="{@docRoot}images/icon_design/IconGraphic_Icons.png" /> 372 373 374 375 <h2 id="icon1">Android 1.6 and earlier</h2> 376 377 <p>The following guidelines describe how to design launcher icons for Android 378 1.6 (API Level 4) and earlier. Launcher icons for Android 1.6 and below are 379 simplified 3D icons with a fixed perspective. The required perspective is shown 380 in Figure 8.</p> 381 382 <h3 id="structure1">Structure</h3> 383 384 <ul> 385 <li>The base of a launcher icon can face either the top view or the front 386 view.</li> 387 388 <li>The majority of a launcher icons surface should be created using the 389 launcher icon <a href="#palette1">color palette</a>. To add emphasis, use 390 one or more bright accent colors to highlight specific characteristics.</li> 391 392 <li>All launcher icons must be created with rounded corners to make them look 393 friendly and simpleas shown in Figure 8.</li> 394 395 <li>All dimensions specified are based on a 250x250 pixel artboard size 396 in a vector graphics editor like Adobe Illustrator, where the icon fits within 397 the artboard boundaries.</li> 398 399 <li><strong>Final art must be scaled down and exported as a transparent PNG file 400 using a raster image editor such as Adobe Photoshop. Do not include a background 401 color.</strong></li> 402 403 <li>Templates for creating icons in Adobe Photoshop are available in the <a 404 href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon 405 Templates Pack</a>.</li> 406 407 </ul> 408 409 <table class="image-caption"> 410 <tr> 411 <td class="image-caption-i"> 412 <img src="{@docRoot}images/icon_design/launcher_structure.png" alt="A view of 413 launcher icon corners and perspective angles" /> 414 </td> 415 <td class="image-caption-c"> 416 <div class="caption grad-rule-top"> 417 <p><strong>Figure 8.</strong> Rounded corners and perspective angles for 418 launcher icons (90 is vertical).</p> 419 <div class="image-caption-nested"> 420 <table> 421 <tr><td><em>1.</em></td><td>92</td></tr> 422 <tr><td><em>2.</em></td><td>92</td></tr> 423 <tr><td><em>3.</em></td><td>173</td></tr> 424 <tr><td><em>4.</em></td><td>171</td></tr> 425 <tr><td><em>5.</em></td><td>49</td></tr> 426 <tr><td><em>6.</em></td><td>171</td></tr> 427 <tr><td><em>7.</em></td><td>64</td></tr> 428 <tr><td><em>8.</em></td><td>97</td></tr> 429 <tr><td><em>9.</em></td><td>75</td></tr> 430 <tr><td><em>10.</em></td><td>93</td></tr> 431 <tr><td><em>11.</em></td><td>169</td></tr> 432 </table> 433 </div> 434 </div> 435 </td> 436 </tr> 437 </table> 438 439 <h3 id="style1">Light, effects, and shadows</h3> 440 441 <p>Launcher icons are simplified 3D icons using light and shadows for 442 definition. A light source is placed slightly to the left in front of the icon, 443 and therefore the shadow expands to the right and back.</p> 444 445 <table class="image-caption"> 446 <tr> 447 <td class="image-caption-i"> 448 <img src="{@docRoot}images/icon_design/launcher_light.png" alt="A view of 449 light, effects, and shadows for launcher icons."/> 450 </td> 451 <td class="image-caption-c"> 452 <div class="caption grad-rule-top"> 453 <p><strong>Figure 9. </strong>Light, effects, and shadows for launcher icons.</p> 454 <div class="image-caption-nested"> 455 <table> 456 <tr><td><em>1.</em></td><td>Edge highlight:</td><td>white</td></tr> 457 <tr><td><em>2.</em></td><td>Icon shadow:</td><td>black | 20px blur<br>50% opacity | angle 67</td></tr> 458 <tr><td><em>3.</em></td><td>Front part:</td><td>Use light gradient from color palette</td></tr> 459 <tr><td><em>4.</em></td><td>Detail shadow:</td><td>black | 10px blur<br>75% opacity</td></tr> 460 <tr><td><em>5.</em></td><td> Side part:</td><td>Use medium gradient from color palette</td></tr> 461 </table> 462 </div> 463 </div> 464 </td> 465 </tr> 466 </table> 467 468 <table> 469 <tr> 470 <td style="border:0"> 471 472 <h4 id="palette1">Launcher icon color palette</h4> 473 474 <table> 475 <tr> 476 <td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_white.png"/></td> 477 <td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for highlights on edges.</td> 478 </tr> 479 480 <tr> 481 <td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_light.png"/></td> 482 <td class="image-caption-c">Light gradient<br><em>1: </em>r 0 | g 0 | b 0<br><em>2: </em>r 217 | g 217 | b 217<br>Used on the front (lit) part of the icon.</td> 483 </tr> 484 485 <tr> 486 <td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_medium.png"/></td> 487 <td class="image-caption-c">Medium gradient<br><em>1: </em>r 190 | g 190 | b 190<br><em>2: </em>r 115 | g 115 | b 115<br>Used on the side (shaded) part of the icon.</td> 488 </tr> 489 490 <tr> 491 <td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_dark.png"/></td> 492 <td class="image-caption-c">Dark gradient<br><em>1: </em>r 100 | g 100 | b 100<br><em>2: </em>r 25 | g 25 | b 25<br>Used on details and parts in the shade of the icon.</td> 493 </tr> 494 495 <tr> 496 <td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_black.png"/></td> 497 <td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used as base color in shadows.</td> 498 </tr> 499 500 </table> 501 502 </td> 503 504 <td style="border:0"> 505 506 <h4 id="steps1">Step by step</h4> 507 508 <ol> 509 <li>Create the basic shapes with a tool like Adobe Illustrator, using the 510 angles described in <a href="#structure1">Launcher icon: structure</a>. 511 The shapes and effects must fit within a 250x250 pixel artboard.</li> 512 <li>Add depth to shapes by extruding them and create the rounded corners as 513 described for the launcher icon structure.</li> 514 <li>Add details and colors. Gradients should be treated as if there is a light 515 source placed slightly to the left in front of the icon.</li> 516 <li>Create the shadows with the correct angle and blur effect.</li> 517 <li>Import the icon into a tool like Adobe Photoshop and scale to fit an image 518 size of 48x48 px on a transparent background.</li> 519 <li>Export the icon at 48x48 as a PNG file with transparency enabled.</li> 520 </ol> 521 522 </td> 523 </tr> 524 </table> 525