b2KIT

App Icon Designer

Design app icons with shape masks, rounded corners, and export at all required platform sizes.

Tested tool guide Tested browser tools Checked August 16, 2026

What App Icon Designer does, with a checked example

This tool takes one square source image, applies a shape mask - rounded rectangle, squircle, or circle - with an adjustable corner radius, and previews how each platform's launcher will actually clip it. From that master you export a batch of PNGs sized for iOS, from the App Store listing icon through iPhone and iPad home-screen sizes, and Android, adaptive icon density buckets plus the Play Store listing icon. The most common mistake: rounding the corners on the iOS master icon yourself. iOS applies its own corner mask at render time, so a pre-rounded 1024x1024 upload gets double-masked or rejected - the App Store master icon should stay a flat, unmasked square.

Worked example

A concrete input and expected output from the current implementation.

Input

108x108dp adaptive-icon foreground layer, Android export preset selected

Expected output

five PNGs: 108x108 (mdpi), 162x162 (hdpi), 216x216 (xhdpi), 324x324 (xxhdpi), 432x432 (xxxhdpi), plus a 512x512 Play Store listing icon

Android's adaptive icon canvas is 108dp square; multiplying by the standard density scale factors (1x, 1.5x, 2x, 3x, 4x) gives 108, 162, 216, 324, and 432 px, and the Play Store listing icon is a fixed 512x512 px regardless of device density.

How the result is produced

1

Shape mask preview

Corner radius and mask shape (rounded square, squircle, circle) are applied as a non-destructive clipping preview so you can see how a logo will look inside each platform's icon frame. Neither platform gets the mask baked into the exported PNG: iOS masks the icon at render time, so the App Store master stays a full square, and Android adaptive icons (API 26+) work the same way - the foreground and background layers export as unmasked squares, with the shape applied by the system or OEM launcher at render time, not baked into the file.

2

Batch size export

From the single master image, the tool scales and exports a set of PNGs named for their target: iOS sizes derive from Apple's point values (20, 29, 40, 60, 76, 83.5pt) multiplied by 1x/2x/3x scale factors, and Android sizes derive from the 108dp adaptive icon canvas multiplied by the standard density buckets (mdpi through xxxhdpi), plus the 512x512 Play Store icon and 1024x1024 App Store icon.

Good uses

  • assembling a full Xcode asset catalog or Android res density folders from one master logo before a build
  • previewing how a logo will actually look once clipped to a circle, squircle, or rounded square launcher mask before finalizing the design
  • producing the App Store 1024x1024 and Play Store 512x512 listing icons alongside the on-device sizes in a single pass

Limits and checks

  • the shape-mask preview approximates each platform's mask; actual rendering can vary slightly by OS version and by launcher, since Android OEM launchers apply their own masks, so confirm on a real device before submitting
  • iOS wants the App Store master icon as a flat, unmasked square - if you export a version with the rounded-corner mask baked in for that slot, Apple can reject it or it can appear double-masked on device
  • the export covers pixel and density sizing only; it doesn't check other store requirements such as forbidden alpha transparency on the iOS App Store icon or Android adaptive-icon safe-zone content placement

Common questions

Does the download include Xcode's Contents.json or an Android res folder structure, or just the images?

This reference can't confirm the packaging format without testing the current export directly. Treat it as producing correctly sized PNG files at minimum, and check the downloaded archive yourself for whether an asset-catalog or resource-folder structure is included before assuming one is.

Can I upload a non-square logo?

Every platform size in this tool's output is square, so a non-square source will need to be cropped or padded to a square before it's useful. If the tool doesn't force a square crop on upload, crop your source to a square yourself first so the mask preview and export match what the platforms expect.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools

Color Picker + HEX/RGB/HSL/CMYK

Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.

Print Color Preview

Preview how screen colors translate to print with CMYK simulation and proofing.

Font Preview Tool

Preview any Google Font at various sizes, weights, and with custom sample text.

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a visual editor and code output.

Color Palette Generator

Generate harmonious color palettes from a base color using color theory rules.

Color Blindness Simulator

Simulate how colors appear to people with various types of color vision deficiency.