Gatsby not loading favicons

Question

We are using gatsby-plugin-manifest to generate our manifest files and import our favicons. Everything is working properly on our local development server, as in the icons are loaded.

However, when we build the static HTML of our website and run this file on our server, we get a 404 error on all icons: /icons/icon-48x48.png?v=0a830f59a4abe247647ea123ff4fc96e'. It looks like our service worker can not resolve the URL of/icons`. When we move the icons dir to the static directory of gatsby, everything is working fine.

Am I missing something in the gatsby-config.js file? This is the part we use for gatsby-plugin-manifest.

resolve: `gatsby-plugin-manifest`,
  options: {
    name: "Keytoe",
    short_name: "Keytoe",
    start_url: "/",
    background_color: "#23e197",
    theme_color: "#23e197",
    // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
    // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
    display: "standalone",
    icon: "src/assets/logo/favicon.png", // This path is relative to the root of the site.
    // An optional attribute which provides support for CORS check.
    // If you do not provide a crossOrigin option, it will skip CORS for manifest.
    // Any invalid keyword or empty string defaults to `anonymous`
    crossOrigin: `use-credentials`,
  },
},

Answer 1

I had the same problems and luckily managed to figure it out. Are you running Apache as your web server? Because this is where my problem came from.

Apache has its own /icons directory and it is advised never to place a directory by this name at the root of your web project because Apache will return a 404 for any file that sits within your /icons directory. This is the blog post led to the right answer: https://electrictoolbox.com/apache-icons-directory/

Because I did not feel like editing any server configuration to solve the problem, I chose to copy gatsby-plugin-manifest's default icon definition from common.js. https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/src/common.js

and replace all src: `icons/...` with src: `favicons/...`. Now my Apache is happy and so am I.

This is what an excerpt from my gatsby-config.js looks like:

      ...
     ,{
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `domain.com`,
        short_name: `domain.com`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#1abc9c`,
        display: `minimal-ui`,
        icon: `src/assets/favicon.png`,
        icons: [
          {
            src: `favicons/icon-48x48.png`,
            sizes: `48x48`,
            type: `image/png`,
          },
          {
            src: `favicons/icon-72x72.png`,
            sizes: `72x72`,
            type: `image/png`,
          },
          ...
        ]
       } ...