Favicon.kz
Favicon in Next.js/React: App Router and Pages Router | Favicon.kz

Favicon in Next.js/React: clean setup

In Next.js, place icon files in /public and reference them using built-in metadata (App Router) or <Head> (Pages Router).

Simple workflow

  1. Generate a favicon ZIP set.
  2. Put files into /public (e.g., /public/icons/).
  3. Add links in <head> (metadata or <Head>).
Don’t forget manifest.json
If you support PWA or Android shortcuts, include a manifest with 192/512 icons.
Generate a favicon set
Read: manifest.json

FAQ

Do I still need favicon.ico if I have SVG?
It’s recommended. ICO improves compatibility and some edge cases.
Why do I see the old icon after deploy?
Caching is the usual reason. Verify paths and hard refresh.