React - change favicon

3 points
Created by:

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

Quick solution:

Change default faviconĀ file that is located under public/favicon.icoĀ path.

Its path is attached to webpage inside public/index.html file as:Ā 

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

Where:Ā %PUBLIC_URL% representsĀ public/ directory inĀ default configuration.


Detailed description

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

  • Solution 1: replace public/favicon.icoĀ fileĀ  to new one *.ico file
    (we can change path also).
  • Solution 2: useĀ *.png image file.
    e.g. putĀ example.pngĀ file 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.


Alternative titles

  1. React - change *.ico file
  2. React - change website icon
  3. React - change webpage icon
  4. React - change web site icon
  5. React - change web page icon
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.


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.

ā¤ļøšŸ’» šŸ™‚