school_compare/nextjs-app/app/apple-icon.tsx

import { ImageResponse } from 'next/og';
import { markDataUri } from '@/components/Logo';

// iOS ignores SVG touch icons — it needs a real raster, on an opaque ground,
// with no transparency (it composites its own rounded mask). Previously this
// pointed at favicon.svg, so add-to-home-screen produced a blank tile.
//
// Teal ground with the mark knocked out in white, matching the app icon in the
// guideline's "brand in action" row.
export const size = { width: 180, height: 180 };
export const contentType = 'image/png';

const TEAL = '#0F766E';

export default function AppleIcon() {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: TEAL,
        }}
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={markDataUri('#FFFFFF', TEAL)} width={116} height={116} alt="" />
      </div>
    ),
    size
  );
}