by Sai gowtham

How to change a favicon in Next.js App

In this tutorial, we are going to learn about how to change a default favicon in the next.js app.

Changing the favicon

  1. Open the next.js app in your favorite code editor.
  2. Navigate to the public folder and add a new favicon by replacing the old one.
  3. Now, add the favicon to your pages <Head> component like this.
pages/index.js
import Head from 'next/head'

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Next App</title>
        <link rel="icon" href="/favicon.ico" />      </Head>

      <p>other code goes here..</p>
    </div>
  )
}

Note: The favicon.ico file path should be /favicon.ico not /public/favicon.ico.

  1. Restart the development server by running the npm run dev command and reload your next.js app to see a new favicon.

Similarly, if you have a favicon in .png or .jpg format then you can follow the above steps.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course