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

16x16

32x32

48x48

96x96

180x180

Rendered at true pixel dimensions. The 16px swatch on the left is the one sitting in the tab — that is the size your brand has to survive at.

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:

Pick a source — An emoji, a brand mark, your logo file, or an image URL.

Generate the full set — favicon.ico, every PNG size, apple-touch-icon, Android icons, and manifest.json.

Install it — Drop the files into public/ and the link tags into your (or app/layout.tsx).

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 (recommended)

Claude 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, patched.

All from a single prompt like "add a fox favicon to this app."

Don't ship the blank sheet of paper: A finished-looking app starts in the tab bar. Generate a complete icon set, then scan your live site to confirm it landed.