Build a PWA Icon Pack in the Browser: 8 Sizes, a Manifest and a README

I work on OnePassApps. We build browser studios that do their work in the tab instead of uploading your files, and Icon Studio is the one for icons: eight tools on one tab bar - SVG to PNG, PNG to ICO, Favicon pack, App icons, Resize set, Optimize SVG, Recolour SVG and Trim / padding.

The App icons tab is the one that produces a whole installable icon set rather than a single file: one image in, eight PWA sizes plus a manifest and a README, packed into one ZIP. So this is about what actually lands in that archive, and about what the tab does not do.

The page describes itself in one line: "Create icons and favicon assets on this device. Files stay in your active browser tab."

What the tab gives you

One panel, three steps. 01 Source - "No SVG or PNG yet. Drop one on the stage or browse for it. SVG up to 5 MiB, PNG up to 24 MiB." 02 Pack details - "Name the app for the manifest once an image is open. The pack holds 8 PWA sizes, 72 to 512 pixels." 03 Result - "A ZIP with 8 PWA PNG sizes, a manifest and a README."

The action button reads "Create app icon pack". Once an image is open the panel fills in: the file name with its type and dimensions, "8 sizes, 72 to 512 px", a Purpose field that read "any" in this run, and an "Also included" line reading "Manifest, README". The only text field is the app name for the manifest, and it read "App" in this run.

What came out

The source was a 512 x 512 PNG of 2.2 KiB, written by a probe script and dropped on the stage. The result panel reported:

probe-appicons-pwa-icons.zip
10 files - 18.6 KiB
Before   2.2 KiB  PNG
After    18.6 KiB ZIP
Created in 0.6 s

Then the eight icons, listed by size and file name:

72 x 72     icon-72x72.png
96 x 96     icon-96x96.png
128 x 128   icon-128x128.png
144 x 144   icon-144x144.png
152 x 152   icon-152x152.png
192 x 192   icon-192x192.png
384 x 384   icon-384x384.png
512 x 512   icon-512x512.png

And two more entries under "ALSO IN THE ZIP":

site.webmanifest   333 B
README.txt         109 B

The README is a single line, shown on the panel verbatim: "PWA PNG icon sizes 72, 96, 128, 144, 152, 192, 384, 512 were created with transparent backgrounds."

Ten files in the archive: eight icons, a manifest, a README. The panel also offers a Dark and a Light preview next to the ZIP, so you can see the icon against both backgrounds before you take the file.

The archive name follows the file you dropped in: the source was probe-appicons.png and the ZIP came out as probe-appicons-pwa-icons.zip.

What this tab does not do

It does not draw the icons. You supply one SVG or PNG and the pack resizes that image - the artwork is yours.

I read the manifest's size on the panel (333 B) but did not unpack the archive in this run, so I am not going to describe what is inside that JSON beyond the byte count.

The app name field is the only free-text input, and it feeds the manifest. In this run it read "App" because that is exactly what the probe typed.

Where it runs

Icon Studio is part of OnePassApps and it lives on the Icon Studio page.

Everything happens in the tab: the image is read in the browser, the sizes are rendered there, and the ZIP is written out on your own machine. Standard is free right now - $0/month, 100,000 credits every 30 days, no card required, and no automatic paid subscription.

Guides for the studios and the apps behind them are on the OnePassApps guides page.