Resize an Icon to Multiple Sizes in the Browser, Without Uploading It
You have one logo or app icon and you need it at a dozen sizes: a website, a favicon set, an app bundle, a social preview. The usual fix is a resize website that asks you to upload the file first. Icon Studio does it in
You have one logo or app icon and you need it at a dozen sizes: a website, a favicon set, an app bundle, a social preview. The usual fix is a resize website that asks you to upload the file first.
Icon Studio does it in the browser tab instead. Its Resize set tool takes one SVG or PNG and writes a set of PNGs at the sizes you pick, packed into a single ZIP. The file never leaves the tab.
I work on OnePassApps, so here is what the tool actually does, with the numbers from a run I did in the tab.
What the panel asks for
The Icon Studio page lists eight tools: SVG to PNG, PNG to ICO, Favicon pack, App icons, Resize set, Optimize SVG, Recolour SVG, and Trim / padding. Resize set has two steps before the result.
01 Source reads: "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 Square PNG sizes reads: "Pick square sizes from 32 to 512 pixels, or a custom width and height, once an image is open."
Five presets are on offer - 32 x 32, 64 x 64, 128 x 128, 256 x 256 and 512 x 512 - alongside optional custom width and custom height fields, both in pixels. The panel also states how it handles a source that does not match the target you asked for: "Images keep their proportions, centred on transparent canvases of each size."
One detail worth knowing: the sizes come preselected. My run opened with 3 selected before I touched anything, and those three were the ones that ended up in the ZIP.
Running it
The action button is Create resize ZIP. I dropped a 512 x 512 PNG (2.2 KiB) onto the stage and pressed it. The result panel read:
- Before: 2.2 KiB PNG
- After: 3.8 KiB ZIP
- Contents: 3 files
- File name:
probe-resize-resize-set.zip - Created in 0.3 s
Then, in plain words: "Created 3 transparent PNG sizes: 64x64, 128x128, 256x256." The ZIP listing showed 64x64.png, 128x128.png and 256x256.png.
I did not take the panel's word for the image sizes. I captured the files the page actually produced and read the PNG header of each one: 64 x 64 (313 bytes), 128 x 128 (902 bytes) and 256 x 256 (2413 bytes). Three real PNGs, at the sizes the panel claimed.
Because the source was a square, every output was a square. The panel's own line about keeping proportions and centring on transparent canvases is what covers a source that is not square, and it is worth trying that case yourself rather than assuming a crop.
Where the files go
The result stage holds a Download ZIP button. The ZIP is assembled in the tab from the sizes you picked, so you get one download instead of five separate saves.
Two more things the page states, and the reason I use this instead of a resize site: "Nothing leaves this tab." and "Processing stays in this browser."
What it costs
Standard is free right now - $0 / month, 100,000 credits every 30 days, no end date set and no card required, with no automatic paid subscription. Existing paid subscriptions keep their terms. The Studios run locally in your browser, so the file itself is never the thing being charged for.
If you want the walkthrough
The OnePassApps guides walk through the rest of the Icon Studio tools, including the favicon pack and app icon packs that come out of the same page.
I work on OnePassApps. If you try Resize set with a source that is not square, I would like to hear what the canvas looks like - that is the case I did not get to prove here.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.