1

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.

WhooNo
  • 911
  • 2
  • 12
  • 28
  • The `404` error would indicate that the web server cannot find the files in the location you have specified. What is the root for this website and where are the `/static` and `/favicon` directories on your web server? – GracefulRestart Feb 17 '19 at 02:22
  • root would be mywebsite. /static and /favicon are located in mywebsite. manifest.json and all of the favicons are inside /favicon. – WhooNo Feb 17 '19 at 02:26
  • Should also add that the automatically generated /favicon.ico directory is inside mywebsite (root) @GracefulRestart – WhooNo Feb 17 '19 at 17:02
  • 1
    I was looking for where in your filesystem those locations are in relation to your website root. The issue you describe sounds like you have your website root pointing to your `/static` directory, and then your `/favicon` directory is outside of your website root. If you could post the locations of `/static` and `/favicon` on your filesystem, in addition to the exact directory you have configured for your website root, it may shed some light on this particular issue. – GracefulRestart Feb 17 '19 at 19:00
  • That's it! I still don't understand how the root works relative to the directories, but I moved /favicon inside /static and the site now recognizes and finds all favicon files. Thanks, @GracefulRestart ! – WhooNo Feb 18 '19 at 18:37

1 Answers1

1

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.

WhooNo
  • 911
  • 2
  • 12
  • 28