Skip to main content

Favicon references resolve

ab-000042 · ai-slop-hallucinations.asset-references.favicon-exists
Severity: infoactive

Why it matters

A <link rel="icon" href="/favicon-32.png"> 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 <link> 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 <link> tag automatically:

app/
  favicon.ico
  layout.tsx

For other frameworks, place the file under public/ or static/ and match the href exactly.

Detection

  • ID: ai-slop-hallucinations.asset-references.favicon-exists
  • Severity: info
  • What to look for: Check for favicon references in these locations: <link rel="icon" href="..."> and <link rel="shortcut icon" href="..."> 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 <link href> 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 <link rel="icon"> is present in app/layout.tsx. Report: "X favicon references inspected, Y resolved."
  • Fail criteria: A <link rel="icon"> href references a file that doesn't exist on disk.
  • Skip (N/A) when: No HTML/JSX layout files contain <link rel="icon"> 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: <link rel='icon' href='/favicon-32.png'> 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 <link> 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

History