diff --git a/packages/gatsby-plugin-manifest/src/gatsby-node.js b/packages/gatsby-plugin-manifest/src/gatsby-node.js
index bc655c21f207e..f0dc1e8ac75a6 100644
--- a/packages/gatsby-plugin-manifest/src/gatsby-node.js
+++ b/packages/gatsby-plugin-manifest/src/gatsby-node.js
@@ -35,7 +35,7 @@ exports.onPostBootstrap = (args, pluginOptions) =>
     // Determine destination path for icons.
     const iconPath = path.join(
       `public`,
-      manifest.icons[0].src.substring(0, manifest.icons[0].src.lastIndexOf(`/`))
+      path.dirname(manifest.icons[0].src)
     )
 
     //create destination directory if it doesn't exist
diff --git a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js
index 20aa61d9d1934..65952e21f4362 100644
--- a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js
@@ -4,11 +4,19 @@ import { withPrefix } from "gatsby"
 exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
   // If icons were generated, also add a favicon link.
   if (pluginOptions.icon) {
+    let favicon = `/icons/icon-48x48.png`
+
+    // The icon path could be different in hybrid mode
+    // this takes the first one of the possible icons
+    if (pluginOptions.icons && pluginOptions.icons.length) {
+      favicon = pluginOptions.icons[0].src
+    }
+
     setHeadComponents([
       <link
         key={`gatsby-plugin-manifest-icon-link`}
         rel="shortcut icon"
-        href={withPrefix(`/icons/icon-48x48.png`)}
+        href={withPrefix(favicon)}
       />,
     ])
   }