How to change the favicon in React.js [4 Ways]

# Table of Contents

# How to change the favicon in React.js

To change the favicon in React.js:

Open the public/ directory and replace the old favicon.ico file with your new favicon.ico file.

You can download a sample favicon for testing by visiting google.com/favicon.ico. Right-click on the icon and select Save as.

Once you've replaced the public/favicon.ico file with your new favicon, restart your development server and refresh the page.

You might have to clear the cache by pressing Ctrl + R or Ctrl + Shift + R.

To clear the cache in Google Chrome:

Open your developer tools by right-clicking on the page and selecting Inspect or by pressing F12.
Right-click on the Reload button right next to the address field.
Select Empty Cache and Hard Reload.

After you empty the cache and reload the page, you should be able to see the new favicon.ico file.

If you use Firefox, to clear the cache and do a hard refresh, press Ctrl + Shift + R.

Or you could simply press Ctrl + F5.

The code for this article is available on GitHub

# Using a favicon file with a different extension or name

If you have a file icon file with a different extension (e.g. .png) or with a different name, you might have to update the path that points to the favicon in your public/index.html file.

If you use create-react-app, the relevant line in your public/index.html will look as follows.

public/index.html

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

The line will be located in the head section of your HTML file.

For example, if your favicon file has a .png extension, you'd have to update the path that points to the favicon file as follows.

public/index.html

Copied!
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />

The %PUBLIC_URL% environment variable gets automatically replaced with the URL of the public folder during the build.

You can also rename a file with a .png extension to favicon.ico and use the following path.

public/index.html

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

Note that only files inside the public folder can be referenced from the HTML.

If you aren't able to load the favicon or don't use create-react-app, try one of the following paths instead.

public/index.html

Copied!
<link rel="icon" href="favicon.ico" />

<!-- OR with / prefix -->
<link rel="icon" href="/favicon.ico" />

Make sure to clear the cache and restart your development server every time you change the favicon URL or the favicon file in your public/ directory.

Favicons don't change often, so the browser will likely send back the cached favicon until you do a hard refresh as shown in the previous subheading.

Pressing Ctrl + F5 clears the cache on most browsers.

The code sample assumes that you have a folder structure similar to the following.

shell

Copied!
my-project/
  └── public/
    └── favicon.ico
    └── index.html

The code for this article is available on GitHub

I've also written a detailed guide on where to store images in a React.js application.

# Changing the favicon programmatically in React.js

You can also change the favicon programmatically, e.g. when an event occurs or when the user navigates to a different page.

The next example assumes that you have 2 favicon files in your public/ directory - favicon.ico and favicon-dev.ico.

shell

Copied!
my-project/
  └── public/
    └── favicon.ico
    └── favicon-dev.ico
    └── index.html

Here is an example that changes the favicon dynamically when a button is clicked.

App.js

Copied!
function App() {
  const changeFavicon = env => {
    const link = document.querySelector('link[rel="icon"]');

    if (link && env === 'dev') {
      link.setAttribute('href', 'favicon-dev.ico');
    } else {
      link.setAttribute('href', 'favicon.ico');
    }
  };

  return (
    <div>
      <button onClick={() => changeFavicon('dev')}>
        Dev favicon
      </button>

      <button onClick={() => changeFavicon()}>
        Prod favicon
      </button>
    </div>
  );
}

export default App;

The code for this article is available on GitHub

Here is a short clip that demonstrates how this works.

We added onClick event handlers, so every time the user clicks a button, the corresponding event handler function is invoked.

The document.querySelector method is used to select the link element that has an href attribute set to icon (the favicon element).

Once we select the element, we can use the setAttribute() method to update the element's href attribute and change the favicon.

# Change the favicon when a certain component mounts

If you want to change the favicon when a certain component mounts, you should use the useEffect hook.

App.js

Copied!
import {useEffect} from 'react';

function App() {
  useEffect(() => {
    const link = document.querySelector('link[rel="icon"]');

    if (link) {
      link.setAttribute('href', 'favicon-dev.ico');
    }
  }, []);

  return (
    <div>
      <h2>bobbyhadz.com</h2>
    </div>
  );
}

export default App;

The code for this article is available on GitHub

The code sample assumes that you have a favicon-dev.ico file in your public/ directory.

Make sure to update the name of the attribute depending on the name of the file.

The first argument we passed to the useEffect hook is a function and the second is a dependencies array.

The callback function gets invoked every time one of the dependencies in the array changes.

We only want to change the favicon the first the time component renders, so we used an empty dependencies array.

I've also written an article on how to redirect to another page on button click in React.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to change the favicon in React.js [4 Ways]

# Table of Contents