Favicon Generator

Turn one image into every favicon a site needs: a genuine multi-image favicon.ico, PNGs from 16 to 512 pixels, and the HTML tags to wire them up. Generated on a canvas in your browser — nothing is uploaded.

favicon-generator · runs locally
Drop an image here, click to browse, or paste from the clipboard. PNG, JPEG, WebP or SVG — square and 512px or larger works best.

One image in, a complete favicon set out

Give this tool a square logo — ideally 512px or larger — and it renders the six sizes a modern site needs: 16, 32 and 48px for the classic favicon, 180px for Apple touch icons, and 192px + 512px for web app manifests. Large reductions are stepped down in successive halves rather than one jump, which keeps small icons crisp instead of muddy — the same trick the Image Resizer uses. Non-square sources can be center-cropped automatically or padded with transparency.

The Download favicon.ico button builds a real multi-image ICO file: an ICONDIR header, one directory entry per size, and the 16, 32 and 48px images stored as PNG data. PNG-in-ICO has been valid on every modern platform for years (Windows since Vista), and it keeps the file dramatically smaller than old uncompressed BMP icons. The browser picks whichever embedded size fits best.

Installing your favicons

  1. Drop in your logo and check the size previews — especially 16px.
  2. Download favicon.ico plus the PNG sizes you need.
  3. Place favicon.ico at your site root; put the PNGs anywhere.
  4. Copy the HTML snippet into your <head>, and reference the 192/512 icons from your manifest.

Design tips for tiny sizes

At 16px, wordmarks and fine detail dissolve into noise. Favicons that stay legible use a single bold shape or letter, strong contrast against both light and dark tab bars, and a little breathing room at the edges for platform masks. If your full logo is too intricate, crop to its strongest element with the Image Cropper before generating.

Frequently asked questions

Is my image uploaded to a server?

No. Every icon size is rendered on an HTML canvas inside your browser, and the .ico file is assembled byte by byte locally with an ArrayBuffer. Your logo never leaves your device — handy when the artwork is unreleased or under NDA.

Which favicon sizes does a site actually need in 2026?

A multi-size favicon.ico (16/32/48) for legacy browsers, pinned tabs and tooling that requests /favicon.ico blindly; a 180px apple-touch-icon.png for iOS home screens; and 192px + 512px PNGs referenced from your web app manifest for Android and PWA installs. That set — exactly what this tool produces — covers effectively every platform.

Why does the source image need to be square?

Every favicon slot is square, so a non-square source must be cropped or padded. Browsers and OSes also round corners or mask icons themselves (iOS especially), so keep important detail away from the edges — a small margin of padding inside your artwork survives every mask.

What about SVG favicons?

Modern Chromium and Firefox accept <link rel="icon" type="image/svg+xml">, and an SVG favicon scales perfectly and can honor dark mode. But Safari and many other consumers still want raster icons, so ship the SVG as an enhancement and keep the .ico and PNG fallbacks this tool generates.