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!

Phewwwwww.

Hope this helps someone getting frustrated with the same issue.

Happy coding!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sneha Herle

Sneha Herle

9 Followers

I'm a Software Developer with a penchant for coding. My greatest passion is to work on a product which makes lives better and has a positive impact on nature.