How do I export a sharp app icon from SVG to PNG?
Start with a square SVG canvas, keep the icon away from its edges, and export a PNG at the exact pixel size your destination requests. Inspect the downloaded file at both its full size and the small size where people will actually see it. A larger export alone cannot make fine details readable when the icon is reduced.
Preview and convert your iconSeparate canvas size from visible symbol size
A 512 by 512 PNG can still contain a tiny icon if the drawing occupies only the center of a large SVG viewBox. Before changing resolution, look at where the visible geometry begins and ends relative to the square canvas.
| What you see | Check in the SVG | Next step |
|---|---|---|
| Icon is tiny inside the PNG | Large empty margins in the root viewBox | Adjust a copy of the SVG canvas or enlarge the artwork while preserving deliberate padding. |
| Edges or shadow are cut off | Strokes and filters extend beyond the viewBox | Give the artwork enough room before rasterizing. |
| Fine lines vanish at small size | Detail is thinner than the final display can show | Use a simplified small-size variant of the vector artwork. |
| Unexpected colored square | Background setting or an SVG background shape | Choose transparency or a solid color based on the destination requirement. |
Do not assume a platform's required icon size or transparency policy. Read the destination's current asset specification, then enter that width in the converter. This page describes an inspection method, not a universal app-store preset.
Try a square SVG with visible safety space
This sample uses a square canvas and leaves space around the mark. Paste it into the converter, preview it, then export one PNG. The outer square is a visible background in the SVG; the area beyond it is transparent unless you select a solid output background.
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"
viewBox="0 0 256 256">
<rect x="24" y="24" width="208" height="208"
rx="40" fill="#087f8c"/>
<circle cx="128" cy="128" r="62" fill="#ffffff"/>
<path d="M96 129l23 23 44-50" fill="none"
stroke="#ed5b2d" stroke-width="15"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>At 256 pixels, the colored square runs from pixel 24 to 232 in both directions, leaving 24 pixels of canvas space on each side. That margin is intentional in this test. If a destination demands edge-to-edge color, edit the SVG itself; selecting a larger PNG does not remove the margin.
Inspect each required size independently
- Find the destination's actual pixel dimensions and background rules. Make a copy of the SVG for any necessary changes.
- Confirm the canvas is square when a square asset is required. Compare the visible symbol bounds with the viewBox, including strokes and shadows.
- Paste the SVG or choose its file. In Output settings select Custom width, enter the required width, and keep the ratio. Set the background to transparent or solid as required.
- Convert and download one PNG. Open that file and verify its pixel dimensions, outer edges, and apparent padding.
- Repeat for another requested size. This tool exports one PNG at a time; it does not generate a multi-size icon package.
Icon export questions
Should every app icon have a transparent background?
No. The destination decides. The converter can keep transparency or add a solid background, but a background shape already inside the SVG remains part of the drawing.
Will a large PNG always look crisp when shown small?
No. Downscaling reduces available pixels. Tiny text, thin strokes, and closely spaced shapes can become indistinct even if the original SVG is sharp.
Can I download all icon sizes at once?
No. This site converts one SVG to one PNG per export. Enter each required width and download each result separately.
Check the icon's shape and padding at its final size.
Open the SVG to PNG converterPublished October 13, 2026.