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

In my case it DID NOT WORK WITH OUT THE IMPORT:

file: _app.tsx

    import { AppContext, AppProps } from "next/app";
    import "../styles/common.scss";
    import Head from 'next/head';
    //For me it didn't work without the following import...
    import favico from "../static/favicon.ico";
    
    
    function MyApp({ Component, pageProps }: AppProps) {
      const csrfToken = pageProps["anti-csrftoken-a2z"];
      return (
        

          
            
          
          
        
      );
    }
    
    MyApp.getInitialProps = async ({ Component, ctx }: AppContext) => {
      let pageProps = {};
      if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx);
      }
      return { pageProps };
    };
    
    export default MyApp;