# Missing favicon in Next.js
> How to fix missing favicon in Next.js — with the exact fix and copy-paste code.
_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.
## 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 `` 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)
### 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 ``
## 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
## 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.
See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/missing-favicon.md
---
Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-favicon. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt