vibecheck0.3.0
Web essentialsweb-essentialsfaviconwarning

Missing favicon in Next.js

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 Next.js

Next.js uses file conventions: drop app/icon.png (or icon.svg / favicon.ico) into the app directory and Next generates the <link> tags automatically — no markup needed.

File-based — Next wires up the <link> for youbash
app/
  favicon.ico      # legacy fallback
  icon.svg         # modern browsers
  apple-icon.png   # 180x180 for iOS

Next.js docs →

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.