# Favicon references resolve
- **Pattern:** `ab-000042` (`ai-slop-hallucinations.asset-references.favicon-exists`)
- **Severity:** info
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000042
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000042)
## Why it matters
A `` pointing at a file that does not exist returns 404 on the browser's favicon request, which in turn shows a default globe icon in the tab and logs a 404 in analytics for every page view. The missing icon is cosmetic but persistent: once a browser caches the 404 it does not retry for hours, so the fix does not show up immediately even after the file is added.
## Severity rationale
Info because a missing favicon is purely cosmetic and browser-cached but shows up in 404 analytics on every page.
## Remediation
Either create the file at the referenced path or update the `` tag to point at one that exists. For Next.js App Router the simplest fix is to drop `favicon.ico` directly in the `app/` directory — Next.js injects the `` tag automatically:
```
app/
favicon.ico
layout.tsx
```
For other frameworks, place the file under `public/` or `static/` and match the href exactly.
## Detection
- **ID:** `favicon-exists`
- **Severity:** `info`
- **What to look for:** Check for favicon references in these locations: `` and `` in HTML/JSX/layout files, `app/favicon.ico`, `app/icon.{png,svg,jpg,jpeg}`, `app/apple-icon.{png,jpg,jpeg}` (Next.js conventions), `static/favicon.ico` (other frameworks). For each href reference, verify the file exists. For each Next.js convention path, verify the file exists (not just the directory). Count all favicon references and convention-based files, total resolved.
- **Pass criteria:** Every favicon `` resolves to a file AND if the framework is Next.js with `app/` directory, at least 1 of the convention files (`favicon.ico`, `icon.{ext}`, `apple-icon.{ext}`) exists OR a `` is present in `app/layout.tsx`. Report: "X favicon references inspected, Y resolved."
- **Fail criteria:** A `` href references a file that doesn't exist on disk.
- **Skip (N/A) when:** No HTML/JSX layout files contain `` references AND no `app/favicon.*`/`public/favicon.*`/`static/favicon.*` exists (project has no favicon at all — that's a `pre-launch` audit finding, not this one).
- **Detail on fail:** `"1 favicon reference unresolved: in src/app/layout.tsx (file public/favicon-32.png does not exist)"`
- **Remediation:** Either create the missing favicon file at the referenced path, or update the `` tag to point at an existing file. For Next.js App Router, the simplest pattern is to drop a `favicon.ico` directly in the `app/` directory and Next.js handles it automatically.
Taxons: reference-integrity
HTML version: https://auditbuffet.com/patterns/ab-000042