Icon Workbench

Open Icon Workbench · Usage guide · Report a problem

A free app icon preview tool for iOS and Android. Replace foreground and background images, test circular crops, align layers, and zoom or move both layers together. No install, account or build step. Images are processed in your browser.

Try the crop demonstration

The starter foreground has four large corner dots. Android starts at 150% so the round mask cuts them off; the Apple squircle keeps them visible. Reduce Android foreground size to 100% to bring the dots inside the safe circle. Reset preview restores the demonstration.

Align first, then zoom out

1. Replace the foreground and background with PNG, JPEG or WebP files. Transparent PNG works best for the foreground.
2. Set foreground size. Use Align the background to match background size and position to your foreground.
3. Use Linked zoom to zoom both layers in or out without changing their alignment. Move both shifts the aligned pair together. Each platform has independent controls.
4. Check crop and background coverage warnings. The full original background is retained, so zooming out can reveal scenery outside the starting crop.
5. Save preview PNGs, JSON settings and original images together.

The tool cannot invent background pixels beyond the image edges. Checkerboard shows transparency; it is excluded from exported previews. Uploads are limited to 25 MB and 8192 pixels per side. Invalid input preserves the previous image.

Features and limits

• Separate foreground and background pickers, with generic geometric placeholders.
• Independent Apple and Android size, blur, outline and directional shadow.
• Linked zoom and movement, plus background alignment controls.
• Circle, rounded-square and squircle previews; small-icon and blur comparisons.
• Foreground fit checks, including Android's safe circle; background bounds checks.
• Masked PNG previews, exact JSON settings and unchanged original image downloads.

Masks approximate platform shapes. Foreground fit includes outline but excludes shadow. Background coverage checks source bounds, not transparent pixels or blur. Previews are not store-ready asset packages. Complete native packaging and device checks in your app project. Settings include filenames, dimensions, SHA-256 identifiers and transforms, but no image bytes. There is no settings import or automatic session persistence. Review filenames and notes before sharing JSON.

Privacy and offline use

The editor does not upload images or notes and has no analytics, external fonts, accounts or dependencies. GitHub Pages receives ordinary requests when you open the hosted site. External links take you to other sites.

Download index.html and open it in a current Chrome or Edge browser to use the editor offline. The editor and placeholder art are in that single file. Download the repository if you also want the separate guide and documentation locally.

Development and verification

Edit index.html; no bundler or package install is needed. Serve the directory locally if desired:

python3 -m http.server 8765 --bind 127.0.0.1

The smoke test requires Node 24 and Chrome/Chromium, with no npm dependencies:

node tests/browser-smoke.cjs /path/to/chrome /tmp/icon-workbench-test-profile .
python3 tests/site-check.py

Use a new temporary browser profile path. The test owns and closes its headless browser. Reports and screenshots go in the ignored .artifacts/offline/ folder. It tests image replacement, fit/cropping, rendered layer alignment through linked zoom and movement, uncropped background recovery, invalid-input handling, resets, exports, clipboard fallback, responsive overflow and absence of editor requests. To test a deployment, append its full URL (including trailing slash); only the page and same-site favicon requests are allowed:

node tests/browser-smoke.cjs /path/to/chrome /tmp/icon-workbench-hosted-profile . https://lynxtwo.github.io/icon-workbench/

Static checks cover canonical URLs, metadata, JSON-LD, sitemap, internal links, Markdown discovery files and embedded source-image hashes. The social graphic is code-native SVG; regenerate its PNG with Chrome's headless screenshot command at 1200 by 630 pixels from assets/social-preview.svg.

Publishing and discoverability

GitHub Pages serves main at the repository root, with .nojekyll. No custom Actions workflow, backend or paid service is required. See search and publishing notes for crawlable content, metadata, the sitemap, optional llms.txt, and indexing limits.

To roll back, revert the relevant commit and push main; Pages republishes the previous version. Keep the guide, Markdown versions and settings version aligned with behavior changes. Bug reports should use generic artwork, not private logos.

License

Code, documentation and geometric placeholder artwork are MIT licensed. See LICENSE. Created by Daniel Boyd / LynxTWO. This is an independent tool; Apple and Android identify preview targets and do not imply affiliation.