Favicon generation w/ gatsby-plugin-manifest vs. manual React Helmet

[tr1s]

Summary

I know gatsby-plugin-manifest generates icons, but are they specifically only used for the manifest file and apple-touch-icons? How come they don't generate mstiles for windows or android-chrome icons?

Should I be using this in conjunction with React Helmet?

Is there anything I should be worried about when using meta/link tags in React Helmet for android-chrome / mstiles conjunction with gatsby-plugin-manifest and their auto favicon generation?

Thank you, some more clarification will be very helpful!

Relevant information

These are the only things it outputs for me, with one icon given to gatsby-plugin-manifest. I am only using React Helmet for html lang, title, and description in this example. But I'll be using it on a very big work project soon and I want to understand it full before I commit to production.

Resource of all the favicon types: https://realfavicongenerator.net/faq

Environment (if relevant)

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.2 - ~/.nvm/versions/node/v10.16.2/bin/node
    npm: 6.10.3 - ~/.nvm/versions/node/v10.16.2/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.15.7 => 2.15.7
    gatsby-plugin-catch-links: ^2.1.8 => 2.1.8
    gatsby-plugin-manifest: ^2.2.13 => 2.2.13
    gatsby-plugin-offline: ^3.0.2 => 3.0.2
    gatsby-plugin-react-helmet: ^3.1.6 => 3.1.6
    gatsby-plugin-sass: ^2.1.13 => 2.1.13
    gatsby-plugin-sharp: ^2.2.19 => 2.2.19
    gatsby-remark-images: ^3.1.20 => 3.1.20
    gatsby-remark-relative-images: ^0.2.3 => 0.2.3
    gatsby-source-contentful: ^2.1.32 => 2.1.32
    gatsby-source-filesystem: ^2.1.21 => 2.1.21
    gatsby-transformer-remark: ^2.6.21 => 2.6.21
    gatsby-transformer-sharp: ^2.2.13 => 2.2.13
  npmGlobalPackages:
    gatsby-cli: 2.7.39

File contents (if changed)

gatsby-config.js

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Tris | Developer, Designer, Creative`,
        short_name: `Tris`,
        start_url: `/`,
        icon: `./src/assets/images/favicon-512x512.jpg`,
        background_color: `#f7f0eb`,
        theme_color: `#4a455c`,
        display: `standalone`
      }
    },

[LekoArts]

mstiles for windows

I'd guess because no one uses these phones anymore. No one ever asked for that.

android-chrome icons

You already have those, have a look into the generated manifest.webmanifest file.

Should I be using this in conjunction with React Helmet?

You can do that without problems, however you'd really only need to add the windows phone stuff, all other things are handled by the plugin.

[tr1s]

@LekoArts thanks for your response.

Yeah that's fair about the mstiles.

I did look into the generated manifest.webmanifest file. I only see "icons" and not "android-chrome" icons like in the spec I referenced. I wasn't sure if android by default just uses these by default, but you're saying they do, essentially?

Also, when I'm testing the PWA on iPhone, iPhone has a big board radius on their icons, and Android's icons I believe are circles?

Is there anyway to upload separate icons for iPhone, Android, and Web?

It seems there's an inherent issue with using only 1 icon for multiple different devices / platforms.

We have a square icon, which shows up properly on web, but obviously looks a bit truncated on an iOS app, which is slightly rounded. How do I deal with this? Can I at this point or no?

[tr1s]

Funny enough, Android seems to have had some padding added, done by default? Whereas iOS has some cropping of the corners, so no kind of automatic fixings.

[moonmeister]

@tr1s You really need to spend some time familiarizing yourself with the web app manifest spec. It's supported by most modern mobile browsers and some desktop browsers.

The defaults for this plugin are "sane" in that they work generally and probably won't cause issues...but they aren't perfect cause there's no way to know what your icon looks like. For instance, part of the spec is that you can designate how the platform handles icon masking. Android icons can be square, round, rounded squares, squircles, or un-masked...it's all the same image, the platform just respects what is specified in the manifest. If memory serves the manifest default, if unspecified, is to allow icon masking...which is what you're seeing in the second image. Android seems to have guessed that your icon shouldn't be masked and added the padding. not sure why.

Checkout the docs page for the plugin, there are several links to the spec and other info pages. There's a lot of options to customize how icons are rendered and what platforms use them. Let me know if you have any more questions, happy to help.

[sidharthachatterjee]

Marking this as answered and closing. Thanks!