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]>
2026-09-05 18:06:22 +02:00
1 parent 81986b3275
commit acbf5f16ce
@@ -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 },
+  );
+}