How to remove the default CRA react favicon?

Reactjs Problem Overview

I already remove the link in the head tag and still the favicon gets rendered, is there anyway this can be remove or change?

Reactjs Solutions

Solution 1 - Reactjs

Your favicon is in project_root > public > favicon.ico.

|
`--- public
     |
     `--- favicon.ico

Removing it is hard as browser generally uses a cached favicon if it doesn't find anything.

I'd urge you to change it. Just replace the favicon.ico file with an image of your choice. You can even rename a png to favicon.ico and use it. Make sure you do a hard refresh. You have to burst cache to see that change.

If you want to go all in on this, generate a favicon using https://www.favicon-generator.org/

Solution 2 - Reactjs

Try this:-

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

<link rel="shortcut icon" href="/a.png" /> which should be not present by the way or try deleting the favicon

Solution 3 - Reactjs

You can change it from the public directory with your own favicon and but you'll see while developemnt but when you run

npm run build

you won't see it in the index.html link tag you'll only see it on the development .

Solution 4 - Reactjs

You have to do all the above (or below), but you also need to clear your browsing history.

Solution 5 - Reactjs

Go to directory of your project → public → open manifest.json:

  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }

Solution 6 - Reactjs

just simply rename your image to favicon.ico and replace the actual favicon.ico image in public-folder by your renamed-image. and then just refresh you page..

Solution 7 - Reactjs

You may have to generate the flavicon. After you decide on an image that you want to use for the flavicon, this site will help you generate the .ico file. You may have to edit the HTML to include the correct resizing properties.

https://realfavicongenerator.net/

Solution 8 - Reactjs

Just Navigate to public Folder in your react project and then remove the file named favicon.ico. Then after you should replace that file with your favorite icon or any png image by renaming it as favicon.ico like the one you had before. then refresh your page.

Solution 9 - Reactjs

get your icon and replace it with ~~your_director~~/public/favicon.ico

then refresh site.

Solution 10 - Reactjs

Go to index.html file. After that remove the default href value () from it and simply replace your icon source here.

Content Type	Original Author	Original Content on Stackoverflow
Question	null	View Question on Stackoverflow
Solution 1 - Reactjs	sudo bangbang	View Answer on Stackoverflow
Solution 2 - Reactjs	Rajat Rao	View Answer on Stackoverflow
Solution 3 - Reactjs	mostafa tourad	View Answer on Stackoverflow
Solution 4 - Reactjs	gajo357	View Answer on Stackoverflow
Solution 5 - Reactjs	Tri Mueri Sandes	View Answer on Stackoverflow
Solution 6 - Reactjs	Ajay jangid	View Answer on Stackoverflow
Solution 7 - Reactjs	Wesley Clark	View Answer on Stackoverflow
Solution 8 - Reactjs	UKWITEGETSE Jean de Dieu	View Answer on Stackoverflow
Solution 9 - Reactjs	Kasun Hasanga	View Answer on Stackoverflow
Solution 10 - Reactjs	Towhid Mahmud	View Answer on Stackoverflow