Favicon Assets Generator

Generate a complete favicon bundle — ICO, PNGs, Apple touch icon, PWA icons, web manifest, and the HTML snippet — locally in your browser.

Source image
Drop or pick a PNG, JPEG, WebP, or SVG. Every platform uses this image unless you override it below.
Site info
Used by the manifest, the apple-touch-icon, and the HTML snippet.

Shown when the app name is too long for the surface.

Optional. Omitted from the manifest when blank.

Where the installed PWA opens.

Prefix applied to every href in the HTML snippet and to every src in the manifest icons array.

Drives the manifest theme_color and the HTML <meta name="theme-color"> tag.

Manifest background_color. Used by browsers to paint splash screens on PWAs.

Desktop browser favicon
Controls favicon.ico, favicon-16x16.png, favicon-32x32.png, and (when source is SVG) favicon.svg.

Visual breathing room around the source inside the icon.

Desktop browser tab
Desktop browser tab (dark)
Search engine result
iOS web clip
Controls the 180×180 apple-touch-icon.png used on iOS home screens.

Apple icons must be opaque, so this fill is always applied.

Visual breathing room around the source inside the icon.

iOS home screen
PWA icons
Controls pwa-192x192.png, pwa-512x512.png, and the maskable variants.

Visual breathing room around the source inside the icon.

The W3C-recommended safe area is 40%. Source content stays visible inside any platform mask.

Windows taskbar
Android launcher
Generated bundle
Click Generate to render every asset, build the zip, and copy the HTML snippet.
No bundle yet
Pick an image and click Generate to assemble the favicon bundle.

What the tool generates

This generator turns a single image into a complete, modern favicon bundle — a multi-size .ico for legacy browsers, the 16 / 32 / 180 / 192 / 512 PNG variants, an optional original .svg, a site.webmanifest for PWAs, and the HTML snippet you paste into <head>. Every byte is produced in your browser; no upload, no server, no analytics.

What’s in the bundle

  • favicon.ico — multi-image (16 / 32 / 48) for browser tabs, bookmarks, and old Windows shortcuts.
  • favicon-16x16.png and favicon-32x32.png — modern PNG variants used by current browsers.
  • favicon.svg — included only when your source image is SVG and the “Use original SVG” toggle is on.
  • apple-touch-icon.png — 180×180, opaque, used by iOS home screens.
  • pwa-192x192.png and pwa-512x512.png — the standard PWA icons.
  • pwa-maskable-192x192.png and pwa-maskable-512x512.png — maskable variants with the W3C-recommended safe area.
  • site.webmanifest — the PWA manifest wired to the icons above.

How padding, background, and maskable safe zones work

Each platform has its own padding (“Margin”) so you can leave breathing room inside the icon canvas. The “Add background” switch paints an opaque square behind your source — useful when the source is transparent and the destination requires opacity (Apple’s home screen) or just for visual contrast in a browser tab. Maskable PWA icons use an extra safe zone on top of the platform margin: anything outside the central ~80% may be cropped by Android, Windows, or ChromeOS when they apply a circular, rounded, or squircle mask.

Wiring the bundle into your site

  1. Unzip the downloaded archive into your web root (so the files live at /favicon.ico, /site.webmanifest, etc.).
  2. Paste the HTML snippet into your site’s <head>.
  3. If you serve assets from a sub-path (for example /static/icons/), set “Asset path” before generating so the snippet and manifest use the right URLs.
  4. If you customized the manifest beyond what this tool exposes (for example to add categories or screenshots), open site.webmanifest in a text editor and edit it directly — it’s plain JSON.