Favicon Generator
Generate a complete favicon package — private, free, no account needed.
All sizes generated locally — your image is never uploaded.
1
2
3
Drop or tap to create favicon
PNG, JPG, WEBP, SVG · Square image recommended
🔒 All processing is local — your image never leaves your device.
Next steps
Compress image
RecommendedShrink images by up to 80% without visible quality loss.
Resize image
RecommendedResize to exact pixel dimensions or pick from ready-made presets.
Convert format
Switch between PNG, JPEG, WebP, and more — one file or a batch.
Crop for social
Get pixel-perfect crops for Instagram, Facebook, X, LinkedIn, and YouTube.
Runs entirely in your browser. No uploads. Your files stay private.
Generate A Complete Favicon Pack For Browsers, iOS, And PWAs
Favicon Generator builds an entire icon pack from a single source image or a piece of text. Each output size is rendered into a Canvas with image-smoothing enabled and re-encoded as a PNG via toBlob, which is what every modern browser uses internally for raster icon export. The legacy favicon.ico file is assembled in the browser by writing a tiny ICO container header and concatenating the 16, 32, and 48 pixel PNGs into a single .ico binary.
The pack includes the sizes that actually matter: 16, 32, and 48 (combined into favicon.ico for legacy browsers and Windows tile fallbacks), 96 and 192 (for high-density Android home-screen icons), 180 (apple-touch-icon for iOS, where Safari ignores the alpha channel and applies its own corner radius), and 512 (for Progressive Web App manifest splash screens).
Outputs ship as a single ZIP that includes a paste-ready HTML snippet referencing every file with the correct rel and sizes attributes, plus a minimal manifest.json with the icons array filled in. The snippet covers the four link tags that Lighthouse and PWA Builder look for: icon, apple-touch-icon, manifest, and theme-color.
There are two source modes. Image mode accepts JPG, PNG, WebP, or SVG; the file is decoded into an HTMLImageElement and drawn into each target Canvas with high-quality smoothing. Text mode lets you type any single character (including emoji) and renders it onto a coloured background using the Canvas fillText API, which is the simplest way to ship a placeholder favicon for a prototype.
iOS quirks are handled automatically. Safari rounds the corners of apple-touch-icon and ignores transparent regions, so the 180-pixel output is filled with a configurable solid background colour first. Without that step, iPhones display a black backdrop behind transparent PNGs added to the home screen.
Everything runs locally. The source image lives as a blob URL, all canvases are local DOM elements, and ZIP packaging is done with a small in-page JS implementation. There is no upload step and no server-side image processing, which means the tool works offline once the page is cached.
Two limitations to keep in mind: icons must be square for predictable rendering, and very small text or fine line art often blurs at 16x16 even with smoothing — Apple's Human Interface Guidelines and Google's Material guidance both recommend designing the 16-pixel version separately if your logo has fine detail.
Common Use Cases
01
Launch a new marketing site
Drop your logo in once and get the complete tab, iOS, and PWA icon set ready for deployment without opening Photoshop.
02
Progressive Web App manifest
Generate the 192 and 512 icons that the PWA install banner and Lighthouse audit require, plus a starter manifest.json snippet.
03
Internal dashboard branding
Make it easy to tell apart five staging dashboards open in the same browser by giving each one a distinct emoji or initial favicon.
04
Hackathon and demo prototypes
Use text mode to ship a colourful single-letter favicon in under a minute when there is no logo yet but you still want a polished tab icon.
Frequently Asked Questions
16, 32, 48 (combined into favicon.ico), 96, 180 (apple-touch-icon), 192, and 512 pixels. That set covers every browser tab, Windows tile fallback, iOS home screen, Android Chrome icon, and PWA manifest requirement that Lighthouse audits today.
The 16, 32, and 48 PNGs are first rendered with toBlob, then assembled in the browser into the small binary container the ICO format defines. The result is byte-identical to what command-line tools like ImageMagick produce, just generated client-side.
Safari's apple-touch-icon spec ignores the alpha channel and applies its own square mask. The tool fills the 180 pixel canvas with a solid background colour before drawing your image so iOS shows your icon cleanly. Pick a background colour that matches your brand.
Yes. Switch to text mode and type any character or emoji. The character is rendered with Canvas fillText against a coloured background, which is more than good enough for prototypes and internal tools.
JPG, PNG, WebP, and SVG. SVG inputs are rasterised into each output size by drawing the SVG into a Canvas, so the result stays sharp at every resolution. Animated formats like GIF and APNG render as their first frame.
Sixteen pixels is just not enough room for fine detail. Designers usually create a separate simplified version for the smallest size — a single bold initial or a stripped-down mark. The tool can only resample what you give it.
No. The source image is read locally, every output PNG is built in a Canvas, and the ZIP is assembled in JavaScript before download. There is no network call carrying your image bytes.
The download includes a snippet with link tags for favicon.ico, apple-touch-icon, the 192 and 512 icons referenced via the manifest, and a theme-color meta tag. Drop the snippet inside the head of your base layout and you are done.
Yes. The generated manifest.json includes the 192 and 512 icons with `purpose: any maskable`, which is what Chrome's Add to Home Screen flow expects in 2024 and 2025.
Not from the ZIP — you would need to re-upload the source. If you frequently update icons, keep the source SVG in version control and re-run the generator each release.
Advertisement