How to change favicon on browser tab change in gatsbyjs

Question

I want to change between 2 favicons on browser tab change But I don't even know where should I perform this.

The favicon is currently set in gatsby-config.js like this :

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-hello-friend`,
        short_name: `hello-friend`,
        start_url: `/`,
        background_color: `#292a2d`,
        theme_color: `#292a2d`,
        display: `minimal-ui`,
        cache_busting_mode: `query`,
        icon: `src/images/favicon1.png`,
        icons: [
          {
            src: `src/images/favicon0.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
          {
            src: `src/images/favicon1.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
        ],
      },
    },

I'm using this starter: https://www.gatsbyjs.org/starters/panr/gatsby-starter-hello-friend/