Set Favicon in Next 13

12 April 2023

This is how to set the favicon in Next 13 (the current beta) (the one with an app/ directory) (the one without the pages/ directory) (you know, the one).

Normal HTML

Next.js can't do things the reliable way. It's gotta be fancier. Probably for that asset fingerprinting. Sweet, sweet fingerprinting.

In normal HTML, you'd do:

<head>
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>

Don't do this in Next.js.

Methods that don't work

Here are things I've seen recommended or have personally misinterpreted. Don't do these; They don't work.

Don't just put your favicon.ico file in public/ and call it a day. It won't get picked up. You'd think that's where static assets go, but nooo.

Don't set this in the src/app/layout.js Head:

import Head from 'next/head'
...
<Head>
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
</Head>

It won't work.

Don't set this in the metadata of src/app/layout.js:

export const metadata = {
  icons: {
    icon: '/favicon.ico'
  }
}

This seems the most likely to work because it's the most-often recommended. Still, it did not work for me.

Don't do the same icons config as above, just in the next.config.js file. We have more metadata now, and it's in that exported const in layout.js.

Even interpreted the docs like this once: Don't add a file to src/app/icon.js with the for the content. That won't work either.

Method that Worked

The only method that worked is simple enough. Hopefully you're finding the shortcut there.

Put your favicon.ico file in the src/app/ directory. That's it. It'll be used, fingerprinted, kabam.