When an iOS user taps Share then Add to Home Screen, Safari looks for an apple-touch-icon. Without one, iOS generates a low-contrast screenshot of the current page and crops it into the icon slot — the home-screen launcher ends up with an unreadable thumbnail instead of your brand mark. This silently degrades the install experience on the platform where home-screen launches correlate most strongly with retention.
Low because the impact is limited to iOS home-screen users, a small slice of total traffic.
Ship a 180x180 PNG at public/apple-touch-icon.png — iOS Safari probes that exact filename before falling back to <link> tags. In Next.js App Router, placing apple-icon.png in app/ produces the correct <link rel="apple-touch-icon"> automatically. Use realfavicongenerator.net to cut every required size from one source SVG so the same mark renders sharply at 120, 152, 167, and 180 pixels.
// app/layout.tsx
export const metadata = { icons: { apple: '/apple-touch-icon.png' } }
ID: pre-launch.user-facing.apple-touch-icon
Severity: low
What to look for: Count all apple-touch-icon files and references. Enumerate whether a 180x180 PNG exists in public/ or is configured in metadata. Check public/ directory for apple-touch-icon.png (standard filename) or apple-touch-icon-precomposed.png. Check <head> in layout components for <link rel="apple-touch-icon"> tags. Check app/ directory for icon.png or apple-icon.png (Next.js App Router convention).
Pass criteria: An apple-touch-icon exists at public/apple-touch-icon.png or is referenced in the document head, OR the Next.js App Router icon convention provides equivalent coverage. At least 1 apple-touch-icon at 180x180 pixels must be present.
Fail criteria: No apple-touch-icon found.
Skip (N/A) when: Skip for API-only projects, CLI tools, or projects explicitly not targeting mobile/web-app usage. Signal: no HTML pages in the project.
Cross-reference: For favicon, see favicon. For web manifest, see web-manifest.
Detail on fail: "No apple-touch-icon.png found — iOS users adding the site to their home screen will see a screenshot thumbnail instead of a proper icon"
Remediation: When users add your site to their iOS home screen, Apple uses the touch icon. Without it, iOS generates a screenshot thumbnail, which looks unprofessional:
// app/layout.tsx — apple touch icon
export const metadata = { icons: { apple: '/apple-touch-icon.png' } }
// Ensure public/apple-touch-icon.png exists (180x180 PNG)
apple-touch-icon.png and place it in public/.<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.apple-icon.png in the app/ directory for automatic handling.