Skip to content
Icons byFox
← All guides

The developer’s field guide

Android adaptive icons: layers, safe zone and installation

Prepare foreground and background layers, inspect launcher masks and install the Android res export in your project.

A 108 dp layer with a centered 66 dp safe circle and a 72 dp viewport.
A 108 dp layer with a centered 66 dp safe circle and a 72 dp viewport.

An Android launcher can crop the same app icon into several shapes. A logo that looks balanced in a square may lose its corners inside a circle. Prepare the artwork with that crop in mind before exporting all densities.

Foreground, background and safe zone

An adaptive icon combines a foreground with a background. Android defines a 108 × 108 dp layer and a central safe region measuring 66 dp across. Keep the essential mark inside that region; let the background extend to the edges. Do not bake a rounded outline into the source. These dimensions describe the adaptive layer, not the size of the icon on the home screen. See Android’s adaptive icon specification.

The downloadable grid is a reference overlay. Place it above your artwork in a vector editor, align both canvases, and hide the guide before exporting. The dashed square marks the 72 dp viewport; the circle marks the conservative safe area. Avoid treating a safe-area rectangle as permission to fill its corners with important details.

Generate the Android package

  1. Open Fox’s Icon Generator and choose text, clipart or your own transparent image.
  2. Add the Android output and select its preview.
  3. Choose a background color. Reduce the artwork size until the important parts survive both the circle and squircle previews.
  4. Next to Export, choose This project only, download the Android ZIP and extract it. All projects exports every added format; when there is more than one, the Android files are in the combined ZIP’s android/ directory.

The generator creates legacy PNGs and separate adaptive foreground resources. Its archive includes the following directories, using the default filename:

res/
  mipmap-mdpi/ … mipmap-xxxhdpi/
  mipmap-anydpi-v26/ic_launcher.xml
  mipmap-anydpi-v26/ic_launcher_round.xml
  values/ic_launcher_background.xml
README.txt

Install without breaking existing resources

Merge the contents of res/ into your app module’s src/main/res/. Review conflicts instead of replacing the entire directory: it also contains layouts, strings and other application resources. In the existing application element, set:

android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"

These names assume the default export settings. If you choose another filename, use the references in the generated README. Keep the XML and PNG names together when copying the package.

Check the installed result

Test the installed app under more than one launcher shape. If the mark is cropped, adjust its scale rather than adding a rounded frame. If an old icon remains, check the manifest and selected build variant before blaming the exported image. An app flavor can supply its own resources.

For wallpaper-based colors, continue with the themed icon guide. A status-bar symbol needs a different export: see notification icons.

Safe area circle in the preview

In Composition, enable Safe area circle. Use Circle diameter to set it from 20% to 100% of the icon’s shorter side; the default is 80%. Adjust the artwork’s scale and position while checking its distance from the circle.

The overlay is for preview only — it is not included in PNG or ZIP exports. Its settings are remembered in this browser but are not part of a shared project. Use the circle to judge spacing in the preview; its percentage diameter is not an adaptive-layer measurement in dp. Also compare the launcher masks and the reference grid described above.

Download and try it

Original examples by Fox, free to edit and use commercially. Guide diagrams are for reference; use the source SVG for export.

Official documentation and templates

Put the guide into practice

Preview and generate your icons with Fox’s Icon Generator. Free exports, no account, and your images stay in your browser.

Open icon generator →

Android themed icons: prepare a monochrome layer

Create a clear monochrome launcher icon, export Android resources and check themed icons on a supported launcher.

Read guide →

Android notification icons: fix the white square

Make a transparent small icon, export the correct drawable densities and connect it to setSmallIcon().

Read guide →

iOS app icon sizes: from PNG to AppIcon.appiconset

Understand the sizes in the iOS export, import Contents.json into Xcode and choose between asset catalogs and Icon Composer.

Read guide →

Favicon sizes: ICO, Apple touch icon and PWA manifest

Install favicons and PWA icons, configure site.webmanifest and check the maskable safe area before publishing.

Read guide →

How to save an icon project and edit it later

Save settings, variants and uploaded artwork in a ZIP, then restore the project in the generator.

Read guide →

Gradient backgrounds and the icon only preview

Choose colors and a gradient direction, compare platform variants and inspect the icon without surrounding system UI.

Read guide →