feat(web): favicon (SVG) + apple-touch-icon (Next ImageResponse)

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.
This commit is contained in:
Marco Sadjadi 2026-05-19 22:28:47 +02:00
parent dda8f94de4
commit bffa43f670
2 changed files with 44 additions and 0 deletions

View File

@ -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 },
);
}

4
apps/web/app/icon.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 289 B