# Missing favicon in Svelte
> How to fix missing favicon in Svelte — 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 Svelte
Place the icon in static/ and link it in `app.html`.
_src/app.html_
```html
```
### 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