# Apple touch icon is present
- **Pattern:** `ab-002185` (`pre-launch.user-facing.apple-touch-icon`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002185
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002185)
## 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 `` tags. In Next.js App Router, placing `apple-icon.png` in `app/` produces the correct `` 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.
```tsx
// 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 for `apple-touch-icon.png` (standard filename) or `apple-touch-icon-precomposed.png`. Check `` in layout components for `` 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:
```tsx
// app/layout.tsx — apple touch icon
export const metadata = { icons: { apple: '/apple-touch-icon.png' } }
// Ensure public/apple-touch-icon.png exists (180x180 PNG)
```
1. Create a 180x180 PNG named `apple-touch-icon.png` and place it in `public/`.
2. Add to your HTML head: ``.
3. In Next.js App Router, place `apple-icon.png` in the `app/` directory for automatic handling.
4. Use realfavicongenerator.net to generate all icon sizes simultaneously.
Taxons: user-experience
HTML version: https://auditbuffet.com/patterns/ab-002185