htmlfaviconweb-manifest

Favicon error 404 for local and remote, favicon.ico directory automatically generated in git repo


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.


Solution

  • 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.