Configuring Favicons in Next.js

Modern frameworks require modern meta tag strategies. Configure your browser icons properly in Next.js.

Method 1: Next.js App Router (metadata API)

In modern Next.js (version 13+ App Router), you can place your icon files directly inside the root of your app directory:

  • app/favicon.ico (Automatic legacy fallback mapping)
  • app/icon.png (Generates favicon links dynamically)
  • app/apple-icon.png (Used for Apple home screen icons)

Alternatively, you can declare icons in your root layout.js file using the metadata API:

export const metadata = {
  title: 'My App',
  icons: {
    icon: '/favicon-32x32.png',
    shortcut: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
};

Method 2: Pages Router or HTML links

If you are using the Pages Router, edit your _document.js file inside the pages directory and include standard meta markup:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}