Gatsby: [gatsby-plugin-manifest] Configurable name for icons folder?

[TWry]

I use gatsby-plugin-manifest in my project to generate icons. When serving it using a popular hosting service, I'm getting 404 errors for all of the icons, however. I found that the icons folder is aliased to the apache icons which causes the files not to be found. Since it's a shared environment, it is impossible to change the apache configuration unfortunately.

Is it possible to configure the icons folder name in gatsby-config.js in some way or is there some other way to work around this issue?

[DSchau]

This sounds more like an issue with whatever hosting setup you're rolling with, but I'd be interesting in learning more about it!

Could you provide more detail on that?

[TWry]

It is definitely an issue with the hosting setup. However, I think this could be a quite common situation so I think it would make sense to provide a configurable icons folder name on the plugin side.

The issue is that I'd like to host a project on a hosting service that uses the default Apache webserver configuration. This includes an alias that maps the icons folder in the root of the website to a common folder of file type icons:
Alias /icons/ "/usr/share/apache2/icons/"

This makes the icons generated by gatsby-plugin-manifest in my project unavailable. Apache will look in /usr/share/apache2/icons/ instead of the icons folder in my website, resulting in a 404 error. The Apache configuration is not changeable as the webserver configuration is shared by all customers.

Therefore I am looking for a way to work around the issue on the plugin side.

[DSchau]

The issue is that I'd like to host a project on a hosting service that uses the default Apache webserver configuration

Obvious question - this can't be tweaked? If so--why not?

More broadly speaking though, this is already supported.

If you check out the Hybrid mode setting, you can define your icons array manually, and the src will be created with the path you specify.

For example:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
        icons: [
          {
            src: `/favicons/android-chrome-192x192.png`,
            sizes: `192x192`,
            type: `image/png`,
          },
          {
            src: `/favicons/android-chrome-512x512.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
        ],
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // 'gatsby-plugin-offline',
  ],
}

this setup will create the icons in the public/favicons directory.

I'm going to close this as answered, but thank you for the question! Please feel free to reply if we can help further.

[TWry]

Obvious question - this can't be tweaked? If so--why not?

It's a shared environment. Many customers use the same Apache instance with the same configuration. You can only create .htaccess files to configure the webserver, but that does not override the alias for the icons folder unfortunately.

Many thanks for your help - I had tried this but I must have made some mistake in the process. It's now working.

One caveat - if you specify an additional level for the icon's src attribute, (e.g. src: "/images/icons/icon-48x48.png"), the build fails because it's trying to create the folder without the -p switch for the mkdir command.

[devrnt]

Did you manage to solve this problem by changing the Alias? Or did you use the hybrid mode and defined the icons in another folder? @TWry

[TWry]

I could not use an alias due to the shared environment. I used the hybrid mode and specified the folder as in the example from DSchau above.

[devrnt]

Had the same problem here, I used the hybrid mode as well. I would like to have an option to change the 'destination' folder of the icons with the automatic mode.

Now it is a lot of copy & paste in the hybrid mode.

[pokemon4e]

Having the same problem with Apache shared hosting service.

[baba43]

Same issue here

[talhaguy]

Facing the same issue. Would be great to have a configurable output folder, however for now the work around suggested here is working, albeit inconvenient.

[Uzwername]

Would be nice to have a more direct option to set folder name, but meanwhile there's none, one could just copy happily default options and change all icons/ paths to faviconsOrWhateverYouPrefer/.

[evolkmann]

Hello everyone, I also encountered this issue yesterday and opened a PR (#20390) to address this. I appreciate any feedback!

[blainekasten]

@evolkmann I responded to your PR on why we're not going to move forward with this right now. ❤️

[devrnt]

A possible solution is to create a helper function, let's call this function generateFavicons that takes an array of sizes. This function returns an array of favicon objects that contains the required properties:

const generateFavicons = (sizes) => {
  return sizes.map(size => {
    return {
      src: `favicons/icon-${size}x${size}.png`,
      sizes: `${size}x${size}`,
      type: "image/png",
    };
  });
};

This function is used as follows in the gatsby-config.js:

{
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby`,
        short_name: `Gatsby`,
        start_url: `/`,
        background_color: `#000000`,
        theme_color: `#FFFFFF`,
        display: `minimal-ui`,
        // Icons Hybrid mode
        // In automatic mode, icons will be exported to /icons
        // This conflicts with the Apache /icons symlink to /usr/share/apache2/icons/
        // (https://www.electrictoolbox.com/apache-icons-directory)
        // The solution is to create a favicons folder instead of the default icons folder
        icon: `path/to/logo.png`,
        icons: generateFavicons([48, 72, 96, 144, 192, 256, 384, 512]),
      },
},

The generateFavicons function can be defined anywhere, I suggest to create it on top in your gatsby-config.js .
Because the PR won't be merged this seems the best way to solve this issue.

[evolkmann]

@devrnt thanks for posting the improved workaround for others to copy!

[PieterT2000]

Thanks @devrnt! Your solution worked for me as well.