React - change favicon

In this article we would like to show you how to change default favicon in React project.

By default favicon is located under public/favicon.ico path and is attached to webpage inside public/index.html file as:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

Where: %PUBLIC_URL% represents public/ directory.

To change icon we can select one of the following approaches:

• Solution 1: replace public/favicon.ico file with new one.
• Solution 2: choose a new image with .png extension, let's say example.png, put it inside public/ folder and attach it inside public/index.html file replacing favicon.ico with example.png in the path.

Note: Here you can find useful article descrbing how to convert images to a proper size.