How to remove the default CRA react favicon?

Question

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

https://stackoverflow.com/q/1321878/5647260 - Maybe this'll help? — Andrew Li, Dec 25 '17 at 17:45

score 91 · Answer 1 · edited Jun 21 '18 at 05:44

91

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/

edited Jun 21 '18 at 05:44

David Kamer

2,677
2
19
29

answered Dec 28 '17 at 10:51

sudo bangbang

27,127
11
75
77

12

Can you be more specific on what a "hard refresh" is? – rodrigocfd Aug 17 '18 at 02:06
10

It's just refreshing the page with clearing cache. You can do it with ctrl-f5 in pc or cmd-shift-R in mac https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/#.W3ZP15MzbrQ – sudo bangbang Aug 17 '18 at 04:34
How to burst cache? – MadHatter Jun 01 '20 at 05:00
2

@MadHatter, do a [hard refresh](https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/) – sudo bangbang Jun 02 '20 at 08:17
In my case I tried all the above but still it still wasn't working, so for me the hard refresh was to kill the terminal and start again and it worked. – Affy Aug 13 '20 at 18:19
Clearing cache is not removing it! @sudo – Akhila Aug 13 '20 at 19:54
1

The editor or server doesn't have much to do with it. The icon is cached in the browser – sudo bangbang Oct 10 '20 at 15:52
1

@rodrigocfd if you have dev tools open you can right click the refresh button and you will see 3 options, normal reload, hard reload, and empty cache and hard reload, which will delete your cached images ;) – AnaCS Jun 16 '21 at 10:22

score 16 · Answer 2 · answered Jan 19 '19 at 15:20

16

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

answered Jan 19 '19 at 15:20

Rajat Rao

191
1
10

This alone won't work alongside this you have to remove your favicon.ico file as well – hardik chugh Feb 15 '20 at 11:03

score 11 · Answer 3 · answered May 05 '20 at 19:10

11

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

answered May 05 '20 at 19:10

gajo357

958
12
22

1

I was scratching my head for a while there... very good point. – lifelonglearner Nov 02 '20 at 15:07

score 7 · Answer 4 · edited May 29 '20 at 19:22

7

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

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

edited May 29 '20 at 19:22

double-beep

5,031
17
33
41

answered May 29 '20 at 19:05

Tri Mueri Sandes

129
1
6

score 6 · Answer 5 · answered Dec 25 '17 at 17:53

6

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 .

answered Dec 25 '17 at 17:53

mostafa tourad

4,308
1
12
21

score 5 · Answer 6 · answered Nov 21 '20 at 05:39

5

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..

answered Nov 21 '20 at 05:39

Ajay jangid

711
9
9

this was simple and easy to do..Thanks – Rahman Haroon Jan 10 '21 at 14:52

score 4 · Answer 7 · answered May 27 '21 at 18:23

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/

score 4 · Answer 8 · answered Jul 15 '21 at 06:38

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.

score 1 · Answer 9 · answered May 27 '21 at 10:31

1

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

then refresh site.

answered May 27 '21 at 10:31

Kasun Hasanga

1,626
4
15
35

score 1 · Answer 10 · answered Jan 16 '23 at 14:29

1

Just replace your project_folder/public/favicon.io with your icon. You can just rename your .png or .jpeg file to favicon.io, it just works.

answered Jan 16 '23 at 14:29

Arun Nayak

11
2

score 0 · Answer 11 · answered May 10 '22 at 19:18

0

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

answered May 10 '22 at 19:18

Towhid Mahmud

1

score 0 · Answer 12 · answered Jun 12 '22 at 17:51

0

download icon file and place it in public folder rename it favicon after renaming open in any editor and open that file and then refresh

answered Jun 12 '22 at 17:51

Snehil Bawgi

1

score 0 · Answer 13 · answered Jul 27 '22 at 12:44

0

Fast changes without deleting Browser cache or history : Ctrl+F5

answered Jul 27 '22 at 12:44

nbl_vario

1

score 0 · Answer 14 · answered Nov 25 '22 at 06:32

0

Just delete the favicon.ico , move any image in public folder and rename in favicon.ico ....worked for me

answered Nov 25 '22 at 06:32

xcrx news

51
3

How to remove the default CRA react favicon?

14 Answers14

Linked