# Favicon is present
- **Pattern:** `ab-002181` (`pre-launch.user-facing.favicon`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002181
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002181)
## Why it matters
A missing favicon shows the browser's default blank-page icon in tabs, bookmarks, browser history, and pinned tabs — the site reads as unfinished next to every other tab the user has open. Chrome and Safari also render the blank icon in mobile tab switchers and Add-to-Home-Screen prompts. On shared devices and in screenshots, the missing brand mark makes your site indistinguishable from a localhost dev server.
## Severity rationale
Medium because the polish gap is universally visible to every visitor and undermines brand recall on every tab.
## Remediation
In Next.js App Router, drop `favicon.ico` directly into `app/` — it is picked up automatically with no `` tag required. For additional sizes, add `icon.png` at 32x32 alongside it. For the Pages Router, place `favicon.ico` in `public/` and wire it through ``. Generate a complete set of sizes via realfavicongenerator.net or favicon.io.
```tsx
// app/layout.tsx
export const metadata = { icons: { icon: [{ url: '/favicon.ico' }, { url: '/icon.png', type: 'image/png', sizes: '32x32' }] } }
```
## Detection
- **ID:** `favicon`
- **Severity:** `medium`
- **What to look for:** Count all favicon files and references. Enumerate which formats are present (ICO, PNG, SVG) and which sizes. Check `public/` directory for `favicon.ico`, `favicon.png`, or `favicon.svg`. Check `app/` directory for Next.js App Router favicon convention (`favicon.ico` at `app/favicon.ico`). Check `` tags in the HTML document `` or layout components. Check `` tags in layout.tsx or _document.tsx.
- **Pass criteria:** A favicon file exists in an expected location, or a `` tag references a valid icon file. At least 1 favicon file must exist in `public/` or `app/` with at least 2 sizes (16x16 and 32x32).
- **Fail criteria:** No favicon found — the site will show a browser default blank icon in tabs and bookmarks.
- **Skip (N/A) when:** Never — even minimal web projects benefit from a favicon.
- **Cross-reference:** For apple touch icon, see `apple-touch-icon`. For social sharing images, see `social-sharing`.
- **Detail on fail:** `"No favicon.ico, favicon.png, or found — site will display a blank browser tab icon"`
- **Remediation:** A missing favicon makes your site look unfinished. The tab icon also appears in bookmarks, browser history, and mobile home screen shortcuts:
```tsx
// app/layout.tsx — favicon metadata
export const metadata = { icons: { icon: [{ url: '/favicon.ico' }, { url: '/icon.png', type: 'image/png', sizes: '32x32' }] } }
```
1. Create a 32x32 (minimum) icon as `favicon.ico` or `favicon.png`.
2. In Next.js App Router, place `favicon.ico` directly in the `app/` directory — it's picked up automatically.
3. For `pages/` router, add to `public/favicon.ico` and ensure the HTML `` includes ``.
4. For multi-size support, use a favicon generator (favicon.io or realfavicongenerator.net) to generate all required sizes.
Taxons: user-experience
HTML version: https://auditbuffet.com/patterns/ab-002181