[gatsby-plugin-manifest] Support SVG favicons

Summary

With modern browsers supporting SVG favicons and dark mode, I was experimenting using with the prefers-color-scheme media query inside an SVG file. While this works fine, gatsby-plugin-manifest currently provides no option to make use of this trick – all images are converted to PNG. A prefer_svg (or prefer_svg_favicon) option in gatsby-plugin-manifest would give users an option to go with that simple solution.

Motivation

To provide the optimal experience for users with visual impairments, serving an SVG with prefers-color-scheme media query can is a simple solution. I understand that performance is one of the driving factors of Gatsby, but not only can a single SVGs be smaller than a PNG. Any workaround to provide the same experience involves extra-code and providing two files.

[moonmeister]

Started work on this. ^^

[RyanPinPB]

Now that I’m getting the .svg file copied to the public folder, I’m having issues with the backup PNG’s replacing/overriding it.

Using Chrome so it should recognize the SVG.

Do I need to set “include_favicon: false” in the gatsby-config.js file in order to stop the pngs from being created and referenced as a backup?

This doesn’t seem to be the intended use for “include favicon”, is it?

after ‘gatsby develop’, if I delete all of the .png files that are created (for backups I guess?) from my .svg, the svg favicon works as planned. But upon the current build (if I don’t manually go in and delete the PNGs), the PNG’s will replace the SVG, not giving me the dark/light mode media queries I’m trying to get w/ my SVG.