vibecheck0.3.0
Web essentialsweb-essentialsfaviconwarning

Missing favicon in React

With no <link rel="icon">, browsers request /favicon.ico on every page load and get a 404, and your tab shows a generic blank icon. It reads as unfinished — a real product has a recognisable tab icon. AI-generated apps almost never include one because it is an asset, not code.

Framework fixes
GeneralReactNext.jsSvelteVanilla JS

Symptoms

  • Blank/generic icon in the browser tab and bookmarks
  • A 404 for /favicon.ico in the network panel on every navigation
  • The site looks unpolished when pinned or bookmarked

How VibeCheck catches it

In your widget · Problems

warningweb-essentialsMissing favicon

To your coding agent · MCP

agent › get_detected_issues
→ { detector: "web-essentials", issue: "Missing favicon", threshold: "No <link rel="icon"> or <link rel="shortcut icon"> in the document head" }

The same string in your widget and in your agent’s context — no screenshot, no copy-paste.

Root causes

  • No icon asset was ever added to the project
  • The favicon file exists but no <link rel="icon"> references it

The fix for React

Put the icon in public/ and reference it from index.html.

index.htmlhtml
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

Steps

  1. Create or export an icon (SVG preferred, plus a 180×180 PNG for iOS)
  2. Place it in your public/static directory
  3. Reference it with <link rel="icon"> in <head>

See the general, framework-agnostic fix →

FAQ

Do I still need a favicon.ico?
A single SVG favicon works in all modern browsers. Keep a favicon.ico only for legacy support; some browsers and crawlers still probe /favicon.ico by convention.
What size should the favicon be?
An SVG scales to any size. For raster fallbacks, ship a 32×32 PNG for tabs and a 180×180 apple-touch-icon for iOS home-screen bookmarks.