I'm hosting a website using Github Pages. I connected Cloudflare to the website because of SSL. When i finally added favicon.ico to my website and the following code in <head> to make the favicon show up, it still doesn't show up. What can i do?
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
(english is not my native language)
Edit: Seems like other people can see the favicon, except me. But why?
I have had the exact same problem. I was able to solve it by including a ? in the end.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
I am not exactly sure why adding in ? works but the code below does not.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
Adding a question mark at the end of the path is one workaround.
<link rel="shortcut icon" type="image/png" href="coin.png?">
Try also using a URL from a site that has the image, it might work.
<link rel="shortcut icon" type="image/x-icon" href="./Images/favicon.ico?">
if you did something like this , then go to your github.io page and hard reload. You can use
ctrl/cmd + shift + r
to hard reload the page . That will clear your cache .
If you've deployed a project created using npm to Github Pages and if your build files are in a separate sub-directory, you'll have to define the path to the favicons like this (note the dot).
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
On Ubuntu 22.04 with Firefox from Mozilla PPA just doing Ctrl+F5 is enough.
However F5 or a restart of Firefox is not sufficient.
I didn't know that...
