App Icon Generator

iOS 18 changed what an app icon is

For most of the App Store's history, an app icon was one image. Since iOS 18, it is three: users can render their Home Screen in light mode, dark mode, or a custom tint, and each mode draws from different artwork. Apps that ship only a light icon get an automatically darkened or tinted version that frequently looks muddy or illegible — the icons that look sharp in every mode are the ones whose developers supplied deliberate dark and tinted variants. Xcode 16 asset catalogs make this easy to ship (three 1024 px images and the right Contents.json), and this tool generates exactly that structure so the folder drags straight into your project. One gotcha the tool handles for you: App Store submission rejects icons with transparency in the light 1024 px image, so transparent sources automatically get a background fill you can adjust in the Refine panel.

The tinted mode is the one that surprises developers: iOS asks for a grayscale image and maps its luminance into the user's chosen color over a dark background. Whether your mark survives that treatment depends on its contrast structure, not its colors — which is why previewing it matters. The preview row here renders the tinted mode the way iOS does, with a color picker to test different user tint choices — using the rounder corner mask that shipped with iOS 26's Liquid Glass redesign. Liquid Glass also introduced a layered .icon format built in Apple's Icon Composer; a plain PNG icon set like this one remains fully valid (the system applies the glass treatment automatically), and Icon Composer export is planned as a follow-up once the format stabilizes.

Android: adaptive layers, masks, and Material You

Android solved a different problem: every launcher masks icons into its own shape, so an adaptive icon is two layers (background and foreground) on a 108dp canvas of which only the central 66dp — the safe zone — is guaranteed visible. Android 13 added a third layer: a monochrome silhouette that powers themed icons, where the launcher tints your icon to match the user's wallpaper. All three layers are generated here at every density from mdpi to xxxhdpi, wired together with the ic_launcher.xml that references them, plus the legacy flat launcher icons for older devices and the 512 px Play Store listing icon.

Related tools

Preparing a launch? The App Store Screenshot generator handles your listing images with device frames and templates. If your source art isn't square yet, crop it precisely with the Image Cropper. Shipping a web app or companion site, the Favicon Generator produces the browser-side icon set — our guide to modern favicon sizes explains what's actually needed there.

Frequently asked questions

What are the iOS light, dark, and tinted icon modes?

Since iOS 18, users can switch their Home Screen icons between three appearances: Light (your normal icon), Dark (shown on a dark treatment, ideally with a transparent background), and Tinted (the user picks a color and iOS renders your icon from a grayscale version). Xcode 16 asset catalogs accept all three as appearance variants of a single 1024×1024 icon. This tool generates all three and shows you a preview of each before you ship.

Why is the tinted icon grayscale?

iOS renders tinted icons by taking a grayscale image you provide and mapping its luminance into the user-chosen tint color over a dark background. Apple recommends starting from a grayscale version of your icon and adjusting contrast so the important shapes stay visible. The tool auto-generates the grayscale variant for you, and the tint color picker in the preview shows how iOS will render it — upload an override if you want to hand-tune the artwork.

What is the Android adaptive icon safe zone?

Android adaptive icons are built from layers on a 108dp canvas, but launchers mask them into different shapes (circles, squircles, rounded squares) and only the central 66dp is guaranteed to be visible. Artwork outside that safe zone may be cropped by the mask or shifted by parallax effects. This tool insets your icon into the safe zone automatically (or lets you go full-bleed if your art is designed for it) and previews the three most common masks.

What is the monochrome layer for?

Android 13 introduced themed icons: when users enable them, the launcher renders a single-color silhouette of your icon tinted to match their wallpaper colors (Material You). That silhouette comes from the monochrome layer of your adaptive icon. The tool auto-generates one by converting your icon’s luminance to an alpha silhouette, and you can upload a hand-drawn override if the automatic version loses important detail.

Can I fix up my icon here, or do I need a design tool?

The Refine panel handles the most common source-image problems without leaving the page: scale and nudge the mark so it fills the tile properly, add a solid or gradient background (with swatches suggested from your image's own colors), tune brightness and contrast on the tinted grayscale, adjust the themed-icon silhouette threshold or invert it, and knock out a light background for the dark variant. One correctness note: the App Store rejects transparency in the 1024 px light icon, so if your source has alpha the tool applies a solid background automatically. For real artwork changes — masking, redrawing, cleanup — use a design tool and the override upload slots.

What about macOS, watchOS, and CarPlay icons?

All included. macOS is the one platform where the file itself carries the shape — macOS icons are a rounded square on a transparent margin (the Big Sur grid, still valid on macOS 26) rather than a full-bleed square — so the macos/AppIcon.appiconset in the zip ships all ten sizes with that shape pre-rendered, ready to drag into a Mac target. watchOS gets the single 1024 px icon modern watch targets need (the system applies the circular mask, previewed in the tool) plus the legacy pixel ladder, and the CarPlay 60pt @2x/@3x launcher icons are in the iOS all-sizes folder.

Does this work with Expo, React Native, or Flutter?

Yes — the zip includes a builders/ folder made for tools that generate densities themselves: single 1024 px files for the light, dark, and tinted iOS icons plus the Android adaptive foreground, background, and monochrome layers, alongside a ready-to-merge expo-app.json snippet (the ios.icon light/dark/tinted config and android.adaptiveIcon block) and a flutter_launcher_icons.yaml for Flutter. Bare React Native projects use the native ios/ and android/ folders directly.

Are my images uploaded to a server?

No. Decoding, resizing, variant generation, previews, and zip packaging all happen in your browser using the Canvas API. Your artwork never leaves your machine, which matters when you are working on unreleased apps and unannounced brands.

Do I still need all the individual iOS sizes?

For modern projects, no — since Xcode 14 you only need a single 1024×1024 icon (plus the dark and tinted variants) and Xcode generates every size at build time. The zip’s AppIcon.appiconset folder covers that. The full legacy matrix (20pt through 83.5pt at @1x/@2x/@3x) is also included in a separate all-sizes folder for older projects and cross-platform frameworks that ask for individual files.