reactjsgatsbyfavicongatsby-plugin

use and interchange between 2 unique favicons in a project?

I am currently using gatsby-plugin-manifest to set the current favicon per this code in gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Ukraine Siren Alerts`,
    siteUrl: `https://www.uasa.io/`,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'NAME',
        short_name: 'SHORT NAME',
        start_url: '/',
        display: 'standalone',
        icon: 'src/images/logo.svg',
      },
    },
  ],
}

From there, how do I add the second favicon? The secondary favicon will be an "alert" version of the original. At the moment, the code that signifies this "alert" hasn't been implemented yet, so in the meantime I wanted to just add a temporary button that can be clicked to toggle between the 2 favicons.

In addition, I'm a little lost on how the temp button would even be able to go select anything in the config file and to pick the appropriate svg. Any insight into that would be great.

Is this even possible using gatsby-plugin-manifest, or do I have to go an entirely different route, such as react helmet?

I'm still relatively new to web dev, so I apologize in advance!

Solution

  • You can't swap between favicons using gatsby-plugin-manifest since the plugin is a kind of swiss tool for creating the manifest file and also creates the favicon but you can't add client-side logic there.

    You can use the Helmet component to swap between favicons adding your desired logic with:

    <Helmet>
  <link rel="icon" type="image/png" href="favicon.ico" sizes="16x16" />
</Helmet>