PWA Icon Sizes Guide

Plan PWA icons by separating general-purpose, maskable, monochrome, shortcut, and platform-specific artwork. A dependable baseline includes correctly declared 192×192 and 512×512 PNG icons, while installation quality depends on manifest paths, purpose values, safe zones, HTTPS delivery, and browser testing. This guide addresses web app manifest imagery. It does not make a site installable by itself, generate service workers, configure iOS touch icons automatically, guarantee app-store acceptance, or predict every browser and operating-system presentation.

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 recommended icon system 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.

Write down the supported operating systems, browser engines, application targets, project tooling, and distribution channels before selecting files. A list copied from an old blog can be internally consistent yet wrong for a current project. Official platform documentation and the project’s own build warnings are the controlling evidence.

Separate master artwork from delivery derivatives. The master remains editable and high resolution; platform files are reproducible outputs. Keep appearance variants and semantic layers distinct when the platform expects them. Do not ask a resize operation to invent foreground, background, monochrome, dark, or tinted design intent.

Use the table as a starting inventory, then remove assets the project genuinely does not consume and add only requirements supported by official documentation or validated target behavior. Every retained asset needs an owner, source, generation method, configuration reference, and test surface.

Run a release audit after integration. Confirm each generated file is present in the built package or deployed location, referenced by the correct metadata, served with the expected MIME type, and visible after a clean installation. Capture screenshots or build evidence for the supported target matrix.

Recheck guidance when platform tooling changes. Icon pipelines are unusually sensitive to new masks, appearance systems, asset-catalog formats, installation criteria, and store validation. Record the review date and do not present historical dimensions as timeless requirements.

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.