# Missing favicon > No favicon means a blank browser tab and a 404 on every load. Add a so your site is recognisable in tabs and bookmarks. _Category: Web essentials · Detector `web-essentials` · Check `favicon` · Severity: warning_ With no ``, 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. ## 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 detects it The `web-essentials` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP. - **Issue string:** `Missing favicon` - **Threshold:** No or in the document head ## Root causes - No icon asset was ever added to the project - The favicon file exists but no `` references it ## The fix Add an icon asset and reference it with ``. A single SVG favicon covers modern browsers; add a PNG and an `apple-touch-icon` for broader support. ### 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 `` in `` ```html ``` ## Framework-specific fixes ### React Put the icon in public/ and reference it from `index.html`. _index.html_ ```html ``` ### Next.js Next.js uses file conventions: drop `app/icon.png` (or `icon.svg` / `favicon.ico`) into the app directory and Next generates the `` tags automatically — no markup needed. _File-based — Next wires up the for you_ ```bash app/ favicon.ico # legacy fallback icon.svg # modern browsers apple-icon.png # 180x180 for iOS ``` [Next.js docs](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons) ### Svelte Place the icon in static/ and link it in `app.html`. _src/app.html_ ```html ``` ### Vanilla JS Reference the icon from every page’s `` (or a shared layout partial). ```html ``` ## 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. ## Related problems - [Missing viewport meta tag](https://vibecheck.wcgw.fun/fix/missing-viewport-meta.md) — Web essentials - [Missing social preview image (og:image)](https://vibecheck.wcgw.fun/fix/missing-og-image.md) — Search visibility --- Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-favicon. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt