fix: add apple-touch-icon for iOS "Add to Home Screen"
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]>
This commit is contained in:
1 parent
81986b3275
commit
acbf5f16ce
1 file changed
+42
@@ -0,0 +1,42 @@
|
|||||||
|
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 },
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in new issue
Block a user