<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="400" height="400" fill="#f3f4f6"/>

  <!-- Browser window mockup -->
  <g transform="translate(50, 80)">
    <!-- Browser window -->
    <rect x="0" y="0" width="300" height="240" rx="8" fill="white" stroke="#d1d5db" stroke-width="2"/>

    <!-- Browser tab bar -->
    <rect x="0" y="0" width="300" height="40" rx="8" fill="#e5e7eb"/>
    <rect x="0" y="32" width="300" height="8" fill="#e5e7eb"/>

    <!-- Active tab with favicon -->
    <g transform="translate(10, 8)">
      <rect x="0" y="0" width="120" height="32" rx="6" fill="white" stroke="#d1d5db" stroke-width="1"/>

      <!-- Favicon in tab (16x16) -->
      <rect x="8" y="8" width="16" height="16" rx="2" fill="#3b82f6"/>
      <circle cx="16" cy="16" r="4" fill="white"/>

      <!-- Tab text -->
      <text x="32" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#374151">My Website</text>
    </g>

    <!-- Browser controls -->
    <g transform="translate(265, 15)">
      <circle cx="0" cy="0" r="5" fill="#ef4444"/>
      <circle cx="15" cy="0" r="5" fill="#fbbf24"/>
      <circle cx="30" cy="0" r="5" fill="#10b981"/>
    </g>

    <!-- Browser content area -->
    <rect x="20" y="60" width="260" height="160" rx="4" fill="#f9fafb"/>

    <!-- Large favicon display in browser -->
    <g transform="translate(150, 140)">
      <rect x="-40" y="-40" width="80" height="80" rx="8" fill="#3b82f6"/>
      <circle cx="0" cy="0" r="20" fill="white"/>
    </g>
  </g>

  <!-- Favicon size indicators -->
  <g transform="translate(60, 50)">
    <!-- 16x16 -->
    <rect x="0" y="0" width="16" height="16" rx="2" fill="#3b82f6" stroke="#1f2937" stroke-width="1"/>
    <circle cx="8" cy="8" r="3" fill="white"/>
    <text x="20" y="12" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#6b7280">16x16</text>

    <!-- 32x32 -->
    <g transform="translate(80, -6)">
      <rect x="0" y="0" width="32" height="32" rx="3" fill="#3b82f6" stroke="#1f2937" stroke-width="1"/>
      <circle cx="16" cy="16" r="6" fill="white"/>
      <text x="38" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#6b7280">32x32</text>
    </g>

    <!-- 180x180 (scaled down) -->
    <g transform="translate(180, -18)">
      <rect x="0" y="0" width="48" height="48" rx="6" fill="#3b82f6" stroke="#1f2937" stroke-width="1"/>
      <circle cx="24" cy="24" r="9" fill="white"/>
      <text x="54" y="28" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#6b7280">180x180</text>
    </g>
  </g>

  <!-- Mobile device with favicon -->
  <g transform="translate(260, 100)">
    <!-- iPhone mockup -->
    <rect x="0" y="0" width="90" height="160" rx="12" fill="#1f2937" stroke="#374151" stroke-width="2"/>
    <rect x="6" y="12" width="78" height="136" rx="6" fill="#111827"/>

    <!-- Notch -->
    <rect x="30" y="12" width="30" height="4" rx="2" fill="#1f2937"/>

    <!-- Home screen with app icon -->
    <g transform="translate(45, 60)">
      <!-- App icon with favicon -->
      <rect x="-20" y="-20" width="40" height="40" rx="8" fill="#3b82f6"/>
      <circle cx="0" cy="0" r="10" fill="white"/>

      <!-- App name -->
      <text x="0" y="32" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="8" fill="#9ca3af">My App</text>
    </g>

    <!-- Additional app icons -->
    <g transform="translate(20, 110)">
      <rect x="0" y="0" width="18" height="18" rx="4" fill="#60a5fa"/>
      <rect x="26" y="0" width="18" height="18" rx="4" fill="#60a5fa"/>
      <rect x="52" y="0" width="18" height="18" rx="4" fill="#60a5fa"/>
    </g>
  </g>

  <!-- Upload arrow indicator -->
  <g transform="translate(30, 200)">
    <path d="M 0 10 L 10 0 L 20 10" stroke="#3b82f6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    <line x1="10" y1="0" x2="10" y2="25" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
    <text x="0" y="40" font-family="system-ui, -apple-system, sans-serif" font-size="9" fill="#6b7280">Upload</text>
  </g>

  <!-- Download arrow indicator -->
  <g transform="translate(350, 200)">
    <line x1="10" y1="0" x2="10" y2="25" stroke="#10b981" stroke-width="2" stroke-linecap="round"/>
    <path d="M 0 15 L 10 25 L 20 15" stroke="#10b981" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="-8" y="40" font-family="system-ui, -apple-system, sans-serif" font-size="9" fill="#6b7280">Download</text>
  </g>

  <!-- Bottom label -->
  <text x="200" y="380" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="600" fill="#6b7280">Favicon Generator</text>
</svg>
