How to add a favicon to a Next.js static site?

Question

I\'m trying to add a favicon to a Next.js static site without much luck.

I\'ve tried customising the document with components from \'next/document\' https:/

Answer 1

The accepted answer is nice, but might be worth pointing out that you don't have to modify _document.js for adding a favicon (nor for adding any tags to head).

I found out for myself that placing favicon in _app.js makes more sense. This file is most likely to exist already for setting up a layout for the pages or something like this. And you can add Head tag literally anywhere (see the docs)

So I ended up with _app.js

class MyApp extends App {
  render() {
  const { Component, pageProps } = this.props;
  return (
    
      
        
      
      
    
  );
}