SVG to PNG for Favicons — All Standard Sizes Free
- Favicons need 6 standard sizes: 16, 32, 48, 180 (Apple), 192 (Android), 512 (PWA)
- Export each from the same SVG source with transparent background
- Or use our dedicated favicon generator that outputs all sizes at once
Table of Contents
A modern website favicon is not one file — it's six PNGs at different sizes, plus a manifest.json referencing them. The standard sizes: 16×16 (browser tab), 32×32 (browser bookmarks), 48×48 (Windows shortcut), 180×180 (Apple touch icon), 192×192 (Android home screen), 512×512 (PWA install). All exported from the same SVG source. Here's the fastest way.
The six favicon sizes you actually need
| Size | File name | Used by |
|---|---|---|
| 16×16 | favicon-16.png | Browser tabs |
| 32×32 | favicon-32.png | Bookmarks, Windows tile |
| 48×48 | favicon-48.png | Windows desktop shortcuts |
| 180×180 | apple-touch-icon.png | iOS home screen |
| 192×192 | android-chrome-192.png | Android home screen |
| 512×512 | android-chrome-512.png | PWA install, splash |
Legacy favicon.ico is still recommended for compatibility with old browsers and some search engines — build it with an ICO generator from the 16 and 32 PNGs.
Exporting all sizes from one SVG
- Open the SVG to PNG converter.
- Upload your logo SVG.
- Set Background to Transparent. Every favicon size needs alpha.
- For each size, enter the pixel value in Custom width and click Convert. Download each PNG with the right name.
- Repeat six times. Takes about two minutes total.
Or — use our dedicated favicon generator, which accepts your SVG once and exports all six sizes plus the ICO and manifest.json in one click.
Sell Custom Apparel — We Handle Printing & Free ShippingDesign rules for 16×16 favicons
A logo that looks great at 512×512 can turn into a blurry mess at 16×16. Rules for small favicons:
- Simplify at small sizes. Consider using a different SVG source for the 16/32 sizes — just the logo mark, no wordmark, no fine detail.
- Strong contrast. A favicon sits on a browser's tab bar — usually white or dark gray. Make sure your logo is readable against both.
- Avoid thin lines. Anything under 2 pixels at 16×16 disappears. If your logo has 1-pixel strokes at that size, thicken them for the small export.
- Skip gradients. Gradients compress badly at 16-32 pixels. Flat colors look sharper.
The HTML to reference all sizes
In your site's <head>:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="icon" type="image/x-icon" href="/favicon.ico">
Plus a site.webmanifest referencing the 192 and 512 PNGs for PWA installs:
{
"icons": [
{ "src": "/android-chrome-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Why not just use an SVG as the favicon?
Modern browsers support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Works in Chrome 80+, Firefox 41+, Safari 17+, Edge 80+.
But several places still need PNG:
- iOS Safari / Add to Home Screen — uses apple-touch-icon.png, not SVG.
- Android Chrome / Add to Home Screen — uses the 192 and 512 PNGs from the manifest.
- Old browsers (IE11, Chrome <80) — SVG favicon is ignored; falls back to favicon.ico.
- Google Search Console / Search Results — favicon in search results uses the 32×32 PNG or ICO.
Best practice: ship both. SVG favicon as primary, PNG set as fallback.
Generate All Favicon Sizes From One SVG
Drop your SVG, pick a size or use our favicon generator for all six at once. Free, browser-based.
Open Free SVG to PNG ConverterFrequently Asked Questions
What is the best size for a favicon in 2026?
Not one size — ship six: 16, 32, 48, 180, 192, and 512 pixels, plus a legacy favicon.ico. Each size targets a different platform. If you only ship one size, the others get upscaled or downscaled and look bad.
Can I use a transparent PNG favicon?
Yes, and you should. A transparent favicon adapts to both light-mode and dark-mode browser tabs. A favicon with a solid background stands out against the tab bar in an awkward way.
Does every browser support SVG favicons now?
Most do — Chrome, Firefox, Safari 17+, Edge. But iOS apple-touch-icon and Android manifest icons are still PNG-only in 2026. Ship both SVG and PNG for full coverage.
What resolution for Apple touch icon?
180×180 pixels. Apple recommended 152 until 2019, then 167, and finally standardized on 180. One 180×180 PNG covers all iPhone and iPad models.
