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.
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 StructureDependencies
"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 meÂthod of changing the favicon in a ReactJS application entails placing a peÂrsonalized "favicon.ico" file in the "public" folder. By doing so, React automatically ideÂntifies 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 JSApproach 2: Using a React Package
In this approach, the utilization of a ReÂact package known as "react-favicon" is employeÂd. By adopting this method, there is eÂnhanced flexibility in effeÂctively managing and updating the favicon based on various application stateÂs 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 enableÂs 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
Similar Reads
How to create Header in React JS ? The Header is an important element of a websiteâs design. It's the first impression of the website. It provides useful links to other areas of the website that the user may want to visit. In this article, we will create a functioning Header using React JS and Material UI.Prerequisites:NPM & Node
2 min read
How to Make Text Blink in ReactJS ? In this article, we are going to learn about making a text blink in React. Making text blink in React refers to the process of creating a visual effect where text repeatedly alternates between being visible and invisible, creating a flashing or blinking appearance, often achieved through CSS animati
3 min read
How to use Icon Component in React JS? Every application requires icons for UI purposes, and integrating them with Material UI for React is seamless. Utilize the Icon Component in ReactJS effortlessly by following this straightforward approach. Prerequisites:NodeJS or NPMReact JSMaterial UISteps to create React Application And Installing
2 min read
How to use Badge Component in ReactJS? Badge generates a small badge to the top-right of its children component. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Badge Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReact JSMaterial UISteps to Create
2 min read
How to Change the Color of Icons using Material-UI in ReactJS? Changing the icon colors makes us able to keep the webpage according to themes. Material-UI icons is a React based module. React supports more than 1000 Material-UI icons. It is one of the most popular and in-demand frameworks.ApproachTo change the color of icons using the Material UI in React JS we
3 min read
How to use React Icons in Next.js ? Icons make the website beautiful and interactive. Icons are an important part of a website's user interfaces, which are used in expressing objects, actions, and ideas. They are used to communicate the core idea and intent of a product or action and express the object visually. Here, we will learn to
3 min read