Can I use a different icon for favicon in gatsby-plugin-manifest

user_165345 0
Viewed 2835

I'm using the gatsby-plugin-manifest with icon set to an icon which is very nice for Android and iOS devices. But now I'd like to define an additional icon which is used for browsers (with a size of 32x32 pixels and less text). But I want to keep the other icons too.

Is that possible? If yes, how?

gatsby
2 Answers

It is possible to define a manual icon set using gatsby-plugin-manifest. There, you can theoretically add different icons for different sizes. However, this is not a proper solution as there is no clear way to distinguish between favicons and app manifest icons (e.g. what is shown on mobile devices when the page is saved to the home screen).

I personally solved this problem by using gatsby-plugin-manifest only for the app icons and configure the favicons using react-helmet:

gatsby-config.js:

{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: `My app`,
    short_name: `My app`,
    start_url: `/`,
    background_color: `#FFFFFF`,
    theme_color: `#000000`,
    display: `standalone`,
    icon: `src/images/icon.png`,
    include_favicon: false, // exclude favicons
  },
},
`gatsby-plugin-react-helmet`,

Seo.jsx component:

import favicon16x16 from "../images/favicon-16x16.png";
import favicon32x32 from "../images/favicon-32x32.png";
import favicon64x64 from "../images/favicon-64x64.png";

const faviconLinks = [
  { rel: "icon", type: "image/png", sizes: "16x16", href: favicon16x16 },
  { rel: "icon", type: "image/png", sizes: "32x32", href: favicon32x32 },
  { rel: "shortcut icon", type: "image/png", href: favicon64x64 },
];

export default () => (
  <Helmet link={faviconLinks}>
    <title>My app</title>
  </Helmet>
);
user_46918620

Gatsby Plugin Manifest handles a bunch of options that fit your requirements:

// in gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
        icon: `src/images/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`,
          },
        ], // Add or remove icon sizes as desired
      },
    },
  ],
}

Under icons the plugin handles an hybrid customization (that I recommend) that allows you to add only your desired custom icon without adding it manually for each size. From their documentation:

If you want to include more or fewer sizes, then the hybrid option is for you. Like automatic mode, you include a high-resolution icon from which to generate smaller icons. But unlike automatic mode, you provide the icons array config and icons are generated based on the sizes defined in your config.

The hybrid option allows the most flexibility while still not requiring you to create all icon sizes manually.

user_55853710
Related