Favicon assets generator

Generate favicon assets in your browser, including ICO and PNG files, an Apple touch icon, PWA icons, a web manifest, and an HTML snippet.

Source image

Drop or pick a PNG, JPEG, WebP, or SVG. Every platform uses this image unless you override it below.

Used when there is not enough space to display the full app name.

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.

Display mode

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.

Margin: 0%Visual breathing room around the source inside the icon.

Preview

Browser, search, and home-screen mockups showing the generated assets in context.

Generate the bundle to preview your favicons in the examples below.

App
Desktop browser tab
App
Search engine result

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

Margin: 0%Visual breathing room around the source inside the icon.

Preview

Browser, search, and home-screen mockups showing the generated assets in context.

Generate the bundle to preview your favicons in the examples below.

App
iOS home screen

Margin: 0%Visual breathing room around the source inside the icon.
Maskable safe-zone margin: 40%The W3C-recommended safe area is 40%. Source content stays visible inside any platform mask.

Preview

Browser, search, and home-screen mockups showing the generated assets in context.

Generate the bundle to preview your favicons in the examples below.

App
Windows taskbar
App
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.

Add the bundle to 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.

How to use

Choose an image, set the site colors and paths, then download the ZIP file.