Favicon Generator
Generate a complete favicon set in six PNG sizes — entirely in your browser.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this favicon generator
- Choose a square source image (ideally at least 512 × 512 px) from your device.
- Press "Generate Favicon Set" to produce six PNG sizes: 16, 32, 48, 180, 192, and 512.
- Preview each size next to its filename in the result panel.
- Click any filename link to download that size individually as a PNG.
- Drop the downloaded files into your site’s root or /public folder and reference them from your HTML.
About this favicon generator
A favicon generator produces a complete set of icon sizes from a single source image so every browser, search result, bookmark, and home-screen shortcut has the right asset to display. The six sizes this tool emits — 16, 32, 48, 180, 192, and 512 — cover legacy desktop browser tabs (16 / 32), Windows taskbar pinning (48), Apple touch icons (180), Android home-screen icons (192), and modern PWA splash screens (512).
The pipeline runs entirely in your browser. The source image is decoded with createImageBitmap, then redrawn onto six separate canvases at the target dimensions using imageSmoothingQuality = 'high', and each canvas is encoded to a PNG blob with canvas.toBlob. Your image is never uploaded to a server, never stored, and never transmitted — once you close the tab, every reference is released.
As a worked example, a 1024 × 1024 px logo PNG produces a tight set of six PNGs totalling roughly 80 KB. Reference them in your HTML head with link rel="icon" sizes="32x32" href="/favicon-32.png" and the matching tags for 180 (apple-touch-icon) and 192 / 512 (manifest icons), and every device gets a crisp icon.
For best results, start from a square image of at least 512 × 512 px. Sources smaller than 192 px will be upscaled and look fuzzy at the largest sizes.
FAQ
- Are my images uploaded anywhere during favicon generation?
- No, generation happens entirely in your browser. Your source image is decoded, resized on a local canvas, and re-encoded — no server round-trip occurs.
- Why does the tool emit individual PNGs instead of one .ico file?
- Modern browsers prefer PNG favicons referenced explicitly per size, and the format scales better on high-DPI screens. ICO support is still universal, but for a 2026 site, six PNGs cover every case cleanly.
- What size source image should I start with?
- At least 512 × 512 px to avoid upscaling the largest output. A square aspect is strongly recommended — non-square sources will be squashed into the icon canvas.
- How do I install the generated favicons on my site?
- Put the files in your site root or /public folder and add link tags in your HTML head: link rel="icon" sizes="32x32" for the small ones, link rel="apple-touch-icon" sizes="180x180" for the Apple icon, and reference 192 and 512 from your web app manifest.
- Will the 16 × 16 icon look crisp?
- Yes, because the browser downsamples from your source rather than upscaling. For very detailed logos, consider designing a simplified 16 × 16 version manually and substituting it after generation.