How to usethe public Folder in ReactJS
In this approach, the method of changing the favicon in a React.js 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:
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 w3wiki </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; |
HTML
<!-- public/index.html --><!DOCTYPE html><html lang="en"><head> <!-- Favicon Image URL --> <link rel="icon" href="https://media.w3wiki.org/wp-content/cdn-uploads/gfg_favicon.png" /> <!-- Other scripts and stylesheets --></head><body> <div id="root"></div></body></html> |
Output:
How to Change the Favicon in React JS?
Changing the favicon in a React JS application involves a simple process to customize the default icon displayed in the browser tab. The favicon, a small image typically in the .ico format, serves as a visual identifier for the website.
In this article, we will explore the following two different methods for changing the favicon in a React JS application.
Table of Content
- Using the public Folder
- Using a React Package