Favicon Generator
Generate a complete favicon set (ICO, PNG, manifest) from a single image.
- Free
- No signup
- Files never leave your browser
What gets generated
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 16+32+48 packed | Universal compatibility, browser tab bar, search results |
| favicon-16x16.png | 16×16 | Modern <link> for browser tabs |
| favicon-32x32.png | 32×32 | Higher-DPI tab bar, bookmark bar |
| apple-touch-icon.png | 180×180 | iOS home screen and PWA launcher |
| android-chrome-192x192.png | 192×192 | Android home screen at standard density |
| android-chrome-512x512.png | 512×512 | Android splash screen, large launcher |
| maskable-icon-512x512.png | 512×512 | Android adaptive icons (with safe-zone padding) |
| site.webmanifest | JSON | PWA install metadata |
| favicon.svg | vector | Crisp at any DPI, modern browsers only (only if source is SVG) |
Why so many sizes?
Different surfaces have different requirements:
- Browser tab: 16×16 (and 32×32 on retina). Reads small enough that detailed logos blur into mush.
- Bookmarks bar: 16×16 on most browsers, 32×32 on retina.
- iOS home screen: 180×180. Apple does not honor maskable; it crops to its own squircle.
- Android home screen: 192×192 standard, 512×512 high-density, plus a maskable variant for adaptive icons.
- PWA splash screen: Android uses the 512×512 icon plus the manifest’s background_color.
- Search results: Google fetches /favicon.ico if present; bigger sizes inside the ICO get used for richer cards.
A single high-resolution source image, resized properly, covers all of these. The tool uses Lanczos-3 resampling (the same algorithm used by professional image editors) for sharp downscales without the blur you get from default browser resampling.
ICO vs PNG
The .ico format predates PNG. Originally each image inside an ICO was a 32-bit BMP — bulky and limited to 256 colors at small sizes. Since Windows Vista (and IE9), ICO files can contain PNG images directly. This tool uses PNG-in-ICO because:
- Smaller file size than BMP-in-ICO for icons with alpha
- Better quality at 16×16 and 32×32
- Supported by every browser since 2011
The packed ICO is ~5–15KB for a typical favicon. Browsers fetch it once and cache it.
Maskable icons in detail
Android 8+ supports “adaptive icons” — launcher icons that the OS crops into a system-themed shape. Some Samsung devices crop to a squircle, Pixels crop to a circle, others to a rounded square. If your app icon fills the entire 512×512 canvas edge-to-edge, the crop will chop off your logo.
The tool generates a maskable icon by:
- Filling the entire 512×512 canvas with your chosen background color.
- Drawing your source image centered at 80% of the canvas size (the standard safe-zone ratio defined by the W3C maskable icons spec).
- Setting
"purpose": "maskable"on the icon entry in site.webmanifest.
Test the result at maskable.app if you want to preview how different launchers will crop it.
The HTML snippet
The tool generates a snippet you paste once into your <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#1f2937">rel="icon" sizes="any" (the ICO) is the universal fallback. Modern browsers prefer the typed PNG / SVG variants below. iOS reads apple-touch-icon. Android reads manifest for everything else.
Where to place the files
All files belong at your website root, i.e. requestable as:
https://yoursite.com/favicon.icohttps://yoursite.com/favicon-16x16.png- etc.
Browsers look for /favicon.ico by URL convention even without a <link> tag, so even if you forget to paste the snippet, the basic favicon will still appear in tabs.
Privacy
A static HTML page, a small JavaScript bundle, and three lazy-loaded WebAssembly codecs (jsquash/resize for Lanczos resampling, jsquash/png for PNG encoding, plus fflate for the ZIP) — all running in your browser tab. The Network tab in DevTools confirms it: no requests fire when you drop a file, generate, or download. Your source image stays on your device.
Related tools
- Image Compressor — losslessly compress JPG/PNG/WebP.
- Image Size Converter — resize images to exact pixel dimensions.
- QR Code Generator with Logo — generate branded QR codes.
Frequently asked questions
What files does this tool generate?
Eight files covering every modern browser and PWA target: favicon.ico (16/32/48 multi-image), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png (with safe-zone padding), and site.webmanifest. If you upload an SVG, favicon.svg is included too. Everything zipped as favicon-pack.zip.
Do my images leave my browser?
No. Decode, resize (Lanczos-3 via WebAssembly), PNG re-encode, ICO packing, and ZIP bundling all happen in your browser tab. The Network tab in DevTools confirms it — once the codecs load, no requests fire. Your source image never reaches a server.
What size should my source image be?
At least 512×512 pixels. Square. Tools downscale beautifully but cannot invent detail going up. PNG, JPG, WebP, and SVG are accepted. SVG is preferred because it scales perfectly to every output size and is also included as favicon.svg for modern browsers.
What is a maskable icon?
Android, Samsung, and other Chromium-based home-screen launchers crop launcher icons into platform-specific shapes (circle, squircle, rounded square). A "maskable" icon includes a safe zone of solid background around the visible artwork — roughly the outer 20% — so the crop never removes important detail. The tool generates one automatically: your image centered at 80% of the canvas, filled to the edges with your chosen background color.
Why include a multi-image ICO when modern browsers prefer PNG?
Many corporate intranets and old browsers still request /favicon.ico by URL convention. Search engines display the .ico in result snippets. The tool packs 16×16, 32×32, and 48×48 PNG images inside the ICO container (PNG-in-ICO has been supported in Windows since Vista and in every browser since IE9). One file, three resolutions, maximum compatibility.
How does the web manifest get used?
Modern browsers read site.webmanifest when a user "installs" your site as a Progressive Web App. The manifest tells the OS the app name, icons, theme color (used for the browser chrome on Android), and background color (used for the splash screen when the PWA launches). Even non-PWAs benefit because Chrome on Android uses theme_color to color the address bar.
What should the theme color be?
Pick a color that represents your brand and contrasts well with white text. On Android, this fills the address bar at the top of the browser. On desktop Chrome it has no effect. Defaults to a near-black slate (#1f2937) — change it to match your brand.
How do I install the favicons after downloading?
Extract the ZIP and place every file in your website root (where /favicon.ico would be requested). Then paste the HTML snippet provided into the <head> of every page. The browser does the rest. The snippet links to favicon.ico, the PNG sizes, the apple-touch-icon, the manifest, and sets the theme-color meta.
Is this tool really free?
Yes. No signup, no watermark, no usage limit, no ads. Generate as many favicon sets as you like.