SVG to ICO / Favicon
Generate favicon-ready ICO files from SVG markup with size, background and padding controls. Export a real ICO binary locally without uploading your file.
Browser-based favicon export
Generate a favicon ICO file from SVG markup.
Paste SVG code, upload a file or try the built-in sample. Choose a favicon size and background, then generate a real ICO file locally in your browser — no upload required.
Local only
Real ICO binary
Favicon ready
PNG-embedded ICO
Drop an SVG file here
or paste SVG markup into the input editor below.
Could not generate this ICO
Please check the SVG markup and try again.
Animated SVG detected
The canvas captures SVG at t=0 as a static snapshot — animated elements that start with opacity="0" will appear invisible in the favicon. Remove the <animate> elements or use a static version of this SVG for best results.
Preview
Original SVG vs favicon preview
Original SVG
No SVG
Paste SVG markup or try the sample to preview the source.
Favicon preview
Waiting
Generate ICO to preview the favicon raster.
Processed locally
viewBox: —
Scripts: —
Events: —
External assets: —
Output: —
Input
SVG markup
Use a complete SVG document or inline SVG element. The export engine renders it to canvas locally in your browser and writes a real ICO binary.
Output
ICO export summary
Download controls become active after the browser generates a real ICO binary from your SVG.
How It Works
SVG to ICO renders SVG markup to a browser canvas at the chosen favicon size and builds a real ICO binary in memory. The ICO file uses the PNG-in-ICO format — a widely supported standard where a losslessly compressed PNG image is embedded inside the ICO container. This produces a genuine .ico file that browsers, operating systems and icon pickers recognise correctly. No file is sent to a server. The entire conversion runs client-side using the Canvas API and the DataView binary writing API.
Use Cases
- Generating a favicon.ico for a website so browsers display the icon in the address bar and tab
- Creating a browser tab icon from an existing SVG logo or brand mark
- Producing a transparent-background favicon so the browser tab adapts to light and dark UI themes
- Exporting a favicon at multiple sizes (16×16, 32×32, 64×64) to test appearance at different resolutions
- Converting an SVG app icon to ICO format for Windows desktop shortcut or application use
FAQ
What is a favicon?
A favicon is the small icon displayed by a browser in the address bar, browser tab, bookmark list and history. It helps users identify a website at a glance among multiple open tabs. The name comes from 'favorites icon' — the original context where browsers first used them. Favicons are typically square images between 16×16 and 256×256 pixels.
What is an ICO file?
An ICO file is a Windows image format designed to hold one or more images at different sizes and colour depths in a single file. Browsers read ICO files for favicons because the format can bundle multiple resolutions. Modern ICO files commonly embed PNG-compressed images, which is the format SVGTrim uses when generating your favicon.
Does SVG to ICO upload my SVG file?
No. SVGTrim processes favicon generation entirely inside your browser. SVG files never leave your device during ICO creation. The conversion uses the browser Canvas API to rasterize the SVG and a DataView buffer to assemble the ICO binary, all in local memory.
Is the output a real ICO file or just a renamed PNG?
It is a real ICO binary. The tool writes a proper ICONDIR header, an ICONDIRENTRY directory record, and embeds the rasterized image as a PNG data stream inside the ICO container. The file structure conforms to the ICO specification and is recognised as an ICO file by browsers, Windows Explorer and most image editors.
Can I create a transparent favicon?
Yes. Selecting Transparent background preserves any transparent areas in the SVG when the canvas is rasterized. Transparent favicons let the browser apply its own background colour behind the icon, which works well in both light and dark browser themes.
Which favicon size should I choose?
32×32 is the most versatile single-size favicon for modern browsers. Most browsers upscale 32×32 gracefully for higher-density displays. Use 16×16 to verify legibility at the smallest tab size, 48×48 for Windows taskbar icons, and 256×256 when you also need a high-quality Windows desktop icon. For production websites, linking both a 32×32 and 16×16 ICO or using an SVG favicon alongside the ICO covers the broadest range of browser and platform needs.
What does Keep aspect ratio do?
When Keep aspect ratio is on, the SVG is scaled to fit inside the selected favicon size while maintaining its original proportions. Any leftover space is left transparent (or filled with the chosen background colour). When off, the SVG is stretched to exactly fill the square canvas, which may distort non-square SVGs.
Why does the favicon look blurry at 16×16?
At 16×16 pixels, only 256 pixels are available to represent the entire image. Detailed SVGs with fine strokes, gradients or complex paths will naturally appear soft at this size. For the sharpest result, design your SVG icon with simple bold shapes, thick strokes and high contrast. The preview pane upscales the favicon so you can inspect the pixel detail before downloading.
How do I add the favicon to my website?
Place the downloaded favicon.ico in the root directory of your website and add the following link tag to the <head> section of each HTML page: <link rel='icon' type='image/x-icon' href='/favicon.ico'>. Most browsers also detect favicon.ico automatically when it is in the root directory, even without the link tag.