How to Add a Favicon to Next.js Static Site?

You might come across the phrase favicon when it comes to web development. But what is it exactly? Well, in this article, we’ll be addressing your query and teaching you how to add a favicon to your static Next.js website. Let’s get started!

What is a Favicon, and Why is It Important?

Simply defined, a favicon is your website emblem that shows next to the meta title on your browser tab. In other words, instead of presenting a blank document symbol on the browser, your website will show your official website icon.

Most websites generally utilize their logo as a favicon. In this manner, your visitors will quickly discover your website when they’re viewing a number of tabs in a single web browser. Plus, your site will seem a lot more professional.

How to Add a Favicon to Your Next.Js Website?

In your project root directory, Simply add your favicon.png to the public folder, Then open the _document.js file inside the pages folder. If you don’t have a _document.js file then create a new _document.js file and paste the following code.

import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="shortcut icon" type="image/png" href="/favicon.png" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Once you’ve saved your modifications, the favicon should now appear as your website’s icon.

Another way of adding a favicon in the next.js static website is by adding it to the _app.js file. See the example below:

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

    return (
      <Layout>
        <Head>
          <link rel="shortcut icon" type="image/png" href="/favicon.png" />
        </Head>
        <Component {...pageProps} />
      </Layout>
    );
  }
}

Was this tutorial helpful? Leave a comment below!

Read: Best Online JavaScript Editors


Author Images
Syed
From Islamabad

A software developer with a keen interest in writing about technology, finance, and entrepreneurship. I've written for businesses in a variety of fields, including new technology, healthcare, programming, consumer applications, corporate computing, UI/UX, outsourcing, and education.

Post a comment

Your email address will not be published. Required fields are marked *

    Press x to close