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.
41 lines
933 B
TypeScript
41 lines
933 B
TypeScript
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 },
|
|
);
|
|
}
|