Favicons generated by gatsby-plugin-manifest aren't recognized by iOS Safari

[kripod]

Description

When using gatsby-plugin-favicon, iOS Safari recognizes the site's favicon and uses it for bookmarking and adding the page to the home screen.

Steps to reproduce

1. yarn add gatsby-plugin-manifest
2. Add corresponding entry to gatsby-config.js

Demo: https://5c2c104adaf1cb0008d6975f--schdesign.netlify.com/
Source code: https://github.com/simonyiszk/schdesign-web/tree/bc38c14281aca0757fb06288a67f1f4de7e7143f

Expected result

Icons generated by gatsby-plugin-manifest should be recognizable by iOS Safari.

Environment

gatsby: ^2.0.81 => 2.0.81
gatsby-plugin-manifest: ^2.0.13 => 2.0.13
gatsby-plugin-offline: ^2.0.20 => 2.0.20

[LekoArts]

You need to set the legacy option to true :)
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest#legacy-apple-touch-icon-links

[kripod]

@LekoArts Thank you for answering! Actually, I thought it was a bug because I'm on iOS 12.1.3, which is over 11.3 (mentioned by the readme of gatsby-plugin-manifest).

[LekoArts]

I think the note in the README is kind of wrong. Apple didn't implement the complete spec to my knowledge but only some parts (e.g. the service worker things) and it hasn't changed since 11.3
So you still need the apple-touch-icon until they also support the icons declared in the manifest file.

[kripod]

Okay, then I would like to suggest renaming the flag from legacy to iOS, and setting it to true by default, as it covers a very large share of the mobile browser market.