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

Only adding .ico file is not enough.

Add link tags to section in _document.jsx or _document.tsx The question is only about .ico file, but I would recommend to add different dimensions and formats for better support.

import React from 'react';
import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext): Promise {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render(): React.ReactElement {
    return (
      
        
          
          
          
          
          
          
          
        
        
          

          
        
      
    );
  }
}

export default MyDocument;

You can generate different icons using RealFaviconGenerator and upload results to /public/favicons/ folder. This folder can be referenced by /favicons/ due to nature of public directory.