How to Add a Favicon to a Next.js Static Website?
Last Updated :
06 May, 2024
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.
What is a favicon?
A favicon, short for “favorite icon,” is a tiny image that appears in your browser tab when you visit a website. It’s like a mini logo for the site and helps you recognize it easily. Usually, it’s the company logo or a small symbol related to the website.
In Next.js, adding a favicon is usually easy, but sometimes it might not show up correctly. In this article, we’ll explain how to add a favicon to your Next.js project step by step.
Getting a Favicon
Favicons should be square, typically 16×16 or 32×32 pixels, and in formats like .ico, .png, or .svg. Most preferred formats are mostly .ico and .png. If you don’t have one, there are many online tools that you can use to create your favicon.
Steps to Create an Application to implement favicon in NextJS static site
Step 1: Create a new Next.js project using `npx create-next-app `.
npx create-next-app <-foldername->
Step 2: Navigate to the project directory.
cd <-foldername->
Install required modules:
npm install next
Project Structure:
The Updated Dependencies in package.json File:
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.3"
},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.
JavaScript
// 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>
);
}
Adding a favicon.ico File to the Public Directory
Next.js automatically serves static files placed in the public directory. Therefore, you can simply add the favicon.ico file to the public directory of your Next.js project, and it will be accessible from the root of your application.
- Place the favicon.ico file in the public directory.
- Next.js will automatically serve the favicon.ico file at the root of the application.
- You do not need to add any additional code to include the favicon in your pages.
Output:
As you can see above in the tab of browser
Icon in PNG convert to ico
Conclusion
A favicon may seem like a small detail, but it plays a crucial role in branding and enhancing the user experience of a website. It serves as a visual identifier that helps users quickly recognize and distinguish your website among multiple open tabs in their browser. By using your logo or a related symbol as the favicon, you reinforce your brand identity and create a cohesive browsing experience for visitors.
Share your thoughts in the comments
Please Login to comment...