Nick SzaunigandClaude Sonnet 5
acbf5f16ce
iOS Safari ignores the web manifest for home-screen icons entirely and needs its own apple-touch-icon link, which Next.js only emits when app/apple-icon.tsx (or a literal apple-icon.png) exists. Without it, iOS falls back to a screenshot of the open page instead of the brand mark. Mirrors the existing public/icon.svg design via next/og. Co-Authored-By: Claude Sonnet 5 <[email protected]>
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { ImageResponse } from "next/og";
|
|
|
|
// iOS's "Add to Home Screen" doesn't read the web manifest at all - it needs
|
|
// its own <link rel="apple-touch-icon">, which only exists if this special
|
|
// file (or a literal apple-icon.png) is present. Without it, iOS falls back
|
|
// to a screenshot of whatever page was open, not the app's brand mark.
|
|
// Mirrors public/icon.svg's existing design (used in the manifest for
|
|
// Android/Chrome) as plain positioned divs rather than inline SVG paths,
|
|
// since that renders reliably through Satori (next/og's renderer). iOS
|
|
// applies its own rounded-square mask on top, so this stays a plain square.
|
|
export const size = { width: 180, height: 180 };
|
|
export const contentType = "image/png";
|
|
|
|
export default function AppleIcon() {
|
|
const barStyle = {
|
|
position: "absolute" as const,
|
|
left: "30%",
|
|
width: "40%",
|
|
height: "10%",
|
|
borderRadius: 6,
|
|
background: "#f5c518",
|
|
};
|
|
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
position: "relative",
|
|
background: "#0a0a0a",
|
|
}}
|
|
>
|
|
<div style={{ ...barStyle, top: "34%" }} />
|
|
<div style={{ ...barStyle, top: "47%" }} />
|
|
<div style={{ ...barStyle, top: "60%" }} />
|
|
</div>
|
|
),
|
|
{ ...size },
|
|
);
|
|
}
|