Skip to content

Social & sharing · Next.js (App Router)

How to add a favicon in Next.js (App Router)

The favicon is your identity in a row of thirty browser tabs and in every bookmark list. A missing one shows a blank sheet of paper next to your product name.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

Drop a file into app/ and Next handles the tags:

Configuration
app/favicon.ico     →  /favicon.ico
app/icon.svg        →  <link rel="icon">
app/apple-icon.png  →  <link rel="apple-touch-icon">

Or generate one with app/icon.tsx using ImageResponse, the same way as the OG image.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.