Favicon Generator
Turn an uploaded image into a complete, modern favicon package — favicon.ico, an Apple touch icon, and Android icons — bundled into one .zip. Free and private, entirely in your browser.
Input
PNG, JPG, WebP or SVG — ideally square and at least 512×512px. Nothing is uploaded; everything runs in your browser.
Off (default): a non-square image is center-cropped to a square. On: the full image is kept and padded with transparency instead, so nothing is cropped off the edges.
Favicon package
Upload a source image to generate favicon.ico (16/32/48), an Apple touch icon, and Android icons — bundled into one download.
Guides
Upload one image and get every favicon file a modern site actually needs — packaged into a single .zip, generated entirely in your browser. No upload, no server round-trip: your image never leaves your device.
Icon set: full vs. icon-only
- Full set (default) —
favicon.ico, an Apple touch icon, both Android icon sizes, amanifest.json, and (when your source is an SVG) anicon.svgpassthrough. - 16×16 favicon.ico only — just a single-resolution 16px
.icoand nothing else: no Apple/Android files, noicon.svg, nomanifest.json. Use this when you only need the classic browser-tab icon and want to skip everything else.
What you get (full set)
favicon.ico— a multi-resolution icon containing 16×16, 32×32 and 48×48 versions in one file (the classic browser-tab icon). In icon-only mode this is a single 16×16-only.icoinstead.apple-icon-180x180.png— the icon iOS uses when a page is added to a Home Screen.android-icon-192x192.pngandandroid-icon-512x512.png— the sizes Android and web app manifests expect.manifest.json— a minimal web app manifest referencing the two Android icon sizes. Itsname/short_name/theme_color/background_colorare placeholder values (there's no way for this tool to know your actual site name or brand color) — edit them before shipping.icon.svg— included only when your source file was already an SVG, passed through byte-for-byte unchanged (a raster image can't be turned back into a vector, so this only ever applies to a vector source).- An HTML snippet ready to paste into your
<head>, plus a text copy of it inside the zip.
Why this set, not a bigger one
Older favicon generators (including this tool's own predecessor) ship 10-15 files: loose PNGs at every size from 16px to 512px, a separate .ico, ms-tile icons, browserconfig.xml, and more. Almost none of that is still read by anything — it's leftover from an era before browsers supported multi-resolution .ico files and before Apple/Android settled on one icon size each.
This tool's full set is the same reduced set this site uses for its own favicons: one multi-resolution .ico, one Apple touch icon, the two Android/manifest sizes, and a manifest (plus an SVG passthrough when relevant). Every current browser, OS and crawler is covered by these files — anything more is unused weight. If even that's more than you need, icon-only mode drops everything but the .ico.
Non-square images
Favicons are square. By default, a non-square source is center-cropped to the largest square that fits inside it — a padded transparent border would just look like empty space at the small sizes these icons are actually seen at. If you'd rather keep the entire image instead of losing the cropped-off edges, turn on "Keep full image (don't crop to square)" to letterbox it instead: the full image is scaled to fit and padded with transparency on the short axis. For predictable results either way, start from a square image (ideally 512×512px or larger) and let the tool handle the resizing.
Tips
- Start with the largest, cleanest source image you have — every output size is downscaled from it, so more detail in means a sharper 512×512 icon out. Upscaling a small source will look soft no matter what.
- A simple, high-contrast mark reads better than a busy image once it's shrunk to 16×16px — that's the size most people actually see in a browser tab.
- If you're using an SVG logo, upload the SVG directly: you'll get a crisp
icon.svgpassthrough in addition to the rasterized set, so modern browsers can use the vector version and everything else falls back to the PNG/ICO set.
Do I need to add anything besides the files?
Yes — add the pasted HTML snippet to your page's <head>. The .ico link's sizes="32x32" matters: without it, some browsers treat the .ico as infinitely scalable and prefer it over your SVG icon even when the SVG would look better. In full-set mode the snippet also links the generated manifest.json, which is where the two Android icon sizes are referenced — they never get their own <link> tag. Icon-only mode's snippet is just the one favicon.ico line, since there's nothing else to link.
Is my image uploaded anywhere?
No. Every step — reading the file, resizing it on a canvas, packing the .ico, and zipping the result — happens in your browser. Nothing is sent to a server.