React - change favicon

3 points
Created by:

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.
public/index.html file with example.png used as new favicon.
public/index.html file with example.png used as new favicon.

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


React - change favicon
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂