Favicon Generator

How to generate favicons from an image

1. Drop a square image on the upload area or click to choose a file.
2. Preview the six generated PNG sizes side by side.
3. Click Download all to save every size, or download an individual size.
4. Reference each PNG in your HTML head with a link rel=icon tag.

Common uses

• Producing a complete favicon set from a logo so a new website is ready for browser tabs and PWA installs
• Generating a 192 and 512 pixel icon for a Progressive Web App manifest from one source image
• Refreshing an old favicon by uploading the latest brand mark and replacing every size in one batch
• Using a cropped image as input so the favicon stays centered and readable at small sizes

Technical specification

• Algorithm or formula: Source image is drawn to a hidden canvas at each target size using drawImage with the browser's smoothing algorithm (default bilinear), then exported with canvas.toBlob as PNG.
• Browser API or library: Canvas 2D API. No external library.
• Input limits: Image files up to 50 MB and 50 megapixels (see image-limits guard). SVG, JPEG, PNG, and WebP all accepted.
• Output: Six PNG files at 16, 32, 48, 64, 192, and 512 pixel squares, downloaded individually or via a batch download.
• Known limitations: Does not produce multi-resolution .ico files. No automatic background fill, square crop, or padding controls.

Frequently asked questions

What favicon sizes does this generator produce?

Six PNG sizes from a single source image: 16, 32, 48, 64, 192, and 512 pixels. Together they cover browser tabs, bookmarks, Windows shortcuts, Android home screens, and PWA manifests. All resizing runs in your browser using the Canvas API.

Is my image uploaded to a server?

All favicon resizing runs in your browser using the Canvas API. Our servers are not involved at any point.

What size source image should I provide?

A square image of at least 512 pixels on the longest side gives the cleanest output across every favicon size. Vector formats like SVG also work well because they downscale cleanly.

Can I download all the favicons in one go?

Yes. The Download all button triggers a download for each size in sequence with a short delay between them, so the browser handles them as separate downloads.

How do I add these favicons to my site?

Place the PNG files in your site root or assets folder, then reference each size with a link tag in your HTML head, for example link rel="icon" sizes="32x32" href="/favicon-32.png".