Convert a PNG Icon to WebP
Shrink a transparent icon for the web without losing the alpha channel — useful when you are shipping dozens of them at once.
Free preview · No signup · ~10 seconds
Drop a PNG icon
PNG, JPG, WebP or SVG — up to 20 MB
Drop several at once — you can edit them all together in the app.
Runs entirely in your browser. Your image is never uploaded.
Where WebP icons make sense
It adds up across a set
On a single icon the saving is a few kilobytes and hardly worth the trouble. Across an interface shipping forty of them, WebP typically removes more weight than any other single change you can make to the asset pipeline.
Alpha is preserved
Unlike JPEG, WebP keeps the transparency an icon depends on. The glyph still drops onto any background without a box behind it.
Be careful at small sizes
Compression artefacts that vanish on a large image are proportionally larger on a 32-pixel glyph. Keep the quality at 90 or above for icons, and check the result at actual size rather than zoomed in.
Browsers only
This is a web-delivery format. Every current browser reads it, but native app bundles, extension manifests and app store submissions still specify PNG, and those requirements are not negotiable.
Sometimes PNG already wins
A flat two-colour glyph with a tiny palette can compress smaller as a PNG than as a WebP. For very simple icons, compare the two file sizes before switching the whole set.
Before converting a whole set
Compare against the PNG
For a flat two-colour glyph, PNG sometimes produces the smaller file. Check one representative icon before converting forty.
Manifests still want PNG
App store, extension and PWA icons are specified as PNG. Convert the ones you serve yourself, not the ones you declare.
Judge at display size
Zooming in makes WebP artefacts look worse than they are. Review the icon at the pixel size it will actually render.
How to convert a png icon to webp
Upload the PNG icon
Bring the transparent version — it stays transparent.
Set the quality
Start at 90 for icons and judge the result at the size you will actually display it.
Download the WebP
Free preview, or the full-resolution file in the app.
When to ship icons as WebP
Trimming an icon set
Cut the combined weight of dozens of interface glyphs at once.
Mobile web apps
Reduce what a phone downloads before the interface is usable.
Modern CMS themes
Match a theme that already serves WebP for everything else.
Icon-heavy dashboards
Lighten a page that loads many small graphics on first paint.
Or just ask
Describe the edit in your own words
Type what you want changed and the assistant does it on the canvas — each step lands as a layer you can reopen, so nothing it does is baked in.
No edits yet.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Fix Blurry or Fringed Edges on a Transparent PNG
Why your transparent PNG has a white halo, a grey fringe or soft edges — the four real causes, how to tell them apart in seconds, and the fix for each.
SVG vs PNG for Logos: Which File Do You Actually Need?
What SVG and PNG really are, where each one wins, why your developer keeps asking for the SVG, and the three files that cover almost every request.
What to DIY and What to Pay a Designer For
Where design money actually earns its return at pre-seed, where it doesn't, and the honest line between the work worth commissioning and the work worth doing yourself.
Convert your PNG icon to WebP
Lighter icons that still sit on any background.