From bffa43f67063936378943890ee50dc87055b7c3c Mon Sep 17 00:00:00 2001
From: Marco Sadjadi <marco@buildmymcpserver.local>
Date: Tue, 19 May 2026 22:28:47 +0200
Subject: [PATCH] feat(web): favicon (SVG) + apple-touch-icon (Next
 ImageResponse)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

app/icon.svg — 32px vector with the brand 'M' (logo-matching) on #6366F1 indigo
rounded square. Sharp at every browser size.

app/apple-icon.tsx — 180x180 PNG rendered at request time via next/og
ImageResponse with the same design scaled up. Covers iOS home-screen + iPadOS.

Next 15 auto-discovers both via the file-based metadata convention and injects:
  <link rel='icon' href='/icon.svg' type='image/svg+xml' sizes='any'>
  <link rel='apple-touch-icon' href='/apple-icon' type='image/png' sizes='180x180'>

Verified: both URLs return 200, both link tags appear in the rendered HTML head,
brand matches the in-page Logo component.
---
 apps/web/app/apple-icon.tsx | 40 +++++++++++++++++++++++++++++++++++++
 apps/web/app/icon.svg       |  4 ++++
 2 files changed, 44 insertions(+)
 create mode 100644 apps/web/app/apple-icon.tsx
 create mode 100644 apps/web/app/icon.svg

diff --git a/apps/web/app/apple-icon.tsx b/apps/web/app/apple-icon.tsx
new file mode 100644
index 0000000..0101bca
--- /dev/null
+++ b/apps/web/app/apple-icon.tsx
@@ -0,0 +1,40 @@
+import { ImageResponse } from 'next/og';
+
+export const size = { width: 180, height: 180 };
+export const contentType = 'image/png';
+
+export default function AppleIcon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          background: '#6366F1',
+          borderRadius: 38,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <svg
+          width="120"
+          height="120"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>BuildMyMCPServer</title>
+          <path
+            d="M8.5 22.5V9.5L16 16L23.5 9.5V22.5"
+            stroke="#FFFFFF"
+            strokeWidth={2.4}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        </svg>
+      </div>
+    ),
+    { ...size },
+  );
+}
diff --git a/apps/web/app/icon.svg b/apps/web/app/icon.svg
new file mode 100644
index 0000000..a27a411
--- /dev/null
+++ b/apps/web/app/icon.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" rx="7" fill="#6366F1"/>
+  <path d="M8.5 22.5V9.5L16 16L23.5 9.5V22.5" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>