How to add a favicon to Next.js

Create your favicon in Faviqon and download the ZIP. The pack includes favicon.ico, PNG icon sizes, a web manifest and a README.

Extract the files before adding them to your Next.js project.

In most Next.js apps, favicon files belong in the public folder. Files in public are served from the site root, so public/favicon.ico becomes /favicon.ico.

Keep the exported filenames as they are unless you also update the HTML or metadata references.

You can use Next.js metadata or standard link tags. The important part is that browsers can find favicon.ico, the Apple Touch icon and the web manifest.

After deploy, hard refresh the site or open it in a new browser session because favicons are aggressively cached.