Apple touch icon is present
Why it matters
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.
Severity rationale
Low because the impact is limited to iOS home-screen users, a small slice of total traffic.
Remediation
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' } }
Detection
-
ID:
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 forapple-touch-icon.png(standard filename) orapple-touch-icon-precomposed.png. Check<head>in layout components for<link rel="apple-touch-icon">tags. Checkapp/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.pngor 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, seeweb-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)- Create a 180x180 PNG named
apple-touch-icon.pngand place it inpublic/. - Add to your HTML head:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. - In Next.js App Router, place
apple-icon.pngin theapp/directory for automatic handling. - Use realfavicongenerator.net to generate all icon sizes simultaneously.
- Create a 180x180 PNG named
Taxons
History
- 2026-04-18·v1.0.0·Initial import from pre-launch·automated