Guides › Android Adaptive Icons Explained: Foreground, Background, and Safe Zones
Android Adaptive Icons Explained: Foreground, Background, and Safe Zones
What adaptive icons actually are, why Android needs two layers instead of one image, and how to design a foreground that survives being cropped into a circle.
Before Android 8.0 (Oreo), an app icon was just one flat image. Every device showed it the same way, in whatever shape the manufacturer's launcher used — usually a rounded square. Adaptive icons changed that by letting the system itself decide the final shape, which means the icon can no longer be a single flat image; it has to be built from separable pieces the system can mask and animate independently.
Two layers, one icon
An adaptive icon is made of a background layer and a foreground layer, each its own full-size image, stacked on top of each other. The system applies a mask shape — circle, squircle, rounded square, or a manufacturer-specific shape — to both layers together, and can also apply subtle parallax or pulsing animations to the foreground independently of the background when the user interacts with the icon.
This is also what allows Android to render a consistent visual style across every app on a device, even when each app's icon was designed by a different team — the system, not the app, ultimately decides the outer shape.
Why the foreground needs a safe zone
Because the mask can crop fairly aggressively — a circular mask removes the corners of a square image, for instance — the foreground layer is drawn on a canvas noticeably larger than the final visible icon, with the actual logo confined to a smaller "safe zone" in the center. Google's own guidance puts the visible-content area at roughly two-thirds of the total canvas, leaving generous margin on every side so that no mask shape can clip essential parts of the logo.
Designers moving from flat icons to adaptive icons for the first time often make the mistake of drawing their logo edge to edge, the way they would for a normal square icon. On an adaptive icon, that all but guarantees clipping on circular or squircle masks — the fix is simply scaling the artwork down and centering it well inside the safe zone before exporting the foreground layer.
Choosing a background
The background layer is usually a flat, solid color, though it can be a subtle pattern or gradient. Because it sits behind the foreground and gets masked the same way, it should be simple enough that it doesn't distract from the actual logo, and its color should complement the foreground rather than competing with it.
Ready to generate your icons? Open FLogo Generator.