SVG Favicon Generator
Generate a complete favicon set — favicon.ico plus PNGs at every size browsers, iOS, Android, and PWAs expect — from SVG markup, with ready-to-paste HTML. Runs entirely in your browser.
Source preview
Why generate favicons from SVG?
Starting from a vector source guarantees every generated size is rendered crisply at its native resolution — no blurry upscaling from a single small bitmap. This tool draws your SVG onto a canvas at each target size, exports a PNG, and assembles the smallest three sizes into a single favicon.ico using the modern PNG-in-ICO container that all current browsers support.
Frequently Asked Questions
Why do I need so many favicon sizes?+
Different platforms request different sizes: browser tabs use 16×16 or 32×32, Windows pinned sites use 48×48, iOS home screens use a 180×180 apple-touch-icon, and Android / PWA manifests reference 192×192 and 512×512 icons for app drawers and splash screens. Generating the full set up front means every platform gets a crisp icon instead of a browser-scaled approximation.
What is favicon.ico and do I still need it?+
favicon.ico is the original favicon format — a single file that can bundle multiple icon sizes together. Browsers and bookmark managers still request /favicon.ico by default even when modern <link> tags are present, so it is worth keeping as a fallback. The .ico this tool generates embeds 16×16, 32×32, and 48×48 PNG images in the modern Vista-style container, which every current browser and OS supports.
Where do I put these files and how do I reference them?+
Place favicon.ico and apple-touch-icon.png at your site root (e.g. https://example.com/favicon.ico — many browsers check this path automatically), and put the rest alongside it or in a folder of your choosing. Then add the generated <link> tags to your HTML <head> — copy them with the button below and adjust the paths to match where you uploaded the files. For PWAs, also reference the 192×192 and 512×512 PNGs from your web app manifest.
Is my SVG sent to a server?+
No. Every size is rendered with the Canvas API directly in your browser, and the .ico file is assembled from the resulting PNG bytes client-side. Your SVG markup and the generated icons never leave your device.
Related Tools
How to use
- Paste your SVG markup — a full favicon set renders instantly at six standard sizes.
- Download individual PNGs, the bundled
favicon.ico, or copy the ready-to-paste<link>tags. - Upload the files to your site root and paste the snippet into your HTML
<head>.