App icon preview guide

Start with the crop demonstration

The placeholder foreground has four large corner dots. Android starts at 150% so the round crop visibly cuts them off. Reduce Android foreground size to 100% to bring them inside the safe circle. Reset preview returns to the demonstration.

Replace either image using the foreground or background picker. Transparent PNG is usually the best foreground format. PNG, JPEG and WebP inputs are supported up to 25 MB and 8192 pixels per side. Non-square foregrounds are centered without stretching.

Align images, then zoom out together

First set foreground size. Under Align the background, adjust background size and its left/right and up/down positions until its features line up with your foreground.

Under Zoom and move both layers, lower Linked zoom to zoom out. Both layers, their relative positions, outlines and shadows scale together around the preview center. Move both controls shift the pair without changing the alignment. Apple and Android settings are independent.

The original background is retained instead of permanently cropped to a square. Zooming out can reveal scenery beyond the starting view. Backgrounds with more surrounding artwork give you room to reframe; the tool cannot invent pixels beyond the image edges.

Checkerboard marks transparency. A coverage warning appears when the source image bounds no longer cover the preview. Increase background size, adjust its position, or zoom back in. Changing background alignment intentionally changes its relationship to the foreground; linked controls preserve that relationship.

Understand sizes and safe areas

At the tool's 100% reference size, Apple uses a 1024-pixel foreground canvas. Android uses a 48dp foreground canvas in a 108dp adaptive layer. These are this tool's starting dimensions, not a required logo size. Foreground size and linked zoom multiply together.

The Android preview uses a 72dp viewport and checks foreground plus outline against the centered 66dp safe circle. Shadow is excluded from the fit calculation. The Apple squircle and Android masks are approximations; launchers and platform effects can differ.

Movement is expressed as a percentage of preview width. Background blur is expressed in pixels of the 2048-pixel background reference; it follows background size and linked zoom. Outline and shadow values use the normalized 1024-pixel foreground.

Save the work and finish native packaging

Save preview PNG exports a masked 1024 by 1024 image. Empty areas remain transparent; the checkerboard is only a viewing aid. These are design previews, not a complete iOS or Android asset package.

Copy settings or Download settings saves JSON with source filenames, dimensions, SHA-256 identifiers, layer transforms, effects and fit results. The JSON does not contain image data. There is currently no settings import. Keep originals and settings together so you can reproduce the composition.

Save original foreground and Save original background preserve the exact selected files. The session is not saved automatically and is lost on reload or closing the page. Test final native assets in your app and on devices.

Privacy and offline use

Image decoding, resizing, compositing and hashing happen inside your browser. The editor does not upload your images or notes, use analytics, load external fonts, or require an account. GitHub Pages receives ordinary requests when you open the hosted site; following external links visits those sites.

To work offline, download index.html from the GitHub repository and open it in a current Chrome or Edge browser. The editor and starter art are contained in that one file. Download the repository if you also want the separate guide locally; external source links need an internet connection.

Saved settings include the filenames and notes you enter. Review those before sharing them. Invalid image input keeps the previous valid image.

Common questions

Is Icon Workbench free? Yes. The code, documentation and geometric placeholder artwork use the MIT license. You can reuse or adapt them with the license notice.

Does it generate new artwork? No. It previews the images you bring, with generic starter artwork provided.

Does it export an Android adaptive icon or an Apple Icon Composer project? No. It helps you choose a composition, then you create platform assets in your native build workflow. It does not simulate every launcher animation, themed icon, or Apple appearance.

Which browser should I use? Current Chrome or Edge. Canvas filter support is required for blur. Other browsers may render differently and have not been verified.

Platform references

Use the current official requirements when producing final assets: Android adaptive icons and Apple app icons.