How to add favicon in React

To add a favicon to your React project, you can follow these steps:

Create a favicon.ico file: You can use an image editor or online tools to create a favicon image. You can also use figma to create your own favicon or you can simply download an image, and then use some favicon generator sites, which will automatically generate favicon of your downloaded image.The file should be named favicon.ico and should be placed in the public folder of your React project.
Add the link tag to your index.html file: Open the index.html file in the public folder of your project and add the following code within the head tag:

htmlCopy code<link rel="icon" type="image/ico" href="%PUBLIC_URL%/favicon.ico" />

Restart your development server: Restart your React development server to see the changes. Your favicon should now appear in the browser tab.

Note: You can also use a different image format such as .png or .jpg. Also, if you are using a React framework such as Next.js, the steps may differ slightly.

How to change title in React-

To change the title of a React project, you can modify the title tag in the public/index.html file. Here's how to do it:

Open the public/index.html file in your React project.
Locate the title tag: The title tag is typically located within the head tag and looks like this:

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>React App</title>  <!-- This is the default title -->
</head>

Change the title: Replace the text between the title tags with your desired title. For example:

htmlCopy code<title>My Awesome React App</title>

Save the file and run the project: Save the changes to the index.html file and run your React project. You should now see the updated title in your browser tab.

How to change Title Dynamically-

Import React and the useEffect hook: At the top of your component file, import React and the useEffect hook:

import React, { useEffect } from 'react';

Set the document title with useEffect: Within your functional component, use the useEffect hook to set the document title:

function MyComponent() {
  useEffect(() => {
    document.title = "New Title";
  }, []);

  return (
    // JSX code for your component
  );
}

In the example above, useEffect takes a function as its first argument that sets the document title to "New Title". The empty array as the second argument indicates that this effect should only be run once when the component mounts.

Replace "New Title" with your desired title: You can replace "New Title" with any string that you want to use as the document title.

That's it! When your component mounts, the document title will be set to your desired title. You can also update the title dynamically based on component state or props by using the useEffect hook with appropriate dependencies.

Disha Jain's blog

Disha Jain's blog

How to add favicon in React

Table of contents

How to change title in React-

How to change Title Dynamically-