Android Rounded Icons for Apps

When a new project is created in a recent version of Android Studio there are now two default launcher icons generated in the mipmap folders. There is ic_launcher.png and ic_launcher_round.png. The round version of the launcher icon was brought in for Android 7.0 (Nougat). New Android devices can implement the rounded launcher icon feature. The rounded launcher icons use the ic_launcher_round.png image, instead of the ic_launcher.png image. (These are the default file names and they can be changed.)

The launcher icon for an Android app is set in the manifest file, AndroidManifest.xml. The application node has the attribute:

android:icon="@mipmap/ic_launcher"

And now also

android:roundIcon="@mipmap/ic_launcher_round"

This now means more PNG image resources need to be generated for an app. Launcher icons as before, plus another set for devices that have rounded icons support. Although round icons could be used previously, by using a round icon graphic. Now round icons are explicitly supported to match the interface for newer Android devices.

Reminder of Screen Densities

Before covering the size of Android launcher icons a summary on screen densities. Over the many years that Android has been around the pixel density of the screens that are supported has increased. The original baseline density was a screen with 160 dots per inch (dpi). Generally one dot on a device screen is known as a pixel (px), so 160 px per inch. Any screens around 160 dpi are referred to as medium density screens, a.k.a. mdpi screens. There are high density screens at around 240 dpi, or hdpi, and extra high density screens around 320 dpi, xhdpi. Then it gets a bit crazy with extra extra high density screens around 480 dpi, xxhdpi, and above that extra extra extra high density screens around 640 dpi, xxxhdpi. Older versions of Android supported a low density screen around 120 dpi, ldpi.

Icon Sizes for Different Screen Densities

Prior to the Image Asset utility in Android Studio (see the article Launcher Icon Generator in Android Studio) icons had to be made in graphics editing tools. An example of doing this using the free Inkscape program is given in the article Android Launcher Icons Using Inkscape. The Inkscape icon post was based on previous Google icon design guidelines. These stated that icons are sized as follows:

• 36×36 px icon in the res/mipmap-ldpi folder (optional) for low density displays (approx. 120 dpi)
• 48×48 px icon in the res/mipmap-mdpi folder for medium density displays (approx. 160 dpi)
• 72×72 px icon in the res/mipmap-hdpi folder for high density displays (approx. 240 dpi)
• 96×96 px icon in the res/mipmap-xhdpi folder for extra high density displays (approx. 320 dpi)
• 144×144 px icon in the res/mipmap-xxhdpi folder for extra extra high density displays (approx. 480 dpi)
• 192×192 px icon in the res/mipmap-xxxhdpi folder for extra extra extra high density displays (approx. 640 dpi)

These sizes included recommendations for a border which meant that the drawable area for the graphical content was smaller. The recommended border being one twelfth of the icon size. This means that the space the actual icon image occupies is smaller than the full icon size:

• For a 36×36 px icon the usable image space is 30×30 px.
• For a 48×48 px icon the usable image space is 40×40 px.
• For a 72×72 px icon the usable image space is 60×60 px.
• For a 96×96 px icon the usable image space is 80×80 px.
• For a 144x144 px icon the usable image space is 120x120 px.
• For a 192x192 px icon the usable image space is 160x160 px.

Android Rounded Launcher Icons Sizes

The advice on icon sizes in Android available from the Internet is not clear, due to the transition from the old versions of Android to the icon support in the latest Android versions. However, the above sizes remain valid. For the rounded launcher icon the overall sizes remain the same, but a circle is used. Therefore the diameters range from 48 px to 192 px. Then an inner circle is drawn inside that area, within a one twenty-forth margin from the edge. This means for the 48x48 px icon the circle has a diameter of 44 px, leaving a 2 px margin (48/24=2). The guidelines then recommend that either the entire circle is filled with an image or padding is used all around the image. Here are some Android examples:

Notice how a light drop shadow is also present. For the 48 px diameter icon the drop shadow is between the full outer circle and the inner 44 px image circle. The usable image space for the rounded icon, when not filling the entire inner circle, is similar to the square icon. Thus for the 48 px diameter icon the padded graphic area is a about 40 px in diameter max.

• Diameter 36 px, full graphic 32 px, a padded graphic upto 30 px, 2 px available for drop shadow. (The mipmap-ldpi folder is optional and not generated by the Asset Studio utility.)
• Diameter 48 px, full graphic 44 px, a padded graphic upto 40 px, 2 px available for drop shadow.
• Diameter 72 px, full graphic 66 px, a padded graphic upto 60 px, 3 px available for drop shadow.
• Diameter 96 px, full graphic 84 px, a padded graphic upto 80 px, 4 px available for drop shadow.
• Diameter 144 px, full graphic 132 px, a padded graphic upto 120 px, 6 px available for drop shadow.
• Diameter 192 px, full graphic 176 px, a padded graphic upto 160 px, 8 px available for drop shadow.

Tips

• One trick to avoid having to make two lots of icons is to make only the rounded set and then set both icon attributes in AndroidManifest.xml to the rounded version.
• When designing icons in graphical programs design on a big canvas and scale downwards. Don't design at the small sizes otherwise the bigger icons become pixelated. The canvas needs to be at least as big as the biggest icon (192x192 px), but probably at least twice as big (384x384), and more for the Play store icon (512x512 px). Better still design using a vector based image package such as Inkscape.
• Icons are small on low density displays so keep the design simple and use plan shapes and contrasting colors.

See Also

• Free Android Example Projects
• Launcher Icon Generator in Android Studio
• Free Android Icons Using OpenClipArt.org and Paint.NET
• Icons Using Inkscape
• Free Launcher Icons, Menu Icons and Android Graphics