[gatsby-plugin-manifest] Rectangular canvas svg generates incorrect favicons

[san7hos]

Description

When you provide an svg with rectangular canvas (not square), gatsby-plugin-manifest produces malformed favicons, e.g. 144x130, which then results in an error in the browser.

Steps to reproduce

Add rectangular svg (see below) to your project and modify gatsby-config.js to point to that svg
Set gatsby-config.js:

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `favicon bug`,
        short_name: `bug`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#ca9e67`,
        display: `minimal-ui`,
        icon: `src/images/mountains.svg`, // This path is relative to the root of the site.
        include_favicon: true
      },
    },

Save svg to src/images/mountains.svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" class="mountains" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 47.5 32.9" style="enable-background:new 0 0 47.5 32.9;" xml:space="preserve">
<polygon points="0,32.9 16.5,6.6 18.9,10.5 17.9,11.8 16.5,9.6 2.8,31.3 44.8,31.4 27.7,2.9 15.3,22.9 24.7,22.9 21.3,17.2 22.3,16 
	27.5,24.4 12.4,24.4 27.7,0 47.5,32.9 " style="fill: #CA9E67"/>
</svg>

Expected result

There are two options, either correctly sized favicons should be produced or the build should emit warning or error.

Actual result

Everything goes smoothly until you find an error in your console

Error while trying to use the following icon from the Manifest: http://localhost:8000/icons/icon-144x144.png (Resource size is not correct - typo in the Manifest?)

Environment

Run gatsby develop and observe the error in Chrome.

[freiksenet]

Thank you for the report, it seems to be a bug in plugin-manifest. Do you want to try to make a PR fixing it?

[san7hos]

Sure, I am just not sure what would be the preferred way to solve it.

[keidrun]

Hi, I've chosen the easiest way and sent PR but I think there're the following options:

• resize rectangular images to square but cut parts outside the images
• resize rectangular images to square but fill the images in the square
• just output message

I adopted the first one in my PR but I feel like the second one is better now and I don't like the third one so much.
If someone agree this, I'll send PR again.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜