ImageConver · Day 18 · Browser icon tool
Maskable Icon Generator
Preview square, circle, rounded-square, and squircle masks while keeping essential artwork inside the standardized 40% radius safe zone. Export 192×192 and 512×512 maskable PNG files with a manifest icon list.
Local processing. The source image remains in this browser tab. Keep the editable master and validate generated assets in the platform’s official tools.
Choose an image to begin.
Direct answer
What this page produces and where it fits
Preview square, circle, rounded-square, and squircle masks while keeping essential artwork inside the standardized 40% radius safe zone. Export 192×192 and 512×512 maskable PNG files with a manifest icon list. The preview helps evaluate geometric cropping but cannot reproduce every launcher, operating-system effect, or installation surface. Maskable artwork should use a full-bleed opaque background and needs separate testing from a normal purpose-any icon.
Icon work is a delivery system, not a single resize. A platform may use the same identity in a store, launcher, notification, settings screen, browser tab, installed web app, shortcut, or operating-system search result. Each context can apply a different mask, density, cache, compositing rule, or validation step. The generated package should therefore be treated as a tested derivative of an editable brand master.
Begin with clean source artwork. Keep the primary subject centered, remove unnecessary text, avoid hairline details, and judge the design at the smallest real display size. Do not add a platform’s outer rounded mask or system shadow to the source unless current official guidance explicitly requires that treatment. A large preview can hide problems that become obvious at 16, 32, or 48 pixels.
File dimensions alone do not prove correctness. Confirm color space, alpha behavior, file paths, MIME types, manifest or asset-catalog metadata, purpose declarations, naming, cache behavior, and actual device presentation. Preserve the source file and document which generator settings produced the reviewed release assets.
ワークフロー
A controlled four-step icon process
- 1
Inspect the source
Upload a high-resolution source and choose an opaque background.
- 2
Choose settings
Adjust artwork scale while keeping the identifying subject inside the safe-zone overlay.
- 3
Generate assets
Switch preview masks and inspect edge content at both target sizes.
- 4
Validate delivery
Generate the package, merge its manifest entries, and test installed results on real devices.
Visual quality
Fit, detail, transparency, and recognition
Framing and padding
Fit mode changes meaning. Contain keeps the complete source and can add background around it; cover fills the square and can crop edges. Padding is useful for centered marks, but too much creates a small-looking icon. Compare masks and tiny previews before accepting a value.
Small-size detail
Raster downsizing removes detail. Thin strokes, small counters, photographic textures, and type can blur or disappear. The best small icon is often a simplified drawing rather than a mechanically reduced version of marketing artwork. Review the actual pixel output at 100% scale.
Background behavior
Transparency is not neutral. A browser, launcher, store, or operating system may composite transparent pixels against a color you did not choose. Full-bleed platform artwork should use a deliberate background where guidance expects one, while formats such as ICO may intentionally retain alpha.
Color contrast and recognition matter across light, dark, tinted, and themed environments. Test the icon near competing icons and against multiple backgrounds. Automated generation cannot determine whether a mark is distinctive, accessible, legally cleared, or consistent with current brand rules.
Important limits
What automated icon generation cannot guarantee
- The preview shapes are representative and not an exhaustive device catalog.
- Artwork outside the safe zone can be removed by a user-agent mask.
- Transparent pixels may be composited onto an unexpected platform-selected color.
- Maskable icons do not replace general-purpose icons in every browser context.
Use cases
Where this page fits in production
Product delivery
Create adaptive PWA Home Screen artwork.
Compatibility work
Repair excessive letterboxing around a standard icon.
Quality review
Check logo safety under several common masks.
Developer handoff
Package maskable entries separately from ordinary manifest icons.
Implementation
Configuration, caching, and release checks
Keep generated files at stable, cache-aware URLs. A manifest or HTML declaration that points to a missing file is not rescued by having the right PNG on a developer’s computer. Verify HTTP status, content type, dimensions, file bytes, and same-origin or cross-origin behavior where relevant.
Treat configuration files as reviewable code. Inspect every manifest entry, asset-catalog record, folder name, scale factor, purpose token, and filename before merging. A generated fragment intentionally avoids guessing application names, start URLs, bundle identifiers, theme colors, or project settings that belong to the real application.
Cache invalidation deserves a release check. Installed web apps, browsers, launchers, build systems, and stores can retain old icon resources. Use deliberate versioned paths or cache policy, rebuild the application, reinstall when necessary, and distinguish a stale resource from an incorrectly generated resource.
Validate both geometry and workflow. Geometry includes cropping, safe zones, centering, edge treatment, and small-size clarity. Workflow includes correct source control, repeatable settings, platform configuration, build output, deployment, and rollback. A visually attractive file can still fail because the project references a different filename.
プライバシー
Local processing and asset handling
The browser reads the selected source with local file APIs, draws derivatives to canvas, encodes PNG data, and assembles the requested ZIP or ICO in memory. ImageConver does not send source pixels to an icon conversion endpoint in this workflow.
Local processing reduces transfer exposure but does not make a shared device private. Browser downloads, recent-file lists, synchronized folders, backups, extensions, and operating-system previews may retain copies. Use an approved workstation for unreleased brands or confidential product artwork.
Generated object URLs are temporary and are revoked when replaced or reset. Move reviewed assets into controlled project storage, retain the editable master, and close the tab after handling sensitive materials.
Common questions
Maskable Icon Generator FAQ
What is the maskable safe zone?
The guaranteed safe zone is a centered circle with radius equal to 40% of the icon size. Important content should remain inside it.
Why is the outer edge still useful?
It supplies full-bleed background and nonessential visual material that can fill different platform masks.
Which sizes are exported?
The package includes 192×192 and 512×512 PNG files, with manifest entries marked purpose maskable.
Should maskable icons be transparent?
A solid opaque background is safer because user agents may composite transparency onto a color you did not choose.
Can one icon use purpose any maskable?
The manifest permits multiple purpose tokens, but separate normal and maskable artwork is often easier to reason about and test.
Are source files uploaded?
No. Previewing, resizing, PNG encoding, manifest creation, and ZIP packaging remain local.
How do I validate the output?
Use browser developer tools, inspect the minimum safe area, install the PWA, and review several actual devices and launchers.
Primary references
Current platform documentation
- W3C Web Application Manifest specification
- web.dev: Adaptive icon support with maskable icons
- web.dev: Add a web app manifest
Last reviewed: October 20, 2026. Platform requirements and tooling change; verify release-critical assets against current primary documentation.