How do I turn an SVG into a readable PNG favicon?
Use a simplified, square SVG mark, export it at the PNG dimensions required by your site, and inspect it at actual tab size. If the symbol collapses into a blur, simplify the vector artwork before exporting again. A high-resolution source does not make tiny lettering readable in a browser tab.
Convert your SVG to PNGSeparate export size from visible detail
The SVG viewBox controls how much space surrounds your mark. A symbol occupying only the middle of a square viewBox remains small inside the exported square PNG. Increasing the output dimensions also enlarges the empty margin. Work on a copy of the SVG if you need to tighten its canvas or simplify its paths.
| What you see | Inspect | Change |
|---|---|---|
| A tiny mark inside the tab | Empty margins in the root viewBox | Adjust the copied SVG canvas while leaving deliberate breathing room. |
| Fine lines vanish | Stroke width at displayed size | Make a small-size variant with bolder shapes rather than only exporting more pixels. |
| Dark mark disappears | Transparent PNG against tab themes | Try a contrasting mark or a purposeful background, then check light and dark browser themes. |
| Old icon still appears | Browser cache and the site's icon reference | Check the referenced file URL and test in a fresh context before changing the drawing again. |
Compare a simple mark at two sizes
This SVG uses a square viewBox, a solid rounded tile, and a thick diagonal cut. Paste it into the converter and export a small PNG, then repeat at a larger width if your site needs another asset. The two downloads are separate; this tool does not build a favicon bundle.
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<rect x="4" y="4" width="56" height="56" rx="14" fill="#087f8c"/>
<path d="M19 42 43 18M21 22h10M33 42h10" fill="none"
stroke="#fff" stroke-width="6" stroke-linecap="round"/>
</svg>The shape has no external font, linked image, or filter. Its colored tile remains visible on light and dark backgrounds, while the white strokes provide a small-size test. Compare it with your detailed logo in the same tab-sized preview; do not assume that the example meets a particular platform's icon specification.
Check the icon after it is linked
- Check your site's current icon requirements and decide the PNG dimensions you actually need. Keep a square source if a square icon is required.
- Paste the SVG or choose its file on the converter. Select Custom width and Keep ratio, then export one PNG at a time.
- Open each downloaded PNG and check pixel dimensions, edges, and background. A checkerboard preview indicates transparency, not a checkerboard embedded in the PNG.
- Add the PNG to your site's files and point its icon link at that file. Publishing and editing the site's HTML are outside this converter.
- Load the deployed site in a fresh browser context and inspect the tab icon at actual size. Repeat in another browser or theme if that matters to your visitors.
Favicon export questions
Will this create an ICO file or install a favicon?
No. It exports one PNG per conversion. Your site must reference the files you choose to publish.
Why is my icon still blurry after exporting a larger PNG?
At tab size, the browser still has few visible pixels. Reduce intricate detail in the source SVG and test the resulting mark at its actual display size.
Should the background be transparent?
That depends on the mark and where it appears. Test transparent and deliberate solid-background variants on light and dark tabs.