FaviconGen

Design

60%

Preview

How it will look in the browser tab

My Awesome Website
Mac / Windows

SVG Favicon

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512"><rect width="512" height="512" rx="102.4" ry="102.4" fill="#000000"/><text x="256" y="281.6" text-anchor="middle" dominant-baseline="central" fill="#ffffff" font-size="307.2" font-weight="bold" font-family="Inter, sans-serif">B</text></svg>

Web App Manifest

{
  "name": "My App",
  "short_name": "App",
  "icons": [
    {
      "src": "/favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png"
    },
    {
      "src": "/favicon-32x32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "/favicon-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#000000",
  "display": "standalone"
}

Save as site.webmanifest in your public folder and add <link rel="manifest" href="/site.webmanifest"> to your HTML head.