How to generate favicon in all sizes from svg online free
- Step 1Prepare a square SVG — The rasteriser draws your SVG onto a square canvas at each size with
drawImage(img, 0, 0, size, size)— there is no auto-padding. A non-squareviewBox(e.g.0 0 32 24) is stretched to fill the square and will look distorted. Fix the aspect ratio first with svg-viewbox-fixer (add padding to square the viewBox) so the icon stays proportional. - Step 2Upload the SVG or paste its source — Drop a single
.svgfile onto the upload area, click to browse, or paste the SVG markup into the source box. Pasted markup is validated — it must parse as a real<svg>root with no XML errors, or you'll get an 'Invalid SVG' message before processing starts. - Step 3Click Process SVG — There are no options to configure — Favicon Master has no settings panel. One click rasterises all thirteen sizes on Canvas, packs the ICO, and zips everything. Free tier sees a Pro paywall here; this is a Pro-plan tool.
- Step 4Download the ZIP — The output is a single archive named
<yourfile>-favicon-package.zip. Inside:favicon.ico,icon-16.pngthroughicon-512.png, your original<yourfile>.svg,manifest.json, andREADME.html. - Step 5Copy the link block from README.html — Open
README.htmlin a browser — it shows the exact<link>tags inside a<pre>block. Copy them into your page<head>. Note the SVG<link>points at/<yourfile>.svg(your source filename), so rename your file to something stable likefavicon.svgbefore generating if you want a tidy URL. - Step 6Deploy the files to your site root — Drop
favicon.ico, the PNGs, your.svg, andmanifest.jsonat the web root. Browsers fetch/favicon.icoand/manifest.jsonfrom/by default; the PNG and SVG links in your<head>resolve relative to root as written in the README snippet.
What lands in the ZIP
Exact contents of the generated <stem>-favicon-package.zip, where <stem> is your uploaded filename without extension. This is fixed — the tool exposes no options to change it.
| File | What it is | Notes |
|---|---|---|
favicon.ico | Real multi-resolution ICO with three frames | Contains the 16, 32, and 48px renders as true-colour (32bpp) PNG-in-ICO frames in one container |
icon-16.png … icon-512.png | Thirteen standalone PNG rasters | Sizes 16, 32, 48, 57, 76, 96, 120, 144, 152, 167, 180, 192, 512 — each a square PNG |
<stem>.svg | Your original SVG, copied verbatim | Byte-for-byte the file you uploaded — the modern scalable favicon source |
manifest.json | Web app manifest | References icon-192.png + icon-512.png; theme_color and background_color are both #ffffff; display is standalone |
README.html | Reference page with the <link> snippet | The head tags rendered inside a <pre> — copy them into your own <head>; it is not a drop-in head file |
The link block written into README.html
The exact <link> tags the tool emits. <stem> is your source filename without extension — the SVG link uses your filename, not a generic favicon.svg.
| Link tag | Purpose |
|---|---|
<link rel="icon" href="/favicon.ico" sizes="any"> | Legacy + universal fallback (the multi-res ICO) |
<link rel="icon" type="image/svg+xml" href="/<stem>.svg"> | Modern scalable favicon for current browsers |
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> | 32px tab raster for browsers preferring PNG |
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16.png"> | 16px raster for high-density-aware fallbacks |
<link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png"> | iOS home-screen icon |
<link rel="manifest" href="/manifest.json"> | Points PWA installers at the 192/512 icons |
Cookbook
Concrete runs showing what the tool produces, including where its no-options, stretch-to-square behaviour shows up.
Square logo → full package
The happy path: a square-viewBox SVG gives clean, proportional icons at every size with transparency intact.
Input: logo.svg (viewBox="0 0 64 64", transparent bg) Process SVG → logo-favicon-package.zip favicon.ico (16/32/48 frames) icon-16.png … icon-512.png (13 files) logo.svg (your original) manifest.json README.html Result metrics: Sizes generated: 13 ICO sizes: 16, 32, 48 Format: ICO + PNG + SVG
Non-square SVG gets stretched, not padded
Because rasterisation draws onto a square canvas with no padding, a wide or tall viewBox is distorted. Square the viewBox first.
Input: wordmark.svg (viewBox="0 0 96 32") Process SVG → every icon-N.png is squashed 3:1 into NxN (drawImage stretches 96x32 onto a square canvas) Fix first: 1. svg-viewbox-fixer → add padding to square it (e.g. 0 0 96 96) 2. then run Favicon Master on the squared file
Paste source instead of uploading a file
You can paste raw SVG markup. It is validated before processing; only a parseable <svg> root is accepted. The download stem becomes 'input'.
Paste into the source box:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="#6366f1"/>
</svg>
Process SVG → input-favicon-package.zip
(README.html references /input.svg — rename if you want
a cleaner URL; better to upload a named file)Wiring the links into your <head>
Copy the block from README.html. The SVG link uses your filename, so name the file before generating if you want /favicon.svg.
<head> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/icon-16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png"> <link rel="manifest" href="/manifest.json"> </head> (uploaded the source as favicon.svg, so the SVG link is tidy)
Shrink the source SVG before generating
The original SVG is copied into the ZIP verbatim and shipped as your scalable favicon, so a bloated editor export ships as-is. Minify it first.
Editor export: brand.svg (8.4 KB, Inkscape metadata + groups) 1. svg-pro-minifier → brand.svg (1.9 KB, same render) 2. Favicon Master → brand-favicon-package.zip (the /brand.svg in the package is now the 1.9 KB version)
Edge cases and what actually happens
Non-square viewBox uploaded
Distorted by designRasterisation uses drawImage(img, 0, 0, size, size) with no padding, so a non-square SVG is stretched to fill each square icon. There is no option to pad. Square the viewBox first with svg-viewbox-fixer, then generate.
Looking for a background-colour or padding control
Not supportedFavicon Master has no settings panel at all — no background picker, no padding percentage, no size selection. The canvas is cleared (transparent) before each draw, so a transparent SVG stays transparent. If you need a solid backdrop, bake a <rect> fill into the SVG before uploading.
Free-tier user opens the tool
Pro requiredFavicon Master is a Pro-plan tool. On the free tier the page shows an upgrade overlay instead of the uploader. Generation, the runner path, and larger file limits all require Pro or above.
Pasted markup isn't valid SVG
Invalid SVGPasted source is parsed before anything runs. If the root element isn't <svg> or the XML has a parse error, processing stops with 'Invalid SVG — could not parse the pasted content as valid SVG XML.' Fix the markup or upload a file the editor exported.
SVG references an external font or image
May render blankCanvas rasterisation loads the SVG as an <img>; external resources like web fonts referenced by URL or xlink:href to remote images often don't load in that context, so <text> can vanish or images go missing. Convert text to paths with svg-font-to-path and inline assets before generating.
File larger than your tier cap
RejectedPer-job size caps apply before processing: 5 MB on free, 50 MB on Pro, 2 GB on Developer. An oversized file throws a tier-limit error. Icon SVGs are tiny, so this almost never triggers — but a giant traced illustration could. Run svg-pro-minifier first if needed.
Expecting a Windows tile / browserconfig.xml
Not generatedThe package covers favicon.ico, PNG rasters, the SVG, and manifest.json — there's no browserconfig.xml and no 150px tile. Modern Edge uses the web manifest, so this is rarely needed; if you specifically need legacy Windows tiles, author browserconfig.xml by hand.
manifest.json theme colour is white
By designThe generated manifest.json hard-codes theme_color and background_color to #ffffff, with name set to your filename stem and display: standalone. There's no UI to change these — edit the JSON after download to match your brand splash colour.
Browser blocks Canvas / toBlob
Rasterisation failedRasterisation needs a working Canvas 2D context and toBlob. In a hardened or headless context where these are unavailable, the tool throws 'Canvas 2D context unavailable' or 'Failed to rasterise SVG'. Run it in a normal desktop browser tab.
Frequently asked questions
What exactly is in the downloaded ZIP?
A real favicon.ico (16/32/48 frames), thirteen PNGs from icon-16.png to icon-512.png, a verbatim copy of your source SVG, a manifest.json, and a README.html containing the <link> snippet. The archive is named <yourfile>-favicon-package.zip.
Which sizes does it generate?
Thirteen PNG sizes: 16, 32, 48, 57, 76, 96, 120, 144, 152, 167, 180, 192, and 512px. The 16, 32, and 48px renders are also packed into the multi-resolution favicon.ico. The 180px PNG is your apple-touch-icon; 192 and 512 are the PWA manifest icons.
Is the favicon.ico a real multi-resolution ICO?
Yes. It's a genuine ICO container holding three frames (16/32/48) as true-colour 32-bit PNG-in-ICO images — the modern, valid way to build an ICO. It is not a single PNG renamed with an .ico extension.
Can I set a background colour or padding?
No — the tool has no options at all. The canvas is cleared (transparent) before each draw, so a transparent SVG stays transparent. For a solid background or breathing room around the mark, edit the SVG before uploading (add a <rect> fill, or pad the viewBox with svg-viewbox-fixer).
Why does my non-square icon look stretched?
Rasterisation draws the SVG onto a square canvas with drawImage(img, 0, 0, size, size) and no padding, so a non-square viewBox is stretched to fill the square. Square the viewBox first — svg-viewbox-fixer can add padding to make it square — then generate.
Does it preserve transparency?
Yes. Each PNG is drawn onto a freshly cleared (transparent) canvas, so a transparent SVG produces transparent PNGs and ICO frames. No white box is baked behind the logo.
Is the file generated a site.webmanifest?
It's named manifest.json, not site.webmanifest — the content is the same web-app-manifest format. It references icon-192.png and icon-512.png, with theme_color and background_color set to #ffffff and display: standalone. Edit it after download if you want different values.
Why does the SVG <link> point at my filename and not favicon.svg?
The tool copies your original SVG into the ZIP under its own name and the README snippet links to /<yourfilename>.svg. If you want a clean /favicon.svg URL, rename your source file to favicon.svg before uploading, or update the link tag yourself.
Do I still need a favicon.ico in 2026?
It's still worth shipping. Some RSS readers, bookmarking apps, and older or enterprise browsers request /favicon.ico from the root. Modern browsers prefer the SVG or larger PNGs, but the multi-res ICO this tool builds guarantees no broken icon in legacy contexts.
Is my SVG uploaded to a server?
No. Favicon Master rasterises and zips everything in your browser using Canvas — zero bytes leave your machine. On Pro with a paired local runner, the same job can run on your own machine via the runner; it still never reaches JAD's servers.
Why does the page show an upgrade prompt?
Favicon Master is a Pro-tier tool. On the free plan the uploader is replaced by a Pro overlay. Upgrade to Pro (or higher) to generate packages and to unlock the larger 50 MB per-file limit.
I need an app icon set for the App Store and Play Store too — same tool?
No — that's a separate tool. svg-app-icon-gen produces the iOS AppIcon.appiconset (with Contents.json) and Android mipmap-* density folders plus the 1024 and 512 store icons. Favicon Master is for web favicons; the app-icon generator is for native app bundles.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.