In both Firefox and Chrome, the browser will not recognize my favicons, throwing 404 errors in the Network panel for all favicon files on both localhost and remote sites.
All of my favicons are located in /favicon
. When I navigate to both mywebsite.com/favicon/favicon.ico
and localhost:5000/favicon/favicon.ico
I get an error 404. This is the case even after I have closed all tabs with the local and remote website, completely cleared the browser cache, then closed and reopened the browser. The issue is the same in both Firefox and Chrome.
For some reason, a directory called favicon.ico is being generated, no mater how many times I remove it from the local and remote repos. Inside it is a new manifest.json, identical to the manifest.json inside /favicon.
My index file is located in /static/index.html
Links in index.html
head are:
<link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/manifest.json">
Favicons and html were generated at favicon-generator. I added in /favicon
as a prefix to all of the files, as they are kept in /favicon
and not root.
This question has been asked and answered several times in the past 7 years, but I'm asking again as none of the solutions are working for me.
My problem was a directory structure problem, and a lack of undertanding of where the root is. Based on @GracefulRestart's suggestion, I moved /favicon
from the top-level directory to /static
, which is functioning as the website root.
So, the broken configuration was:
/mywebsite
-- /favicon
-- favicon.ico
-- manifest.json
-- /static
-- index.html
-- manifest.webmanifest
Moving /favicon into /static fixed the problem:
/mywebsite
-- /static
-- index.html
-- manifest.webmanifest
-- /favicon
-- favicon.ico
-- manifest.json
Still not 100% sure how and why a /favicon.ico
directory was automatically generated in the first, broken configuration.