Favicon Generator

How to use it

1. Drop an image on the page, pick one with the button, or paste a copied image straight from the clipboard — a screenshot works. PNG, JPEG, SVG, WebP and GIF all decode here.
2. Adjust the options column: background color for the opaque outputs, padding, preview corner radius and the maskable safe-zone inset. The defaults suit most logos unchanged.
3. If the source is not square it renders padded first — then pick pad, centered on your chosen background, or center-crop; both candidates preview live and switching re-renders.
4. Press Download zip (or ⌘/Ctrl + S) and copy the files from favicon-set.zip — eight with an SVG source, seven otherwise — into the root of your site.
5. Copy the HTML head block (⌘/Ctrl + C) and paste it inside <head> on every page — the README repeats the same lines.

Drop one square image — PNG, JPEG, SVG, WebP or GIF — and download the complete modern icon set: favicon.ico holding 16, 32 and 48 px PNGs, a sanitized favicon.svg when the source is an SVG, the 180 px Apple touch icon, PWA icons with a maskable variant, site.webmanifest and the matching HTML head block, zipped. Rendering happens on this device; keep the DevTools Network panel open while it runs and watch no bytes leave.

How it works

A .ico file is a directory, not an image format of its own: six header bytes declare an icon file and a count, each image gets a sixteen-byte entry — pixel size, bit depth, payload length, byte offset — and the payloads follow untouched. Windows has accepted complete PNG files as those payloads since Vista, so this page writes its three sizes as compressed PNGs rather than legacy uncompressed bitmaps, and a flat-art favicon.ico can land at a few hundred bytes. Example 3 prints the directory of a real file.

Thirty-file icon packs date from years of per-device PNG lines, and almost none of those files is ever requested. Current resolution is short: legacy lookups and pinned tabs hit /favicon.ico, modern engines prefer an SVG declared with type="image/svg+xml", iOS reads apple-touch-icon.png at 180 px, and installed web apps pull artwork from the manifest's 192 and 512 px entries. At most eight files answer every requester there is, and the head block needs at most four link lines.

Android launchers render installed icons inside a platform shape — circle, squircle, teardrop — by cutting that shape out of the 512 px maskable image. The Web App Manifest specification defines what survives any cut: a safe zone forming a centered circle whose radius is 40 percent of the icon's size. The maskable option scales your mark toward that circle over your background color — square corners can still cross it at the default inset — and the manifest tags the file "purpose": "maskable" so launchers know cropping it is intended. Circle and squircle previews show the cut before you ship it.

An SVG source is sanitized before it becomes favicon.svg: a strict allowlist keeps drawing constructs — shapes, paths, text, gradients, filters, clips — and removes scripts, event-handler attributes, foreignObject and every reference to an external URL, naming each removal. The cleaned markup is what the preview and the zip both contain. Since the shipped icon stays a real SVG, a style rule inside the file can respond to prefers-color-scheme for dark-aware tabs — a property of the format; this page ships your sanitized source unchanged and leaves that edit to you.

Examples

Head block for a set that includes favicon.svg

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

site.webmanifest for the PWA icons

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

16 + 32 + 48 px PNGs (fixtures)

ICONDIR: reserved 0 · type 1 (icon) · 3 images
16×16 px · 32-bit · 82-byte PNG at offset 54
32×32 px · 32-bit · 100-byte PNG at offset 136
48×48 px · 32-bit · 153-byte PNG at offset 236

4×2 px swatch: five #0ea5e9, two white, one transparent

#0ea5e9

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" onload="alert(1)"><script>fetch('https://evil.example')</script><circle cx="12" cy="12" r="10" fill="#0ea5e9"/><a href="javascript:alert(1)"><rect width="24" height="24"/></a></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#0ea5e9"/></svg>
Removed onload attribute from <svg>.
Removed <script> element and its content.
Removed <a> element and its content.

Every example on this page is executed against the same engine that powers the tool, on every build.

Common errors

Couldn't decode this file — expected PNG, JPEG, SVG, WebP, or GIF. First bytes: 25 50 44 46 2D 31 2E 37

The leading bytes match none of the five supported signatures — these spell %PDF-1.7, a PDF renamed or exported wrong. The hex shows what the file really is; export the artwork as PNG or SVG from its source application and drop that instead.

SVG markup is malformed — closing tag </svg> at character 35 does not match the open <rect> element from character 6.

The SVG failed XML nesting before sanitation began: a <rect> was still open when </svg> arrived, and the message counts to both positions. Nothing is auto-repaired — an icon that half-parses would ship broken — so close the element (or self-close it with />) and re-drop the file.

Removed <script> element and its content.

Not an error — one line of the sanitizer's report. Scripts, event handlers and external references have no business inside an icon, so each removal is named while the drawing survives. At most twenty removals are itemized before an honest summary line takes over.

`#0ea5e` is not a valid color — expected hex (3/4/6/8 digits), rgb(), hsl(), oklch(), or a CSS color name.

The background field accepts hex at 3, 4, 6 or 8 digits plus the listed functional forms; five digits matches none of them — usually a truncated paste. Fix the value or use the native picker beside the field, which only ever emits valid colors.

This file is larger than the 20 MB limit for this tool. For big images use the CLI: magick logo.png -define icon:auto-resize=48,32,16 favicon.ico

Files above 20 MB are refused before any decode starts — an image that heavy is nearly always a photograph carrying far more pixels than icons use. Export a smaller copy, or run the printed ImageMagick line, which resizes any source locally.

This image is larger than the 10,000 px per-side limit for this tool. Resize it first, or use the CLI: magick logo.png -define icon:auto-resize=48,32,16 favicon.ico

Decode metadata reported a side past 10,000 px — more than a browser tab should rasterize. Halving such a source once in any editor brings it inside the cap with no visible cost at icon sizes.

Keyboard shortcuts

⌘/Ctrl + Enter

Re-run generation with the current source and options — handy after nudging an option.

⌘/Ctrl + S

Download favicon-set.zip. On this page the shortcut saves the icon set, not the page itself.

⌘/Ctrl + C

Copy the HTML head block while focus is in the tool and no text is selected; an actual selection copies only itself.

⌘/Ctrl + Shift + C

Copy the head block even while a selection exists.

t

Cycle the color theme (ignored while typing in the background field).

? or ⌘/Ctrl + /

Open the keyboard shortcut overlay.

Esc

Close the topmost dialog — the loaded source and every option stay put.