feat(gatsby-plugin-manifest): make favicon link tag optional (#11414)

gurpreet-hanjra · wardpeet · commit 1af42bcd76ef · 2019-01-31T19:14:59.000+01:00
Related issue - #11308
diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md
@@ -50,6 +50,7 @@ module.exports = {
         // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
         display: `standalone`,
         icon: `src/images/icon.png`, // This path is relative to the root of the site.
+        include_favicon: true, // Include favicon
       },
     },
   ],
@@ -231,3 +232,28 @@ module.exports = {
   ],
 }
 ```
+
+## Exclude `favicon` link tag
+
+Excludes `<link rel="shortcut icon" href="/favicon.png" />` link tag to html output. You can set `include_favicon` plugin option to `false` to opt-out of this behaviour.
+
+```javascript:title=gatsby-config.js
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `GatsbyJS`,
+        short_name: `GatsbyJS`,
+        start_url: `/`,
+        background_color: `#f7f0eb`,
+        theme_color: `#a2466c`,
+        display: `standalone`,
+        icon: `src/images/icon.png`, // This path is relative to the root of the site.
+        theme_color_in_head: false, // This will avoid adding theme-color meta tag.
+        include_favicon: false, // This will exclude favicon link tag
+      },
+    },
+  ],
+}
+```
diff --git a/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap b/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap
@@ -163,6 +163,112 @@ Array [
 ]
 `;
 
+exports[`gatsby-plugin-manifest Adds link favicon if "include_favicon" option is not provided 1`] = `
+Array [
+  <link
+    href="/icons/icon-48x48.png"
+    rel="shortcut icon"
+  />,
+  <link
+    href="/manifest.webmanifest"
+    rel="manifest"
+  />,
+  <link
+    href="/icons/icon-48x48.png"
+    rel="apple-touch-icon"
+    sizes="48x48"
+  />,
+  <link
+    href="/icons/icon-72x72.png"
+    rel="apple-touch-icon"
+    sizes="72x72"
+  />,
+  <link
+    href="/icons/icon-96x96.png"
+    rel="apple-touch-icon"
+    sizes="96x96"
+  />,
+  <link
+    href="/icons/icon-144x144.png"
+    rel="apple-touch-icon"
+    sizes="144x144"
+  />,
+  <link
+    href="/icons/icon-192x192.png"
+    rel="apple-touch-icon"
+    sizes="192x192"
+  />,
+  <link
+    href="/icons/icon-256x256.png"
+    rel="apple-touch-icon"
+    sizes="256x256"
+  />,
+  <link
+    href="/icons/icon-384x384.png"
+    rel="apple-touch-icon"
+    sizes="384x384"
+  />,
+  <link
+    href="/icons/icon-512x512.png"
+    rel="apple-touch-icon"
+    sizes="512x512"
+  />,
+]
+`;
+
+exports[`gatsby-plugin-manifest Adds link favicon tag if "include_favicon" is set to true 1`] = `
+Array [
+  <link
+    href="/icons/icon-48x48.png"
+    rel="shortcut icon"
+  />,
+  <link
+    href="/manifest.webmanifest"
+    rel="manifest"
+  />,
+  <link
+    href="/icons/icon-48x48.png"
+    rel="apple-touch-icon"
+    sizes="48x48"
+  />,
+  <link
+    href="/icons/icon-72x72.png"
+    rel="apple-touch-icon"
+    sizes="72x72"
+  />,
+  <link
+    href="/icons/icon-96x96.png"
+    rel="apple-touch-icon"
+    sizes="96x96"
+  />,
+  <link
+    href="/icons/icon-144x144.png"
+    rel="apple-touch-icon"
+    sizes="144x144"
+  />,
+  <link
+    href="/icons/icon-192x192.png"
+    rel="apple-touch-icon"
+    sizes="192x192"
+  />,
+  <link
+    href="/icons/icon-256x256.png"
+    rel="apple-touch-icon"
+    sizes="256x256"
+  />,
+  <link
+    href="/icons/icon-384x384.png"
+    rel="apple-touch-icon"
+    sizes="384x384"
+  />,
+  <link
+    href="/icons/icon-512x512.png"
+    rel="apple-touch-icon"
+    sizes="512x512"
+  />,
+]
+`;
+
 exports[`gatsby-plugin-manifest Creates legacy apple touch links Using default set of icons 1`] = `
 Array [
   <link
@@ -349,6 +455,55 @@ Array [
 ]
 `;
 
+exports[`gatsby-plugin-manifest Does not add a link favicon if "include_favicon" option is set to false 1`] = `
+Array [
+  <link
+    href="/manifest.webmanifest"
+    rel="manifest"
+  />,
+  <link
+    href="/icons/icon-48x48.png"
+    rel="apple-touch-icon"
+    sizes="48x48"
+  />,
+  <link
+    href="/icons/icon-72x72.png"
+    rel="apple-touch-icon"
+    sizes="72x72"
+  />,
+  <link
+    href="/icons/icon-96x96.png"
+    rel="apple-touch-icon"
+    sizes="96x96"
+  />,
+  <link
+    href="/icons/icon-144x144.png"
+    rel="apple-touch-icon"
+    sizes="144x144"
+  />,
+  <link
+    href="/icons/icon-192x192.png"
+    rel="apple-touch-icon"
+    sizes="192x192"
+  />,
+  <link
+    href="/icons/icon-256x256.png"
+    rel="apple-touch-icon"
+    sizes="256x256"
+  />,
+  <link
+    href="/icons/icon-384x384.png"
+    rel="apple-touch-icon"
+    sizes="384x384"
+  />,
+  <link
+    href="/icons/icon-512x512.png"
+    rel="apple-touch-icon"
+    sizes="512x512"
+  />,
+]
+`;
+
 exports[`gatsby-plugin-manifest Does not create legacy apple touch links If "legacy" options is false and using default set of icons 1`] = `
 Array [
   <link
diff --git a/packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js b/packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js
@@ -1,4 +1,3 @@
-// const { shallow } = require(`enzyme`)
 const { onRenderBody } = require(`../gatsby-ssr`)
 
 let headComponents
@@ -36,7 +35,25 @@ describe(`gatsby-plugin-manifest`, () => {
   })
 
   it(`Adds "shortcut icon" and "manifest" links and "theme_color" meta tag to head`, () => {
-    onRenderBody(ssrArgs, { icon: true, theme_color: `#000000` })
+    onRenderBody(ssrArgs, {
+      icon: true,
+      theme_color: `#000000`,
+    })
+    expect(headComponents).toMatchSnapshot()
+  })
+
+  it(`Adds link favicon tag if "include_favicon" is set to true`, () => {
+    onRenderBody(ssrArgs, { icon: true, include_favicon: true })
+    expect(headComponents).toMatchSnapshot()
+  })
+
+  it(`Adds link favicon if "include_favicon" option is not provided`, () => {
+    onRenderBody(ssrArgs, { icon: true })
+    expect(headComponents).toMatchSnapshot()
+  })
+
+  it(`Does not add a link favicon if "include_favicon" option is set to false`, () => {
+    onRenderBody(ssrArgs, { icon: true, include_favicon: false })
     expect(headComponents).toMatchSnapshot()
   })
 
diff --git a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js
@@ -10,11 +10,16 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
   const legacy =
     typeof pluginOptions.legacy !== `undefined` ? pluginOptions.legacy : true
 
-  // If icons were generated, also add a favicon link.
+  // The user has an option to opt out of the favicon link tag being inserted into the head.
   if (pluginOptions.icon) {
     let favicon = icons && icons.length ? icons[0].src : null
 
-    if (favicon) {
+    const insertFaviconLinkTag =
+      typeof pluginOptions.include_favicon !== `undefined`
+        ? pluginOptions.include_favicon
+        : true
+
+    if (favicon && insertFaviconLinkTag) {
       headComponents.push(
         <link
           key={`gatsby-plugin-manifest-icon-link`}
