Favicon Generator — Create Multi-Size Favicons (ICO, PNG, Apple Touch)
Generate favicons in every size browsers and platforms need: 16x16, 32x32, 192x192, 512x512, apple-touch-icon, and ICO. From any image, free.
About Favicon Generator
A favicon generator is a tool that produces the small icon shown in browser tabs, bookmarks, and home-screen shortcuts in every size and format modern platforms expect. The ZTools Favicon Generator takes a single source image (PNG, JPG, or SVG) and emits a complete favicon package: 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 192×192, 512×512 PNGs, a multi-size ICO, an Apple Touch Icon (180×180), and the matching `<link>` tags ready to paste into your HTML `<head>`. Everything generated client-side; the source image is never uploaded.
Use cases
- Adding a favicon to a brand-new website. Upload your logo, get a complete package in 5 seconds, drop the files in your `public/` folder, and paste the generated `<link>` tags into your `<head>`. Saves an hour of resizing in Photoshop and figuring out which formats each browser wants.
- Updating an existing favicon for a brand refresh. Re-run the generator with your new logo. Replace the old files in your repo and ship — every browser sees the new icon on the next cache miss.
- Creating a high-resolution Apple Touch Icon for iOS home-screen pinning. iOS Safari's "Add to Home Screen" uses a 180×180 PNG with no transparency. The generator emits exactly this format alongside the standard favicon set, so iOS bookmarks show your full-resolution logo instead of a cropped screenshot.
- Producing PWA icons for `manifest.json`. Progressive Web Apps need 192×192 and 512×512 icons referenced in the web app manifest. The generator outputs both at the right pixel densities; copy the file paths into your `manifest.json` `icons` array.
How it works
- Upload your source image. PNG, JPG, or SVG. Square images work best (non-square images are letterboxed). Recommended source size: at least 512×512 to avoid upscaling artifacts on the largest output.
- Optional: choose background color and padding. For SVG sources, pick a background fill if your icon needs a filled rounded square (iOS style). Padding controls the safe area inside the canvas.
- Click Generate. The tool draws your image onto a series of canvases at every target resolution and encodes each as PNG. The ICO file is built by stitching the 16/32/48 PNGs together per the ICO spec.
- Download the ZIP package. Contains every PNG, the ICO file, and a `favicon-tags.html` snippet with the recommended `<link>` tags.
- Drop files into your project. Place all files in your site root (or `/public/`). Paste the `<link>` tags into your `<head>`. Hard-refresh (Ctrl+Shift+R) to see the new favicon.
Examples
Input: 1024×1024 PNG logo
Output: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png
Plus a generated HTML snippet with all the `<link rel="icon">` tags ready to paste.
Input: 512×512 SVG with transparent background
Output: Same as above plus an Apple Touch Icon with white background (iOS does not render transparency).
Frequently asked questions
Why do I need so many favicon sizes?
Each platform picks the closest match: 16×16 for browser tabs, 32×32 for retina tabs, 192×192 for Android home screens, 512×512 for splash screens, 180×180 for iOS home screens. Providing every size avoids ugly browser-side scaling.
Is favicon.ico still necessary?
Yes — older browsers and many crawlers (including Google) still request `/favicon.ico` from the site root. The multi-size ICO contains 16×16, 32×32, and 48×48 in one file for backward compatibility.
What's the recommended source image size?
512×512 minimum. Larger sources (1024×1024 or vector SVG) produce sharper results across all output sizes because no upscaling is needed.
Will my source image be uploaded?
No. All resizing and encoding happen in your browser via the Canvas API. The source image stays on your device.
How do I update the favicon if browsers cached the old one?
Browsers cache favicons aggressively (often forever). Force a refresh by appending a query string to the link tag (`href="/favicon.ico?v=2"`) or renaming the file.
Should I use a transparent or solid background?
Transparent for browser tabs (looks cleaner). Solid for iOS Apple Touch Icon (iOS adds its own rounded mask and ignores alpha). The generator handles both automatically.
Pro tips
- Start with at least a 512×512 source image to avoid upscaling artifacts.
- Use a square logo without text — text becomes unreadable at 16×16.
- After deploying, validate with realfavicongenerator.net or https://your-site.com/favicon.ico in incognito.
- Hard-refresh after deploying a new favicon to clear browser cache.
Reviewed by Ahsan Mahmood · Last updated 2026-05-05 · Part of ZTools.
For the full,
formatted version of this page, please enable JavaScript and reload
https://ztools.zaions.com/favicon-generator.