fix(gatsby-plugin-manifest): improve SVG->PNG fidelity

[rgiese]

Description

gatsby-plugin-manifest resizes a user-provided icon to PNGs of various resolutions required for favicons using Sharp. This change allows SVGs to be usable as the user-provided icon.

Sharp is already capable of ingesting an SVG and rasterizing it to PNGs; however, in its default configuration, it first rasterizes the provided SVG to a pixel image of default density (e.g. 72dpi) and then upscales it to the desired size (e.g. 512x512), which can create really poor upscaling artifacts.

This change instructs Sharp to use a rasterizing density equal to the size of the desired output image which eliminates the upscaling problems.

[pieh]

Does density option have any impact on non-vector formats?

[rgiese]

@pieh According to the Sharp docs it does not, and I've tried running a JPG through it with the change and came out just fine.

[rgiese]

Also, any help in diagnosing the failing e2e_tests_production_runtime test would be much appreciate since the tests prescribed in How to Contribute passed for me locally. They're failing in the same way on a number of other unrelated PRs as well, it seems (not that I necessarily want to shrug them off).

[pieh]

@rgiese those errors shouldn't be related to your PR, but I'm not sure yet. The test does use gatsby-plugin-manifest, but at least to me it might be flake - I'll restart just this test and see if this happens again, and will dive more if it fails again with similiar error

[DSchau]

Yikes @rgiese don't worry about fixing the failing tests, unrelated to this PR.

It looks like I possibly broke them in #11581. We'll get a fix out diagnosing the issue or fixing the test. Working on that now!

[rgiese]

Hey @pieh, I updated the PR from upstream and now all tests are passing. Could you kindly take another look and/or sign off?

[rgiese]

@DSchau, want to review?

[pieh]

Hey, sorry for late reply - was on issue duty last week and wasn't reviewing any PRs then. But I'll do this now

[pieh]

Looks good - I added just some sanity clamping of density - with totally unreasonable test case of producing icon with 4096 size I got:

Error: Invalid density (1 to 2400) 4096

from sharp

[pieh]

Hmm, there seem to be some github hiccup - extra commits pushed to the branch doesn't show up here https://github.com/rgiese/gatsby/commits/topics/svg-favicon

[pieh]

Thanks @rgiese!

[gatsbot]

Holy buckets, @rgiese — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

[rgiese]

Thanks everyone for your help!