Favicon working on localhost but not on GitHub Pages
Does the title sound similar? I might be able to help you if you are facing the same issue.
In the React app, I built using create-react-app, I could see the default react favicon on localhost.
I had added the below line of code in my index.html and the favicon.ico file was also present in the same folder (static/public):
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
After doing all my changes to the web app, I used GitHub pages to host it.
But I was really disappointed to see that the favicon was not working at all. I personally don’t like an application without a favicon, I am kinda weird about it.
So I searched and wasted so much time to get it to work. But nothing seemed to work for me.
After trying multiple changes, it finally worked for me when I replaced my previous line of code (see above) with the one below:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
After changing this line of code and committing to git, and then executing:
npm run deploy
It finally worked for me! IT DID WORK!
Hope this helps someone getting frustrated with the same issue.