How to Change the Favicon & Title of Your React App in 5 Minutes

A magnifying glass over a browser tab’s favicon

When I showed my brother, a senior software engineer, my first project for my coding bootcamp, the first thing he said was “you should change the favicon and title next time.”

… Favicon? I had no clue what that was. A quick Google search told me that the browser tab’s favicon and title could be seen here:

When you create a React app, it comes with a default React favicon (React logo icon) and a title (‘React App’).

The task of editing the title and switching out the default favicon that comes with all React apps seemed difficult to me… But with a little googling and playing around I figured out how to change both in less than 5 minutes, here’s how:

Changing the Title

1. Open the index.html file in your code editor (public/index.html):

starter code within index.html file

2. Within the head tags, find the title tags… it should look like this:

 <title>React App</title>

3. Replace ‘React App’ with whatever you want to title your app, for example, ‘To-Do List’:

<title>To-Do List</title>

4. Save your changes in your code editor, refresh the browser tab, and you should see your new title!:

Ta-da! Our new title displayed!… Just need to change our favicon now.

Changing the Favicon

1. In your code editor, find the favicon file in the public folder of your React app… it’s called, ‘favicon.ico’:

When you create a React app, it comes with a ‘public’ folder, which contains the default favicon (‘favicon.ico’).

2. Delete the favicon file: right click on ‘favicon.ico’, then click ‘Delete’.

3. Find a new favicon to replace the default React favicon. Google Image search for an icon/emoji and save the image you like somewhere on your computer. It’s best to find an image that’s in .png format and has a transparent background. For this ‘To-Do List’ example, I searched for a green checkmark icon, and saved it to my desktop.

Green checkmark image with transparent background and .png extension.

4. Drag and drop the saved image into the public folder of your code editor:

Green checkmark image dragged and dropped into the public folder of our React app.

5. Right click on the image file you just added, then click ‘Rename’, and replace the entire file name (including .png extension) with ‘favicon.ico’:

Image file name renamed from ‘check-mark.png’ to ‘favicon.ico’ in the public folder of our React app.

6. Save your changes in your code editor, refresh the browser tab, and you should see the new favicon along with the new title!:

We did it! Our new favicon and title both display in the browser tab of our React app.