fix: non square image issue

    add height and width paramaters to sharp
    change fit to 'cover' to not malform image
    set background to be transparent to eliminate black bars
    add better logging to warn user when src image isn't square.

packages/gatsby-plugin-manifest/src/gatsby-node.js

@@ -33,13 +33,17 @@ function generateIcons(icons, srcIcon) {
     // Sharp accept density from 1 to 2400
     const density = Math.min(2400, Math.max(1, size))
     return sharp(srcIcon, { density })
-      .resize(size, size)
+      .resize({
+        width: size,
+        height: size,
+        fit: `contain`,
+        background: { r: 255, g: 255, b: 255, alpha: 0 },
+      })
       .toFile(imgPath)
-      .then(() => {})
   })
 }
 
-exports.onPostBootstrap = async (args, pluginOptions) => {
+exports.onPostBootstrap = async ({ reporter }, pluginOptions) => {
   const { icon, ...manifest } = pluginOptions
 
   // Delete options we won't pass to the manifest.webmanifest.
@@ -69,6 +73,19 @@ exports.onPostBootstrap = async (args, pluginOptions) => {
       throw `icon (${icon}) does not exist as defined in gatsby-config.js. Make sure the file exists relative to the root of the site.`
     }
 
+    let sharpIcon = sharp(icon)
+
+    sharpIcon.metadata().then(metadata => {
+      if (metadata.width !== metadata.height) {
+        reporter.warn(
+          `The icon(${icon}) you provided to 'gatsby-plugin-manifest' is not square. \n` +
+            `The icons we generate will be square and for the best results we recommend you provide a square icon. \n` +
+            `We'll do our best with what you provide :)`
+        )
+      }
+    })
+
+
     //add cache busting
     const cacheMode =
       typeof pluginOptions.cache_busting_mode !== `undefined`