An Android app icon is not simply a square picture placed on a home screen. On supported Android versions, an adaptive icon is assembled from separate visual layers and then clipped by a mask selected by the device or launcher. The same icon may appear circular on one phone, rounded-square on another, and in a different system surface elsewhere. Designing for that behavior is less about predicting one outline and more about building artwork that remains clear when the operating system changes the visible shape.
This guide explains the official adaptive-icon geometry, the roles of foreground, background, and optional monochrome layers, and a review process that does not depend on a single launcher preview. It also distinguishes source artwork from packaged Android resources. You can use IconCreator's free Android adaptive icon checker to inspect an existing asset, while the broader IconCreator generator is still coming soon.
What Is an Android Adaptive Icon?
Adaptive icons were introduced so launchers could present a coherent icon shape while preserving each app's identity. The app supplies two required layers: a foreground layer containing the primary symbol and a background layer containing a color or graphic. Android combines those layers, applies a mask, and may animate or offset them to create subtle depth. Because the mask is controlled by the system, the app should not bake a permanent circle or rounded square into the artwork unless that shape is intentionally part of the brand mark.
The Official 108 by 108 dp Canvas
Android's adaptive-icon guidance defines both foreground and background layers at 108 by 108 dp. The layers are larger than the portion guaranteed to remain visible because the system needs extra artwork for masking and motion effects. The official documentation identifies a 66 by 66 dp region in the center as the critical logo area that should not be clipped by supported masks. Treat that region as the home for indispensable identity: the symbol, initials, or visual feature that must survive every crop.
The surrounding area is not wasted. It supplies bleed and allows the foreground to move relative to the background. However, details placed there are less reliable. A long wordmark, corner detail, thin outer ring, or tiny badge may look complete in one preview and disappear in another. Keep the essential logo comfortably inside the central region rather than touching its boundary. Optical breathing room matters because a technically safe design can still feel cramped after a circular or squircle mask is applied.
Build the Foreground Layer
The foreground carries the recognizable mark. Give it a transparent surrounding area so the background can remain visible, and avoid drawing a full-canvas opaque rectangle that defeats the layered model. Favor a simple silhouette, moderate internal contrast, and shapes that remain legible at launcher size. Very fine lines and small gaps may close after rasterization or reduction. If the mark contains text, test whether it is truly readable; a compact symbol is usually more resilient than a miniature name.
Use Depth Deliberately
Layer separation can create a pleasant sense of depth, but it should not be required to understand the icon. Keep the foreground's visual center stable and avoid placing important content near the moving edges. Shadows should be restrained and internally consistent. A shadow painted as if the icon always sits in one fixed mask can look unnatural when the launcher changes shape. Review the foreground on several backgrounds during production so accidental halos and semi-transparent edge artifacts are easy to spot.
Build the Background Layer
The background must cover the complete layer so motion never reveals an empty edge. A solid color is robust, but a restrained gradient or pattern can work if it remains continuous beyond the visible center. Do not place essential words, borders, or corner decorations in the background. The mask can remove them, and the foreground may move over them. Check contrast between foreground and background in both bright and dim viewing conditions, especially when the two use colors with similar perceived lightness.
“Design the identity for the center; design the surrounding artwork to tolerate movement and cropping.”
Add an Optional Monochrome Layer
Android supports an optional monochrome layer for themed icons. This is a separate, single-color interpretation of the app mark that the system can tint to match the user's theme. It should not be an automatic grayscale copy of a detailed full-color icon. Simplify the symbol, preserve characteristic negative spaces, and remove shading that depends on multiple tones. The platform applies color, so the supplied shape should communicate identity through silhouette and structure.
A monochrome layer is optional in the adaptive-icon definition, but providing a thoughtful version gives the system better material for themed presentation. Test it at small size and against both light and dark thematic colors. Verify that counters do not fill in, separate parts do not merge, and the result remains distinguishable from common utility symbols. Do not assume that every device, launcher, or Android version will show it in exactly the same context.
Test Across Masks and System Surfaces
A single rounded-square mockup is not enough. Preview circles, squircle-like forms, rounded squares, and more aggressive masks. Look for clipped corners, uneven apparent margins, and a logo that seems to shift because its visual weight is asymmetric. Then reduce the preview to realistic launcher size. Large artwork can conceal weak contrast, tiny gaps, and excessive detail. IconCreator's free /tools/android-adaptive-icon-checker is the focused place to inspect adaptive behavior, and /tools/app-icon-previewer helps review an icon in broader presentation contexts.
Check Packaging Separately from Design
A visually correct source file can still be packaged incorrectly. Android projects define adaptive icons through resources that reference foreground and background drawables, with monochrome included where appropriate. Resource qualifiers and build tooling determine which devices receive which asset. Follow the current Android Studio and Android developer documentation for implementation, then inspect a built app on representative devices or emulators. The design review and the resource review answer different questions, so neither should replace the other.
Common Adaptive Icon Mistakes
Frequent problems include placing the logo too close to the edge, embedding the final launcher mask in the artwork, leaving transparent gaps in the background, using a foreground rectangle with no transparency, and treating the monochrome layer as a tiny detailed grayscale image. Another mistake is evaluating only a large design-board view. Icons live among other icons, so apparent scale and contrast matter as much as geometric correctness. A mark that dominates the full safe area can feel oversized beside neighboring apps.
Also avoid using adaptive layers to hide an unresolved composition. The background should support the foreground rather than compete with it, and movement should not expose awkward alignments. When adapting an established logo, simplify carefully instead of redrawing it beyond recognition. Compare the result with official brand assets, document any icon-specific adjustments, and retain editable source layers so future platform requirements can be addressed without reconstructing the design.
A Practical Final Checklist
Confirm that both required layers use the intended 108 by 108 dp geometry; the essential logo sits within the central 66 by 66 dp region; the background covers the full canvas; and no fixed outer mask has been accidentally baked in. Inspect foreground transparency, edge quality, contrast, optical centering, and legibility at small size. Review several masks and motion positions. If you supply monochrome artwork, inspect its silhouette under multiple tints and make sure it remains recognizable without color.
Finally, validate actual resources and a built application, not only exported pictures. Repeat the review after any logo, color, padding, or build-configuration change. Use /tools/app-icon-checker for a general asset review, /tools/google-play-icon-checker for the separate store-listing icon, and /tools/android-adaptive-icon-checker for adaptive layers. Google Play presentation assets and installed-app launcher resources serve different purposes, so meeting one set of expectations does not automatically validate the other.
Android Adaptive Icon FAQ
What size is an Android adaptive icon layer?
Android's adaptive-icon guidance defines each foreground and background layer on a 108 by 108 dp canvas.
What is the 66 by 66 dp region?
It is the centered critical logo region intended to remain visible across supported masks. Keep indispensable identity content within it.
Are foreground and background layers both required?
Yes. An adaptive icon uses separate foreground and background layers; the system combines and masks them.
Is a monochrome layer required?
No. It is optional, but it lets compatible Android experiences present a system-tinted themed icon.
Should I put a circular background in the source?
Do not bake in a launcher mask merely to predict the final shape. Android applies the device or launcher mask.
Is the Google Play icon the same as the adaptive launcher icon?
They are related brand assets but have different delivery contexts and requirements. Review each with its relevant guidance.
How can I test an adaptive icon?
Preview multiple masks, inspect layer movement and small-size legibility, review monochrome artwork, and validate the packaged app on devices or emulators.