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>