To generate a favicon from an SVG file, first rasterize the SVG to a PNG or WebP, then run the resulting raster through the Favicon Generator. The Favicon Generator accepts PNG, JPEG, and WebP only and rejects SVG inputs directly — SVG and animated sources are excluded to avoid scriptable vector content and ambiguous frame selection. Once the source is a static raster, the rest of the workflow produces standard square PNG icons and matching HTML link lines, all handled inside the browser tab without uploading the image to a server. The center-crop math is the same as it would be for any source: the generator takes the largest centered square from the middle of the decoded image, then draws each requested size onto its own canvas and exports an image/png Blob. Files arrive with names such as favicon-32x32.png, and the matching HTML lines use the standard rel=icon relationship with an image/png type and the exact square sizes value, so the assets and markup stay aligned.
Why the Favicon Generator Doesn't Accept SVG Directly
The technical reason is that an SVG can carry executable JavaScript, animation tags, foreign object references, and external font links, and the browser would have to flatten all of that to a static raster before the favicon code path could safely handle it. Rather than silently misbehave on those inputs, the tool rejects them up front; if a source is rejected, the documented recovery is to convert it to a supported static raster format before trying again. That extra step is what the rest of this article walks through.
The practical reason is even simpler. A favicon is a fixed set of pixel files, not a re-renderable graphic. A 32x32 favicon saved as favicon-32x32.png contains exactly 1024 pixels of color, and no browser will re-vectorize those pixels on the fly to recover geometry from the original SVG. Once a small icon is downloaded, the browser displays it as-is at the requested size. So rasterizing your SVG once at a high resolution is the right move, and PNG or WebP is the right output because both can preserve transparency that an SVG already implies.
Convert the SVG to a PNG or WebP in Your Browser
The first real step is converting the SVG into a static raster that the favicon tool can read. Open an SVG-to-PNG converter in your browser tab and load the file from disk; pick a high output size, such as 512 or 1024 pixels on the longer side, so the source still has enough detail when the favicon step later crops and shrinks it. If your SVG already has a transparent background, keep transparency on the output; if it has a solid colored background, rasterize against white for predictable inspection later. PNG keeps the alpha channel that an SVG carries; WebP gives similar transparency at a smaller file size. The point is to leave the converter with one local raster file that the Favicon Generator will accept.
A common mistake at this stage is rasterizing at exactly 32x32 because that is the favicon size the reader remembers. By the time the favicon tool runs, that small source has already lost most of the detail the 32-pixel output would otherwise keep. Start as large as you reasonably can — at least 512 pixels on the longest side — and let the favicon step handle the downsampling. The result is more accurate because the favicon tool draws each requested size from the same high-resolution source, rather than from a small intermediate preview.
For step-by-step coverage of the conversion itself, see our guide on converting SVG to PNG or JPG in your browser. That article focuses on the rasterization step alone and pairs cleanly with the favicon workflow described below.
Generate Square Favicon Files From the Rasterized Image
Once the SVG is sitting on disk as a PNG or WebP, the rest of the workflow is a short sequence in the Favicon Generator. The tool runs entirely in the current browser tab; the source image is decoded locally, drawn with the HTMLCanvasElement API, and never uploaded to a server. The steps below assume you already have a rasterized source.
- Open the Favicon Generator in your browser tab and pick the PNG, JPEG, or WebP file you just created. Choose a source whose main subject sits near the center of the canvas — the generator takes the largest centered square from the middle before resizing, so a logo already framed in the middle will lose nothing.
- Tick the square PNG sizes you want to publish. The tool supports 16, 32, 48, 64, 128, 256, and 512 pixel outputs, and you can select as many or as few as you need. Most sites only need 16, 32, and 48; adding 64 or 128 gives retina browsers a sharper pick.
- Trigger the generation. Each selected size is rendered independently from the decoded source at its natural dimensions, then exported as an image/png Blob with a filename such as favicon-32x32.png. The preview pane is a visual check only — the download links deliver the exact pixel sizes named in the link text.
- Download the files you actually plan to ship. Save each one to a predictable location; later you will move them to the matching paths in your site root.
A quick worked example. Suppose the rasterized source is 1200x800 (a landscape logo). The largest centered square is the smaller dimension, 800 pixels on a side. The crop therefore removes (1200 − 800) / 2 = 200 pixels from the left edge and 200 pixels from the right edge, leaving an 800x800 square. That 800x800 square is then drawn onto a 32x32 canvas, so every pixel in the output corresponds to 800 ÷ 32 = 25 source pixels averaged by the browser's resampling step. Knowing this ratio helps you predict whether a thin line in the original will still be visible at small sizes — if a line is only one source pixel wide in the 800-pixel square, it will average with its neighbors and may disappear in the 32-pixel output.
Available Output Sizes at a Glance
The table below lists every square size the Favicon Generator can export, paired with the format it writes. Each entry corresponds to one independent render from the decoded source, not a rescaled preview.
| Selected size | Output format |
|---|---|
| 16 × 16 | image/png |
| 32 × 32 | image/png |
| 48 × 48 | image/png |
| 64 × 64 | image/png |
| 128 × 128 | image/png |
| 256 × 256 | image/png |
| 512 × 512 | image/png |
Check the Smallest Files at Actual Size
This is the step most beginners skip, and it is the one most likely to catch a broken favicon before it ships. Open the 16x16 and 32x32 downloads in any image viewer and zoom to 100 percent — not fit-to-window. Browser smoothing is enabled during the canvas resize, so thin strokes and tiny lettering can soften at the smallest sizes, and a logo that looks crisp at 256 pixels can turn into a gray smudge at 16. The fix is rarely more code; it is usually a thicker stroke in the source or a simpler mark for the smallest sizes.
Also pay attention to the center crop. The generator does not give you an interactive cropper; if the subject of your SVG was sitting off to one side, that detail has already been cut. A simple test: open the rasterized source at 100 percent and mentally draw a square around its center — anything outside that square is not in the favicon. If the cut matters, return to your source, re-center the subject, re-rasterize, and re-run the favicon step.
If transparency was preserved through the rasterization, look at the smallest files against both a white and a dark browser tab background. Pale edges and thin outlines can vanish on light backgrounds and look like halos on dark ones; the source image carries that limitation, not the tool.
Add the HTML Link Lines to Your Site's Head
Each generated file ships with a matching link snippet that points at it. The format follows the standard rel=icon relationship documented in the HTML specification, an image/png media type, and a square sizes token that matches the filename. A typical pair looks like this for two of the smaller sizes: <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> and <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
Paste the lines for only the files you actually plan to place on the site. Keep the image/png media type and the exact sizes token the tool wrote for you — both matter because browsers use them to pick a resource. If your asset directory is not the site root, edit each href so it resolves to where the file actually lives, for example /assets/favicon-32x32.png. Drop the lines into your page's head, upload the PNG files to the matching paths, and reload.
You can publish several sizes at once and let the browser choose; this is the recommended approach because it lets one browser pick a 16-pixel icon while another picks a 32-pixel or 64-pixel icon for high-DPI tab surfaces. The exact icon a particular browser, bookmark surface, or operating system finally displays is browser behavior, not a guarantee from the tool — clear the site data or the browser cache when an old icon remains visible after deployment.
Limits and Edge Cases Worth Knowing
A few constraints are easy to miss because they do not show up until you hit them. The input is limited to PNG, JPEG, and WebP files up to 25 MB by compressed size; after the browser has decoded the source, the tool rejects images above 40 million pixels before allocating the output canvases. That post-decode budget reduces the canvas memory work, but it cannot prevent the browser's initial image decode from using memory or failing on an unusually large or malformed file. Compressed file size alone does not describe decode memory, which is why an SVG exported at a small file size can still trip the pixel-count check if you rasterize it to 8000 pixels on a side.
The output is intentionally narrow. The tool produces square PNG browser favicons and matching HTML snippets. It does not produce an ICO container, an SVG icon, an Apple touch icon, an Android icon set, a pinned-tab asset, a web app manifest, or a platform-specific package. It does not add transparency to an opaque source, and it does not remove a background automatically. If your site needs an .ico archive or a manifest, generate the PNGs here and finish the rest of the packaging with a tool built for that step.
Object URLs used for previews and downloads are revoked when results are replaced or the page closes, so a stale preview link from a previous run cannot be downloaded after you regenerate. Stale asynchronous render jobs are also discarded in favor of a newer selection. Treat each tab session as self-contained: regenerate before downloading, and download promptly.
For a dependable publishing workflow, the shape that always works is the same. Rasterize the SVG to a high-resolution PNG, run that PNG through the Favicon Generator, inspect the 16 and 32 pixel files at 100 percent, upload the chosen files to your site, paste the matching link lines into the head, and verify the deployed page source and the network tab. Each step is a few clicks, none of them upload the source, and the deliverables — square PNG files plus matching HTML icon links — slot straight into a normal web project.