Framework Guide

Next.js Favicon Guide

Learn how to properly implement favicons in Next.js applications using the latest best practices.

Three Ways to Add Favicons

App Router Setup

Using metadata API and app/icon files

Method 1

Pages Router Setup

Traditional _document.js approach

Method 2

Static Files

Serving from public directory

Method 3

1. App Router (Next.js 13+)

Option A: Using icon.tsx (Recommended)

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    (
      <div style={{ background: '#000', width: '100%', height: '100%' }}>
        {/* Your icon content */}
      </div>
    ),
    { ...size }
  )
}

Option B: Using Metadata API

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
}

2. Pages Router (Next.js 12 and below)

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

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

3. Static Files in Public Directory

File Structure:
public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png  
├── apple-touch-icon.png
└── android-chrome-192x192.png
Next.js automatically serves these files when placed in public/

Next.js Favicon Best Practices

📱 Use App Router when possible

The App Router provides better favicon handling with the Metadata API and automatic optimization.

⚡ Optimize file sizes

Keep favicon.ico under 1KB and use appropriate compression for PNG files.

🔄 Test on different devices

Verify your favicon appears correctly on mobile devices, tablets, and desktop browsers.