Converting an SVG Favicon to a Raster Image

An SVG favicon can be converted to a raster image by rendering, or rasterizing, it at a fixed pixel size and saving the result as PNG. The PNG files can then be bundled into an ICO file if needed. The SVG stays your master artwork. The raster files are output copies made for places that cannot use SVG directly, or where a fixed bitmap is expected.

What is being converted

A favicon is the small icon a browser shows in tabs, bookmarks, history and similar interface spots. The same artwork often doubles as a home-screen or app icon. An SVG favicon describes that icon with shapes, paths and fills, so it scales without a fixed resolution. A raster favicon is a grid of pixels at one specific size, usually saved as PNG, or as ICO when one file holds several sizes.

Conversion goes one way. Rasterizing turns resolution-independent shapes into pixels at the size you choose. Turning a PNG back into SVG is a different process, called tracing, and it does not recover the original artwork. Keep the SVG as the source and regenerate raster files from it whenever the design changes.

Why raster versions are still needed

Many current browsers accept an SVG favicon, but support is not universal across every browser, platform and icon slot. Some contexts expect a bitmap. These include older browsers, certain operating-system shortcuts and pinned icons, and web app manifest icons. A common approach is to offer the SVG for browsers that support it and PNG or ICO fallbacks for everything else. The material supplied for this article contains no browser support data, so check current compatibility documentation before deciding which fallbacks you can drop.

Check the SVG before rasterizing

The .svg extension does not guarantee the file contains clean vector paths. Open the file in a vector editor or a text editor and confirm what it actually holds. These points directly affect the raster output:

• Embedded raster images: an SVG can wrap a PNG or JPEG inside an image element. Rasterizing such a file only resamples the embedded bitmap, so the output gets no sharper than that bitmap already was.
• Live text: text that depends on a font installed on your machine may render in a fallback font on another system or in another converter. Converting text to outlines before export avoids this.
• Effects and CSS: filters, masks, external stylesheets and media queries may be handled differently by different renderers. An SVG favicon that switches colors for dark mode through a media query will lose that behavior in a PNG, because each raster file captures only one state.
• Canvas and viewBox: the artwork should sit in a square viewBox with deliberate padding. Otherwise the exported icon may be cropped or off-center.

Sizes to export

Which sizes you need depends on where the icon will appear. Commonly documented conventions include 16×16 and 32×32 for browser tabs, sometimes with 48×48 inside an ICO file. Apple touch icons are typically 180×180, and web app manifests usually list 192×192 and 512×512. Treat these as common practice rather than a fixed requirement, and confirm them against the current documentation for each platform you target.

Output | Typical use | Format

Small tab icon | Browser tabs and bookmarks | PNG, or combined in ICO

Legacy fallback | Older browsers and default favicon lookup | ICO containing several small sizes

Touch icon | iOS home-screen shortcuts | PNG

Manifest icons | Installable web apps and Android home screens | PNG

Keeping small sizes legible

Converting at 16 or 32 pixels is a design decision as well as a technical step. Fine lines, small counters, thin type and subtle gradients often blur or disappear at these sizes. Many logos need a simplified favicon version, such as a single initial, a bolder mark or a reduced shape, rather than a scaled-down full logo. Preview each exported size at actual pixel dimensions. If a size looks muddy, adjust the vector artwork for that size instead of sharpening the bitmap afterward. Aligning key edges to the pixel grid at the target size also helps keep edges crisp.

Ways to do the conversion

Any tool with a reliable SVG renderer will do. Vector editors such as Inkscape, Illustrator or Figma can export PNG at a set pixel size. Command-line tools are useful when you need many sizes or want to repeat the process. The examples below show common command forms. Exact options vary by version, so check them against the documentation for the version you have installed.

# Inkscape 1.x: export a 32×32 PNG
inkscape favicon.svg --export-type=png --export-filename=favicon-32.png -w 32 -h 32

# librsvg: export a 180×180 PNG
rsvg-convert -w 180 -h 180 favicon.svg -o apple-touch-icon.png

# ImageMagick 7: combine PNG sizes into one ICO file
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico

Different renderers can produce slightly different results from the same SVG, especially with text, filters or CSS. Exporting each size from the SVG directly is generally preferable to resizing one large PNG, because the renderer can place edges for each target size. Converting through ImageMagick depends on which SVG delegate it is built with, so compare its output against a vector editor's export if the results look wrong. PNG preserves transparency. If you need a solid background, for example for touch icons where transparency may be filled in by the platform, add it in the artwork rather than relying on the converter.

Referencing SVG and raster versions together

Once the raster files exist, the page can offer the SVG alongside them. Browsers that support SVG favicons can pick that version, and other contexts fall back to the bitmaps. A typical set of declarations looks like this, with file names adjusted to your own:

<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Manifest icons are listed in the web app manifest file, not in these link tags. How browsers choose between several declared icons varies, so test in the browsers your audience actually uses.

Rights to the artwork

Being able to download an SVG logo does not mean you are allowed to modify it, rasterize it or use it as a favicon. The artwork, any fonts embedded or outlined in it, and the trademark it represents can each carry separate terms. For your own brand this is rarely an issue. For a client's or a third party's logo, confirm permission and any brand guidelines before producing and publishing icon files.

What this guide cannot confirm

No source material specific to this topic was supplied: no browser support tables, tool version details, test results or platform requirements. The sizes, commands and practices above reflect general, widely documented conventions, not measured results. Check current browser and platform documentation, and the documentation for your chosen tool, before treating any of them as final for a production release.