Preview

Favicon preview will appear here

Source

Size Options

Favicon Sizes

Apple Touch Icon Sizes

PWA Settings

Export

HTML Code

<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">

Web Manifest

{
  "name": "My Website",
  "short_name": "Site",
  "start_url": "/",
  "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": "/favicon-64x64.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "/favicon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/favicon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/apple-touch-icon-120x120.png",
      "sizes": "120x120",
      "type": "image/png"
    },
    {
      "src": "/apple-touch-icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/apple-touch-icon-167x167.png",
      "sizes": "167x167",
      "type": "image/png"
    },
    {
      "src": "/apple-touch-icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#222028",
  "display": "standalone"
}