Your New App Looks Unfinished Without a Favicon
You shipped the feature, wired the database, deployed to a real URL, and the browser tab still shows a blank sheet of paper. It's a tiny 16×16 square, and it quietly tells every visitor the product isn't finished.
Why it always happens
Favicons are the last 1% nobody schedules. Scaffolding a project gives you a placeholder icon for free, so the warning never fires, and the placeholder rides all the way to production.
Making a proper set by hand is genuinely annoying: export a dozen sizes, build an ICO, hand-write a manifest, paste twenty link tags. So it gets deferred to "later," and later never comes.
Why a blank tab costs you
The tab icon is your brand at its smallest. When someone has 30 tabs open, the favicon is the only way they find yours again. A blank one is invisible.
It's also the cheapest credibility signal there is. A crisp icon reads as "a real product;" a blank one reads as "a weekend prototype," even when the code underneath is excellent.
The square everyone actually sees
The tells of a missing icon
If any of these are true on your live site, visitors are seeing an unfinished app:
A blank page-with-a-corner-fold icon sitting in the browser tab.
The framework default (Next.js's, Vite's, or Create React App's logo) shipping to production.
A pixelated, stretched screenshot someone dropped into public/favicon.ico to make the warning go away.
Mismatched icons: one thing in the tab, another on the iOS home screen, nothing in the PWA install prompt.
Fix it in one step
The whole problem disappears the moment you stop treating icons as a manual chore. The flow is short:
- 1
Pick a source
An emoji, a brand mark, your logo file, or an image URL.
- 2
Generate the full set
favicon.ico, every PNG size, apple-touch-icon, Android icons, and manifest.json.
- 3
Install it
Drop the files into public/ and the link tags into your <head> (or app/layout.tsx).
- 4
Verify it
Check it renders in the tab, on mobile, and in the install prompt before you call it done.
By hand, or by agent
By hand
The reason it gets deferred
- Export a dozen sizes.
- Build an ICO.
- Hand-write a manifest.
- Paste twenty link tags.
Let your coding agent do it
Start hereClaude Code, Cursor, or any MCP-aware agent
- You never open a favicon generator at all.
- Icons are created and installed straight into the repo: files written, <head> patched.
- All from a single prompt like "add a fox favicon to this app."