ICON WORKBENCH

Preview your app icon.
Find its balance.

A free app icon preview tool for iOS and Android. Bring your artwork, test circular crops, and align foreground and background with linked zoom.

Local images. No uploads. Works offline in Chrome or Edge. Save your settings before closing.

Loading placeholder artwork...

01 / Foreground

Your symbol or logo. A transparent PNG works best. Non-square images are centered without stretching.

Replace foreground image

Using the placeholder foreground.

02 / Background

A color, texture or photograph. The image starts centered without stretching. Keep extra scenery around the subject for linked zoom.

Replace background image

Using the placeholder background.

Starter example: the round crop cuts off the corner dots. Reduce Android foreground size to 100% to bring them back.

Foreground source

Normalized to a centered square
Transparency shown on a checkerboard

64 px

Apple preview

64 px

Android preview

64 px

Compare background blur

Your Android settings, with three background treatments.

Sharp

Blur 0

Light

Blur 8

Soft

Blur 20

Masks are illustrative. Android's safe-circle check excludes shadow. Verify final assets on devices before release.

Keep the experiment.

Save the settings with your original images. Preview PNGs include the illustrative mask and are not store-ready icon packages.

Apple decision Android decision Project notes

Your session is not saved automatically. Settings do not contain the image files.

Exact settings

How the framing works

Both previews use your background and centered foreground. At 100%, Apple uses a 1024px foreground canvas; Android uses a 48dp foreground canvas inside its 108dp adaptive layer. Size, outline and shadow scale together. Background blur uses the 2048px background layer. Outline and shadow controls use the 1024px normalized foreground. Background size and position align the source with your foreground. Linked zoom scales both layers around the preview center and preserves their alignment; linked movement shifts the pair together. Background edges may become visible when zooming out. Shape previews approximate launcher masks. A foreground that reaches beyond Android's safe circle can be cropped on some launchers. Upload PNG, JPEG or WebP files up to 25 MB and 8192 pixels per side. Images are processed in your browser. No image uploads, tracking, external fonts or accounts. Opening the hosted site makes ordinary page requests to GitHub Pages. Download this HTML file to use the editor offline.

Catch cropping before it reaches your app.

Icon Workbench compares a foreground image with Apple and Android icon masks. The starter's corner dots deliberately disappear in the circular preview: reduce Android foreground size to 100% to see why safe areas matter.

How to preview your icon

Replace the foreground and background with your own PNG, JPEG or WebP images.
Adjust foreground size, then use background size and position to line up the artwork.
Use linked zoom and movement to reframe both layers together. Check the crop and background coverage warnings.
Save your preview PNGs, JSON settings and original images. Finish native icon packaging in your app project.

Read the guide and common questions for safe areas, linked zoom, privacy and export limits.