Default React Favicon shows up on pdf view instead of customized one

user_19517637 0
Viewed 135

I have the following file structure in my React App - public folder:

enter image description here

So my custom favicon that I added(instead of the default React one that I deleted) is working fine, it shows up. Now when the pdf opens in the browser it shows the React favicon.

I read here that the pdf is not a regular html page, so the favicon is not defined as it could be. The fallback is the favicon with the .ico extension in my public folder.

But if thats the case then it should show my favicon that is already in the public folder?

The pdf is linked this way, I use the Link Mui component:

<Link
href="/documents/Privacy-Policy"
target="_blank"
rel="noopener noreferrer">
Privacy Policy
</Link>

What can I do so my favicon or at least no favicon shows up?

material-ui reactjs favicon html
3 Answers

In your public folder, check the index.html file.

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

Edit it to any image name of your choice.

In my case, I would use <link rel="icon" href="%PUBLIC_URL%/logo.svg" /> to denote my preferred image name

user_194354810

Update

In production it shows no favicon on Chrome and Firefox. While on localhost it still shows the default React favicon on Chrome and Firefox.

Best case would be to have also my favicon when I open the pdf in Browser but no favicon is good enough for me.

user_195176370

Maybe, you can just rename it from logo.ico to favicon.ico (which is the name of the default react favicon).

user_105156380
Related