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.
Info because the missing icon does not break functionality, but it visibly degrades brand presence in every browser surface.
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 <link> automatically:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
Generate a full icon set from a source logo at realfavicongenerator.net.
ID: site-health-check.trust-polish.favicon
Severity: info
What to look for: Count the number of favicon references by checking 2 sources: (a) count <link rel="icon"> and <link rel="shortcut icon"> 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 <link rel="icon"> or <link rel="shortcut icon"> tag with a non-empty href, OR (b) {BASE}/favicon.ico returns HTTP 200. Report which source(s) provided the favicon.
Fail criteria: No <link rel="icon"> or <link rel="shortcut icon"> 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:
<!-- In <head> — modern approach with SVG -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Fallback for older browsers -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
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/.