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

Next.js can add favicon tags for you. Where you put the files depends on which router your project uses.

App Router (the app folder)

Put the files directly in the app folder. Next.js detects them by name and adds the right <link> tags:

File in app/	What it becomes
favicon.ico	The favicon (only allowed at the top level of app/)
icon.png or icon.svg	<link rel="icon">
apple-icon.png	<link rel="apple-touch-icon">

app/
  favicon.ico
  icon.svg
  apple-icon.png
  layout.tsx

Delete the default favicon.ico that create-next-app adds if you’re replacing it, restart next dev, and hard-refresh the browser.

Pages Router (the pages folder)

Put the files in public/ and add the tags yourself in pages/_document.tsx (or with next/head):

<Head>
  <link rel="icon" href="/favicon.ico" sizes="48x48" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</Head>

Getting the files

The favicon generator gives you favicon.ico, the PNGs and the manifest. For the App Router, rename apple-touch-icon.png to apple-icon.png. If your logo is an SVG, use SVG to favicon and keep favicon.svg as app/icon.svg.