Add favicon/manifest

.gitignore

@@ -3,7 +3,10 @@
 node_modules
 .cache/
 # Build directory
-public/
+public/*
 static/admin/*.bundle.*
 .DS_Store
 yarn-error.log
+# Exception for files generated by gatsby-plugin-manifest to reduce production build time
+!public/icons
+!public/manifest.webmanifest

README.md

@@ -21,6 +21,7 @@ It follows the [JAMstack architecture](https://jamstack.org) by using Git as a s
 - Separate components for everything
 - Netlify deploy configuration
 - Perfect score on Lighthouse for SEO, Accessibility and Performance (wip:PWA)
+- Web app manifest and app icons (favicon) generated from a source SVG with `gatsby-plugin-manifest`. Note that generated icons are code-committed to reduce production build time, and should be re-committed whenever the source SVG changes.
 - ..and more
 
 ## Prerequisites

gatsby-config.js

@@ -29,6 +29,18 @@ module.exports = {
         name: 'images',
       },
     },
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `Kaldi`,
+        short_name: `Kaldi`,
+        start_url: `/`,
+        background_color: `#FFFFFF`,
+        theme_color: `#FFFFFF`,
+        icon: `src/img/favicon.svg`,
+        include_favicon: true,
+      },
+    },
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     {

package.json

@@ -7,6 +7,7 @@
     "bulma": "^0.7.0",
     "gatsby": "^2.0.66",
     "gatsby-image": "^2.0.23",
+    "gatsby-plugin-manifest": "^2.0.19",
     "gatsby-plugin-netlify": "^2.0.6",
     "gatsby-plugin-netlify-cms": "^3.0.9",
     "gatsby-plugin-purgecss": "^3.1.0",

public/manifest.webmanifest

@@ -0,0 +1 @@
+{"name":"Kaldi","short_name":"Kaldi","start_url":"/","background_color":"#FFFFFF","theme_color":"#FFFFFF","include_favicon":true,"icons":[{"src":"icons/icon-48x48.png","sizes":"48x48","type":"image/png"},{"src":"icons/icon-72x72.png","sizes":"72x72","type":"image/png"},{"src":"icons/icon-96x96.png","sizes":"96x96","type":"image/png"},{"src":"icons/icon-144x144.png","sizes":"144x144","type":"image/png"},{"src":"icons/icon-192x192.png","sizes":"192x192","type":"image/png"},{"src":"icons/icon-256x256.png","sizes":"256x256","type":"image/png"},{"src":"icons/icon-384x384.png","sizes":"384x384","type":"image/png"},{"src":"icons/icon-512x512.png","sizes":"512x512","type":"image/png"}]}

src/components/Layout.js

@@ -28,32 +28,6 @@ const TemplateWrapper = ({ children }) => (
             name="description"
             content={data.site.siteMetadata.description}
           />
-
-          <link
-            rel="apple-touch-icon"
-            sizes="180x180"
-            href="/img/apple-touch-icon.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            href="/img/favicon-32x32.png"
-            sizes="32x32"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            href="/img/favicon-16x16.png"
-            sizes="16x16"
-          />
-
-          <link
-            rel="mask-icon"
-            href="/img/safari-pinned-tab.svg"
-            color="#ff4400"
-          />
-          <meta name="theme-color" content="#fff" />
-
           <meta property="og:type" content="business.business" />
           <meta property="og:title" content={data.site.siteMetadata.title} />
           <meta property="og:url" content="/" />

yarn.lock

@@ -4760,6 +4760,15 @@ gatsby-link@^2.0.10:
     "@types/reach__router" "^1.0.0"
     prop-types "^15.6.1"
 
+gatsby-plugin-manifest@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.0.19.tgz#5f8bd5e18dec1f91e5a552faeab0eb4a63e213d2"
+  integrity sha512-pUjjVgWdL2hhT2UnP5uUeweQsH2546dMcjjCLt/b6ho79u3K8lX14tYQoss1XEeEIpyEviZ16ur+g4EppP74cA==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    bluebird "^3.5.0"
+    sharp "^0.21.3"
+
 gatsby-plugin-netlify-cms@^3.0.9:
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-netlify-cms/-/gatsby-plugin-netlify-cms-3.0.12.tgz#1812653fba2690f85b2796fa22e4b59b7b169520"