diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md
index 823cc1d6dafa3..02222e95ece57 100644
--- a/packages/gatsby-plugin-manifest/README.md
+++ b/packages/gatsby-plugin-manifest/README.md
@@ -27,7 +27,7 @@ This plugin configures Gatsby to create a `manifest.webmanifest` file on every s
 
 ## Generating icons
 
-It can be tedious creating the multitude of icon sizes required by different devices and browsers. This plugin includes code to auto-generate smaller icons from a larger src image.
+It can be tedious creating the multitude of icon sizes required by different devices and browsers. This plugin includes code to auto-generate smaller icons from a larger src image (which can also be an SVG).
 
 There are three modes in which icon generation can function: automatic, hybrid, and manual. These three modes are explained below. Icon generation functions differently depending on which of the three you choose.
 
diff --git a/packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js
index 9b2118c565150..4d8f91ed9e84f 100644
--- a/packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js
+++ b/packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js
@@ -57,6 +57,7 @@ describe(`Test plugin manifest options`, () => {
     fs.statSync.mockReturnValueOnce({ isFile: () => true })
 
     const icon = `pretend/this/exists.png`
+    const size = 48
 
     await onPostBootstrap([], {
       name: `GatsbyJS`,
@@ -69,13 +70,13 @@ describe(`Test plugin manifest options`, () => {
       icons: [
         {
           src: `icons/icon-48x48.png`,
-          sizes: `48x48`,
+          sizes: `${size}x${size}`,
           type: `image/png`,
         },
       ],
     })
 
-    expect(sharp).toHaveBeenCalledWith(icon)
+    expect(sharp).toHaveBeenCalledWith(icon, { density: size })
   })
 
   it(`fails on non existing icon`, done => {
diff --git a/packages/gatsby-plugin-manifest/src/gatsby-node.js b/packages/gatsby-plugin-manifest/src/gatsby-node.js
index 3771358ff5685..7973eb141a3f4 100644
--- a/packages/gatsby-plugin-manifest/src/gatsby-node.js
+++ b/packages/gatsby-plugin-manifest/src/gatsby-node.js
@@ -11,7 +11,12 @@ function generateIcons(icons, srcIcon) {
     const size = parseInt(icon.sizes.substring(0, icon.sizes.lastIndexOf(`x`)))
     const imgPath = path.join(`public`, icon.src)
 
-    return sharp(srcIcon)
+    // For vector graphics, instruct sharp to use a pixel density
+    // suitable for the resolution we're rasterizing to.
+    // For pixel graphics sources this has no effect.
+    // Sharp accept density from 1 to 2400
+    const density = Math.min(2400, Math.max(1, size))
+    return sharp(srcIcon, { density })
       .resize(size)
       .toFile(imgPath)
       .then(() => {})