How to Add a Favicon to a Next.js Static Website? - Coding

To add a favicon to a next.js static website we can utilize the public directory of our next js project. 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.

Here are 2 approaches to implement the required favicon in the next.js website

Table of Content

Using Head Component
Using Public Directory

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 Implement favicon in NextJS static site

Step 1: Create a new Next.js project using `npx create-next-app `.

npx create-next-app <-foldername->

Screenshot-2024-04-26-155554

Step 2: Navigate to the project directory.

cd <-foldername->

Project Structure:

Screenshot-2024-04-26-155859

The Updated Dependencies in package.json File:

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.3"
},

Using Head Component

This approach implements the favicon by adding a 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.

Example:

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>
    );
}

Using Public Directory

To add a favicon to a Next.js static website, place your favicon.ico file in the public directory of your Next.js project. Next.js automatically serves all files from the public directory at the root of your website. This makes your favicon accessible at the root URL, typically http://localhost:3000/favicon.ico.

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.

Screenshot-2024-04-26-160928

Output:

As you can see above in the tab of browser

Icon in PNG convert to ico

Screenshot-2024-04-26-161045

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.

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
How to programmatically navigate using React Router ?
How to Get Query Parameters from URL in Next.js?
How to use Context API with TypeScript and Next.js?
When to Choose Enzyme Over React Testing Library?
NextJS 14 Folder Structure

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12