Favicon Generator
Turn an image, a letter or an emoji into a full favicon package — a real multi-size .ico, PNGs, an apple-touch icon, a web manifest and the paste-ready HTML. Built entirely in your browser; nothing is uploaded.
Preview & download
Upload an image on the left and the preview and downloads appear here.
Nothing leaves your browser. Every size is drawn with the Canvas API, the .ico is packed and the download is zipped right here on your device. There are no uploads, no logging and no analytics on this tool — you can disconnect from the internet and it still works.
What a modern favicon package actually needs
A favicon is no longer a single 16×16 file. Browsers draw a site's icon in a browser tab, on a bookmark bar, in history and reading lists; operating systems draw it on the taskbar, on desktop shortcuts and on phone home screens; each of those wants a different pixel size, and some want a specific file format. Rather than one image, the reliable approach in 2024 is a small package of a few files plus five lines of HTML — which is exactly what this tool builds from a single source image, letter or emoji.
The files this tool produces
| File | Size(s) | Used by |
|---|---|---|
favicon.ico | 16, 32, 48 | The universal fallback: older browsers, crawlers, feed readers and Windows shortcuts request /favicon.ico even if you never link it |
favicon-16x16.png | 16 | Standard browser tab |
favicon-32x32.png | 32 | High-DPI tabs, taskbar, bookmark bar |
favicon-48x48.png | 48 | Windows site tiles and desktop shortcuts |
apple-touch-icon.png | 180 | iOS / iPadOS "Add to Home Screen" |
android-chrome-192/512 | 192, 512 | Android and installed PWAs, via the manifest |
site.webmanifest | — | Names the app and points to the Android icons |
ICO vs PNG vs SVG — which format, and why keep the .ico
ICO is a container: a tiny directory that can hold several bitmaps, so favicon.ico here packs the 16, 32 and 48 pixel images into one file and the browser or OS picks the closest match for where it draws — no scaling, no blur. Its value today is compatibility: many crawlers, feed readers and older browsers still fetch /favicon.ico from the site root by default, and it is the one file that answers that request. PNG favicons are what modern browsers actually prefer for tabs — you link the 16 and 32 pixel versions explicitly and they render crisply with an alpha channel. SVG is the newest option: a single vector file that scales to any resolution and can even flip colours in dark mode with a media query, but Safari's support is partial, so an SVG is best linked alongside the raster set rather than replacing it. Keeping all three covers every browser without betting on any one of them.
The apple-touch icon and the web manifest
Apple's home-screen icon ignores your <link rel="icon"> tags and instead looks for apple-touch-icon. The current recommended size is 180×180, and unlike a favicon it should be opaque — iOS puts it on a rounded tile and a transparent background can render as black, which is why this tool fills the background for that size. Android and installable web apps (PWAs) take a different route again: they read a site.webmanifest that names the app and lists icons, conventionally 192×192 for the home screen and 512×512 for the splash screen. The manifest generated here wires both, and its theme_color follows the background colour you chose.
How the download bundle is built without any library
Staying genuinely zero-upload rules out pulling a zip library from a CDN, so the "Download all" here writes the ZIP itself: a minimal STORE-method archive (no deflate) with a CRC-32 computed in JavaScript per file. The files are stored uncompressed on purpose — PNG and ICO are already compressed, so deflate would add code and CPU for almost no size saving. Prefer to grab one file? Every icon, the manifest and the ICO also have their own button, so you never need the zip at all.
Worked example: from a logo to a shipped favicon
Say you have a 512×512 PNG logo on a transparent background. Switch to Upload image, drop it in, and pick a background colour (or leave it transparent for the tab icons). The preview shows it at 16, 32, 48 and 180 pixels at once — if the logo has fine text that turns to mush at 16 pixels, that is your cue to simplify the mark or add padding, because a favicon is read at a glance, not studied. Click Download all, unzip into your site root so the files sit next to your home page, and paste the five-line snippet into your <head>. Because the paths are root-absolute (/favicon.ico, /favicon-32x32.png…), the same block works on every page.
Honest limits
- Small sizes are unforgiving. A detailed logo shrunk to 16×16 loses its detail no matter what tool renders it — that is physics, not a bug. Bold, simple marks or a single strong letter read best at tab size.
- It rasterises through Canvas. Sizes are drawn with the browser's image scaler, which is good but not a hand-tuned icon pipeline; for pixel-perfect 16-pixel hinting a designer editing each size by hand will still do better.
- No SVG favicon is emitted. This tool makes the raster package. If your source is a clean vector, keep linking your own
.svgfirst and use the.icohere as the fallback. - Emoji look native. A rendered emoji uses your device's emoji font, so the exact glyph style can differ slightly between the machine that generates it and the visitor's browser — but the downloaded PNG is fixed once created.
- ICO here is PNG-in-ICO. The bitmaps inside the
.icoare stored as PNG, which every browser since IE11 reads; a handful of very old Windows programs expect the legacy BMP form and may not show it, though they will still fall back to the linked PNGs.