<!-- Favicon Configuration - Best Practices 2026 -->

<!-- Standard favicon (32x32 ICO for legacy support) -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- SVG favicon (scalable, supports dark mode) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon (180x180 PNG) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest (for PWA and Android) -->
<link rel="manifest" href="/manifest.webmanifest">

<!-- Theme color for browser chrome -->
<meta name="theme-color" content="#4F46E5">
<meta name="theme-color" content="#4F46E5" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">

{
  "name": "My Website",
  "short_name": "Site",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "theme_color": "#4F46E5",
  "background_color": "#ffffff",
  "display": "standalone"
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#4F46E5"/>
  <text x="16" y="22" text-anchor="middle" font-size="18" font-family="system-ui" font-weight="bold" fill="white">
    D
  </text>
</svg>