Where do favicon files go in Next.js App Router?

Place the PNG favicon files in your public/ directory — they'll be served from the root URL. Place favicon.ico in the app/ directory if you want Next.js to serve it automatically. Use the metadata icons API in your root layout.tsx to reference the PNG files.

Why isn't my favicon updating in Next.js?

Next.js and browsers aggressively cache favicons. Hard refresh with Ctrl+Shift+R, clear browser cache, or open in a private/incognito window. In development, also try clearing the .next/ cache folder.

Do I need both favicon.ico and PNG files in Next.js?

For maximum compatibility, yes. favicon.ico covers legacy browsers. PNG files with link tags cover modern browsers at specific sizes.

Favicon Setup for Next.js — Complete Guide for App Router and Pages Router

App Router: The favicon.ico Approach

In Next.js App Router (Next.js 13+), the simplest approach is placing a favicon.ico file in your app/ directory. Next.js automatically serves it at /favicon.ico and adds the correct link tag to the HTML head. For additional PNG sizes and the Apple Touch Icon, use the metadata icons API or add link tags in your root layout.tsx.

App Router: Metadata API for All Sizes

For full favicon coverage in App Router, use the metadata icons field in your root layout.tsx. Place all favicon files in your public/ directory. Generate them with FreeFaviconGen first, then reference them in the icons metadata field.

Pages Router: Direct Head Tag Approach

In Next.js Pages Router, add favicon link tags to _document.tsx or use the Head component from next/head in _app.tsx. Copy the HTML snippet from FreeFaviconGen's Code Snippets section directly into your Head component. Place all favicon files in the public/ directory.

PWA Support in Next.js

For PWA support, create a manifest.json (or site.webmanifest) file in your public/ directory and reference it in your HTML head or metadata. FreeFaviconGen generates a complete manifest.json snippet in the Code Snippets section. Customize the name, short_name, theme_color, and background_color values to match your app.