Adding Favicon In React App
1 min readMar 27, 2023
To add a favicon to your React app, you can follow these steps:
- Create a
favicon.icofile: You can use an image editor to create a.icofile with the icon you want to use. - Place the
favicon.icofile in thepublicdirectory: Create apublicdirectory in the root of your React app if it doesn't exist already. Place thefavicon.icofile in this directory. - Add the link tag to your HTML: Open the
public/index.htmlfile and add the following link tag to the<head>section:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />This will link to the favicon.ico file in the public directory.
- Restart your development server: If your development server is already running, you will need to stop it and restart it for the changes to take effect. Once you have completed these steps, you should see your favicon in the browser tab and address bar.
