SVG to Favicon Set
Convert an SVG into a complete favicon set, with the matching HTML snippet.
This tool generates PNG favicons at the sizes browsers and OS launchers actually use today. It does not generate a legacy favicon.ico (multi-image binary format). Modern browsers use the PNG link rels in the snippet below; favicon.ico is only needed for very old browser support.
What this tool does
Renders an SVG into PNG raster images at the sizes the modern web actually uses: 16x16
and 32x32 (browser tabs and bookmarks), 180x180 (Apple touch icon for iOS home screen),
192x192 and 512x512 (Android Chrome and the web app manifest). It also generates the
HTML <link> snippet you paste into your <head> to
wire the icons up. Rendering happens entirely in your browser via a canvas; the SVG
data is not uploaded.
How to use it
Paste the SVG source into the input box, or use the upload control to load an SVG
file from disk. Press Render PNGs. Each size shows a preview and a
Download button. Below the previews is an HTML snippet ready for the
<head>. Save each PNG into your site's static directory (commonly
/public or /static) and paste the snippet.
Common use cases
- Producing a complete favicon set for a new site without leaving the browser.
- Re-rendering favicons after a logo refresh.
- Verifying that a vector logo legibly downscales to 16x16 (the hardest size).
- Generating Apple touch icons after a brand color change.
- Producing the Web App Manifest icon set (192 and 512).
Common pitfalls
- 16x16 is brutal. A logo that looks great at 512 may be illegible at 16. Test the smallest size first; consider a simplified or wordmark-only variant for tab icons.
- External resources. If your SVG references external fonts or images by URL, the canvas may refuse to render due to cross-origin restrictions. Inline any required fonts as base64 or use SVG text with system fonts.
- Transparency vs background. If your icon has transparency, check how it looks against light and dark browser themes. A solid background circle behind the mark is often the safest choice.
Frequently asked questions
- Why no favicon.ico file?
- favicon.ico is a legacy multi-image binary format from the late 1990s. Modern browsers (Chrome, Firefox, Safari, Edge) all support PNG link rels with explicit sizes, which is what this tool generates. favicon.ico is only needed for very old browsers (IE9 and earlier). If you specifically need .ico, use a separate offline converter; this tool prioritizes the modern web.
- What sizes do I actually need?
- 16x16 and 32x32 for tab icons, 180x180 for Apple touch icon (iOS home screen), 192x192 and 512x512 for the Web App Manifest (Android Chrome). The set this tool generates covers all common cases. Other size variants (48, 96, 144) are mostly redundant; modern browsers pick the closest available size from the link rels.
- Why does my SVG fail to render?
- The most common cause is a reference to an external resource (font, image, stylesheet) by URL. Canvas refuses to render cross-origin content. Inline any required fonts as base64 in the SVG, replace any external image or use elements with inline content, and use system font names for any text. Another cause: SVG with embedded scripts or non-standard namespaces; canvas only renders the visual layer.
- Should my favicon have transparency or a solid background?
- A solid background is safest. Transparent favicons can become illegible against dark browser themes (a dark icon disappears against a dark tab) or light themes (a light icon disappears against a light tab). Apple touch icons are typically rendered with rounded corners and a solid background by iOS; if your icon has transparency, iOS may add a default background that clashes with your design.
- How do I include the favicon in my HTML?
- Paste the snippet the tool generates into your <head>. Save each PNG into your site static directory (commonly /public or /static) so the paths in the snippet (/favicon-16.png etc.) resolve. If your site is served from a subdirectory, adjust the paths accordingly.
- Can I use SVG as a favicon directly without rasterizing?
- Modern browsers support <link rel="icon" type="image/svg+xml" href="/favicon.svg"> and use the SVG directly, producing a sharp icon at every zoom level. PNG fallbacks are still useful for older browsers and for places where SVG is not supported (Apple touch icons must be PNG). The recommended modern setup uses both: SVG for browsers that support it, PNGs for the rest.
Cite this tool
For academic, journalistic, or technical references. Pick a format:
Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.