How To Change The Favicon In React JS?

Last Updated : 13 Oct, 2024

A favicon is a small icon that appears in the browser tab next to the page title. Changing the favicon in a React JS project can help improve the branding of your web application by displaying a custom icon that represents your business or website.

In this article, we will explore the following two different methods for changing the favicon in a React JS application.

Table of Content

Approach 1: Using the public Folder
Approach 2: Using a React Package

Steps to Create React Application

Step 1: Create a react application by using this command

npx create-react-app <<My-Project>>
cd  <<My-Project>>

Step 2: To Start the application run the following command.

npm start

Project Structure

Folder Structure

Dependencies

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Approach 1: Using the public Folder

In this approach, the method of changing the favicon in a ReactJS application entails placing a personalized "favicon.ico" file in the "public" folder. By doing so, React automatically identifies and utilizes this file as the application's favicon.

Example: This example demonstrate how to modify index.html file in public folder to change the favicon in ReactJs

Step 1: Create or obtain a custom favicon file (In public folder) or use any image from the internet that you want to use for your React application.
Step 2: In your public/index.html file, make sure you have the following code inside the <head> section:

HTML

<!-- public/index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Favicon Image URL -->
    <link rel="icon" href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_favicon.png" />
    <!-- Other scripts and stylesheets -->
</head>

<body>
    <div id="root"></div>
</body>

</html>

JavaScript

// App.js 

import React from "react";

const containerStyle = {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    minHeight: "100vh",
    backgroundColor: "#ee",
    color: "black",
    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.4)",
};

const headerStyle = {
    textAlign: "center",
    marginBottom: "20px",
};

const headingStyle = {
    fontSize: "3rem",
    marginBottom: "10px",
    textTransform: "uppercase",
    letterSpacing: "2px",
    color: "green",
};

const paragraphStyle = {
    fontSize: "1.5rem",
    maxWidth: "600px",
    lineHeight: "1.5",
};

const App = () => {
    return (
        <div style={containerStyle}>
            <header style={headerStyle}>
                <h1 style={headingStyle}>
                    Welcome to GeeksforGeeks
                </h1>
                <p style={paragraphStyle}>
                    A Computer Science portal for geeks. It
                    contains well-written, well-thought, and
                    well-explained computer science and
                    programming articles.
                </p>
            </header>
        </div>
    );
};

export default App;

Output

Change the Favicon in React JS

Approach 2: Using a React Package

In this approach, the utilization of a React package known as "react-favicon" is employed. By adopting this method, there is enhanced flexibility in effectively managing and updating the favicon based on various application states or user interactions.

Install the "react-favicon" package using npm or yarn:

npm install react-favicon
# or
yarn add react-favicon

Example: This example showcases a React application that enables users to dynamically modify the website's favicon with a simple button click.

JavaScript

import React, { useState } from "react";
import Favicon from "react-favicon";

const App = () => {

    // Initialize the favicon URL state 
    // with the default favicon
    const [faviconUrl, setFaviconUrl] = useState(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_favicon.png"
    );

    // Function to toggle the favicon
    const toggleFavicon = () => {

        // Check the current favicon and
        // toggle to the opposite
        setFaviconUrl(
            (prevUrl) =>
                prevUrl ===
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_favicon.png" ?

                    // Change to your second favicon file
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
                    :
                    // Change to your first favicon file
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_favicon.png"
        );
    };

    const containerStyle = {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "100vh",
        backgroundColor: "#eee",
        color: "black",
        fontFamily: "Arial, sans-serif",
        textShadow: "2px 2px 4px rgba(0, 0, 0, 0.4)",
    };

    const headerStyle = {
        textAlign: "center",
        marginBottom: "20px",
    };

    const headingStyle = {
        fontSize: "2rem",
        marginBottom: "10px",
        textTransform: "uppercase",
        color: "green",
    };

    const paragraphStyle = {
        fontSize: "1.2rem",
        maxWidth: "500px",
        lineHeight: "1.5",
    };

    const buttonStyle = {
        padding: "10px 20px",
        fontSize: "1rem",
        backgroundColor: "#0074D9",
        color: "white",
        border: "none",
        cursor: "pointer",
        borderRadius: "4px",
    };

    return (
        <div style={containerStyle} className="App">
            <Favicon url={faviconUrl} />
            <header style={headerStyle}>
                <h1 style={headingStyle}>
                    Welcome to GeeksforGeeks
                </h1>
                <p style={paragraphStyle}>
                    Click the button below to change the
                    favicon.
                </p>
                <button
                    onClick={toggleFavicon}
                    style={buttonStyle}
                >
                    Toggle Favicon
                </button>
            </header>
        </div>
    );
};

export default App;

Output

Change the Favicon in React JS

How to Change the Favicon in React JS?

S

saurabhkumarsharma05

Improve

Article Tags :

Explore

React Tutorial

React Lifecycle