[gatsby-plugin-manifest] PNG favicons are preferred by chromium over SVG ones without the rel='icon alternate' attribute

[grgcnnr]

Description

gatsby-plugin-manifest provides an option to generate a SVG icon with PNG fallback. This is great because it allows us to embed @media (prefers-color-scheme: dark) {} queries in our icons. Unfortunately, the fallback icon is preferred by chome.

Steps to reproduce

Check out the minimal repro https://github.com/grgcnnr/gatsby-plugin-manifest-Support-SVG-favicons-23923

run gatsby in development mode. Open the project and switch your os's preferred colour scheme.

Observe in Firefox that the image on the page and the favicon react. While in Chrome only the on-page version changes.

Furthermore. if you manually edit the favicon.png in the public folder, you will see these changes in chrome as it seems to prefer the png over the svg.

Expected result

Both the favicon and the on page image should react to colour scheme changes.

Actual result

The favicon does not change in chromium based browsers because it is rendering the bitmap fallback rather than the svg

Environment

System:
OS: macOS 10.15.6
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
npm: 6.14.8 - ~/.nvm/versions/node/v12.18.3/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 85.0.4183.121
Safari: 14.0
npmPackages:
gatsby: ^2.24.63 => 2.24.63
gatsby-plugin-manifest: ^2.4.31 => 2.4.31
gatsby-source-filesystem: ^2.3.30 => 2.3.30
npmGlobalPackages:
gatsby-cli: 2.12.68

[grgcnnr]

Adding rel='icon alternate' to the png source resolves this but i'm unsure if its semantically correct or has other side effects.

[moonmeister]

Thanks for reporting, though this does appear to be a duplicate of #26083. Though last I checked the alternate tag did not fix this. Can you confirm this is a duplicate or not, if is we'll close in favor of #26083 (though please post your reproduction over there). In the mean time if you'd like to, this could be fixed in the plugin by switching the order of the tags in head or (if the alternate tag does work) adding the alternate tag.

[grgcnnr]

Yea this is a dupe, Sorry.