Favicon generator
Turn one SVG into the complete favicon set: a real favicon.ico with 16, 32 and 48 px inside, the apple-touch icon, the two manifest PNGs, and the head markup to reference them. Rendered in your browser — nothing is uploaded.
Runs entirely in your browser — nothing is uploaded, no account needed.
If the mark reads badly at 16 px, simplify it in the editor first — favicons are the one place where less drawing is more icon.
How it works
The SVG is rendered onto square canvases at 16, 32, 48, 180, 192 and 512 pixels, contain-fitted and centred, with optional padding. The three small sizes are packed into a single favicon.ico — a hand-written ICO container carrying PNG-compressed images, which every browser and Windows since Vista reads. The apple-touch icon is always composited onto the background colour, because iOS fills transparency with black. Alongside the images you get the four <link> tags and a minimal site.webmanifest.
The set rebuilds live: move the padding slider or change the background and every size re-renders from the vector, so the previews are never stale. Each render is drawn at its own target size directly — the 16 px icon is not a shrunken copy of the 512 — and each is downloadable on its own, under the file name the head markup expects. Nothing is uploaded at any point; the whole set is produced in the tab, and the SVG itself is the sixth deliverable, downloadable as favicon.svg.
What each file in the set is for
The set looks arbitrary until you map each file to the surface that requests it. favicon.ico carries 16, 32 and 48 px and serves browser tabs, bookmark bars, pinned tabs and Windows shortcuts — plus every crawler and RSS reader that fetches /favicon.ico on convention alone. apple-touch-icon.png at 180 px is what iOS shows when someone adds the site to a home screen, and Safari on macOS borrows it for favourites tiles. icon-192.png and icon-512.png are named by the manifest: Android uses the 192 for home-screen installs and the 512 for the splash screen a PWA shows while loading. favicon.svg serves the browsers that accept a vector favicon — it scales losslessly and can even restyle itself for dark tabs. Six files, zero redundancy: remove one and some real surface somewhere falls back to a default globe, a black square, or nothing.
Padding and background, and why the apple icon is special
Padding insets the drawing by up to 20% of the edge on every size. Marks that run edge to edge look cramped once a launcher rounds the corners or drops the icon into a circle — 10% padding is usually enough breathing room, and because it is a fraction of the edge it stays proportional from 16 px to 512.
Background takes any colour, and by default it is applied to exactly one render: the apple-touch icon. iOS composites transparent touch icons onto black, which is almost never what was meant, so that icon is always flattened onto your chosen colour — pick the brand colour or white deliberately rather than shipping the accident. Every other size stays transparent unless you tick Apply to every size, which mattes the full set: useful when the mark is thin dark line art that disappears against dark browser themes, or when a design system wants the tile shape to be part of the icon.
The head markup and the manifest
The generated head block is four lines: the .ico declared with sizes="32x32", the SVG favicon typed as image/svg+xml so capable browsers prefer it, the apple-touch icon, and the manifest link. The site.webmanifest names the two big PNGs with their sizes and carries a name taken from your file name — edit it before shipping if the site is not called logo. Both snippets copy to the clipboard or download as files. Placement matters more than people expect: put all six files at the site root, not in an assets folder, because /favicon.ico and /apple-touch-icon.png are requested at fixed paths by software that never reads your HTML. The full reasoning, including what can safely be omitted for simple sites, is in the favicon guide.
When to use it
Every site ships this set once, and it is tedious to produce by hand — six renders, a container format from 1992, and markup nobody remembers. One pass here covers browser tabs, bookmarks, iOS home screens, Android and PWA installs. Rerun it whenever the mark changes; because the input is the SVG, regenerating is a drag-and-drop, not an afternoon in an image editor. If you only need the .ico — the rest of the set already exists, or IT asked for one file — the smaller SVG to ICO tool does exactly that and nothing else. And if your logo exists only as a PNG, trace it into a vector with the PNG to SVG converter first; every size here renders sharper from paths than from pixels.
Common problems
- The icon is mush at 16 px. Detail that reads at 512 disappears at 16. Check the 16 px preview specifically; if it fails, simplify the mark in the editor — fewer shapes, thicker strokes, no text. Many strong favicons are just the counter shape or initial of the full logo.
- The new favicon doesn't show up. Browsers cache favicons aggressively, often ignoring a normal reload. Bump the URL (
/favicon.ico?v=2) or test in a private window before blaming the files. - The apple-touch icon has an ugly background. It cannot be transparent, so pick the background colour deliberately — usually the brand colour or white, not the default black iOS would give you.
- Dark browser tabs swallow a dark mark. The ICO cannot adapt, but the SVG favicon can carry a
prefers-color-schememedia query in a<style>block — add it before generating and browsers that use the SVG switch automatically. - The set fails to render at all. The SVG references an external image or font, which the rasteriser will not fetch. Inline the image as a data URI or convert the text with Text to Path, then drop the file again.
Questions
Is this favicon generator free?
Yes. Generating the full set — the .ico, every PNG, the markup and the manifest — is free, with no account, no watermark and no limit. The site is funded by advertising.
What files do I actually get?
A favicon.ico containing 16, 32 and 48 px renders, four PNGs — favicon-16, favicon-32, favicon-48, the 180 px apple-touch-icon and the 192 and 512 px manifest icons — plus your original SVG as favicon.svg, the four link tags for the head, and a site.webmanifest. Each piece downloads individually.
Why does the input have to be an SVG?
Because one vector can be rendered honestly at every size from 16 to 512 px — each render is drawn fresh from the paths, not resampled from a bitmap. If the logo only exists as a PNG, trace it to a vector first with the PNG to SVG converter and the whole set benefits.
Are the icons transparent?
By default, yes — every size keeps the SVG’s transparency except the apple-touch icon, which iOS would composite onto black, so it is always flattened onto your chosen background colour. Tick “Apply to every size” to matte the whole set instead.
What is the padding slider for?
It insets the artwork by up to 20% of the icon’s edge, on every size proportionally. Use it when the mark touches the edges — launchers that round corners or crop to circles will otherwise clip it. Around 10% suits most logos.
Where do the files go on my site?
At the site root, so they answer at /favicon.ico, /favicon.svg, /apple-touch-icon.png and so on — the paths the generated head markup uses. Several of those paths are requested by convention, by software that never reads your HTML, so an assets subfolder is the wrong place.
Is my logo uploaded to generate the set?
No. All six renders, the .ico packing and both text snippets are produced in your browser. The SVG never leaves your machine.
Do I really need every size?
Tabs alone need only the small ones, but each file maps to a real surface: 180 px for iOS home screens, 192 and 512 px for Android installs and PWA splash screens, 48 px for Windows shortcuts. Skipping one means that surface falls back to something generic. The whole set is a one-time cost of seconds.
Why is my new favicon not showing in the browser?
Favicon caches survive normal reloads. Add a version query to the URL in your markup, like /favicon.ico?v=2, or check in a private window. Give crawlers and third-party services days rather than minutes to catch up.
Do browsers support SVG favicons?
Chromium browsers and Firefox use the SVG and prefer it when both are declared, which is how the generated markup orders them. Safari ignores SVG favicons, which is exactly why the .ico ships alongside — between the two files every browser is covered.
What is the site.webmanifest for?
It is the small JSON file Android and PWA installs read to find the 192 and 512 px icons and the site’s name. The generated one is minimal and valid; edit the name field, and extend it with theme colours or display mode if you are building a fuller PWA.
Can I check how the icon looks before downloading?
Yes — every size is previewed at once, and the small ones render pixel-for-pixel so you see the true 16 px result, not a flattering enlargement. If 16 px fails, simplify the mark in the editor and the previews update as soon as you re-drop the file.
Notes
- The .ico carries PNG-compressed images, which every browser and Windows since Vista reads.
- Keep the SVG favicon simple: at 16 px, fine strokes and small text disappear. Check the 16 px preview before shipping.
- The apple-touch icon is always rendered on a background — iOS fills transparency with black otherwise.