FaviconMaker.net

Web Manifest Generator

Generate a complete site.webmanifest with icon entries, theme colors, and PWA install settings. Copy or download in seconds.

site.webmanifestCopy or downloadTheme colors

Manifest settings

Match the file paths you actually deploy

The manifest will reference icons like /favicons/favicon-192.png.

site.webmanifest

Copy or download the JSON.

{
  "name": "My Website",
  "short_name": "My Website",
  "icons": [
    {
      "src": "/favicons/favicon-16.png",
      "sizes": "16x16",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-64.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/favicons/apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0891B2",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "start_url": "/"
}

Head snippet

Paste these tags in your <head>:

<link rel="manifest" href="/favicons/site.webmanifest" />
<meta name="theme-color" content="#0891B2" />

Prefer a full snippet for all favicon tags? Use Favicon HTML tags.

Frequently Asked Questions

Do you upload anything?

No. This tool generates JSON in your browser; there are no uploads.

What is site.webmanifest for?

It helps browsers install your site as a PWA and tells them which icons to use.

Where do the icon paths point?

The manifest references icon files like favicon-192.png under your chosen path. Generate the files with Favicon Generator.

How do I verify it works?

Deploy the file, then run the Favicon Checker to confirm the manifest URL is reachable.