Import Head component
This approach involves adding the favicon link inside the <Head> component provided by the next/head module. Here’s how to implement it:
- Import the Head component from next/head in the page.js file (or any layout file that is used across all pages).
- Include the <Head> component inside the layout file’s JSX structure.
- Add the favicon link within the <Head> component, specifying the path to the favicon file.
// src/app/page.js
import styles from "./page.module.css";
import Head from "next/head";
export default function Home() {
return (
<div>
<Head>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>welcome to Next js site</main>
</div>
);
}
How to Add a Favicon to a Next.js Static Website?
A favicon is a small icon that appears in the browser tab next to the page title. It helps users identify your website easily. In this article, we’ll explore different approaches to adding a favicon to a Next.js static site.
Table of Content
- What is a favicon?
- Getting a Favicon
- Import Head component
- Adding a favicon.ico File to the Public Directory
- Conclusion