# Favicon is present - **Pattern:** `ab-002551` (`site-health-check.trust-polish.favicon`) - **Severity:** info - **Lifecycle:** active - **Last modified:** 2026-04-18 - **Canonical URL:** https://auditbuffet.com/patterns/ab-002551 - **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002551) ## Why it matters A missing favicon shows a generic document icon (or browser-default globe) in every browser tab, bookmark entry, history row, and pinned tab. When a user has five tabs open and yours is the only blank one, yours is the one they close. It's the cheapest trust signal on the web and the easiest to ship, which makes its absence a direct signal that the site was never taken past the MVP stage. ## Severity rationale Info because the missing icon does not break functionality, but it visibly degrades brand presence in every browser surface. ## Remediation Place an SVG favicon in your public assets and link it from the document head with a raster fallback for older browsers. For Next.js App Router, dropping `favicon.ico` into the `app/` directory is enough — the framework wires the `` automatically: ```html ``` Generate a full icon set from a source logo at realfavicongenerator.net. ## Detection - **ID:** `favicon` - **Severity:** `info` - **What to look for:** Count the number of favicon references by checking 2 sources: (a) count `` and `` tags in the HTML, and (b) check the HTTP status code of `{BASE}/favicon.ico`. At least 1 of these 2 sources must provide a valid favicon. - **Pass criteria:** At least 1 of the following 2 conditions is met: (a) the HTML contains at least 1 `` or `` tag with a non-empty `href`, OR (b) `{BASE}/favicon.ico` returns HTTP 200. Report which source(s) provided the favicon. - **Fail criteria:** No `` or `` tag found in HTML, AND `/favicon.ico` returns a non-200 HTTP status. - **Skip (N/A) when:** The main site response is not HTML (e.g., an API endpoint returning JSON) and `/favicon.ico` also returns non-200. - **Error when:** SPA detected (for the HTML check; the `/favicon.ico` HTTP check still runs). - **Detail on fail:** `"No favicon — browser tabs show a generic icon"` - **Remediation:** A favicon is the small icon in browser tabs and bookmarks — missing it makes your site look unfinished. Add a favicon to your project: ```html ``` Place `favicon.ico` in your `public/` directory (Next.js, Vite, CRA). For Next.js App Router, you can also place `favicon.ico` directly in the `app/` directory. Generate favicons from your logo at https://realfavicongenerator.net/. Taxons: user-experience HTML version: https://auditbuffet.com/patterns/ab-002551