fix favicon

gatsby-config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const yaml = require('js-yaml')
 const meta = yaml.load(fs.readFileSync('./data/meta.yml', 'utf8'))
-const { url, matomoSite, matomoUrl, title } = meta
+const { title, description, url, matomoSite, matomoUrl } = meta
 
 module.exports = {
   siteMetadata: {
@@ -60,15 +60,37 @@ module.exports = {
       }
     },
     {
-      resolve: 'gatsby-plugin-manifest',
+      resolve: 'gatsby-plugin-favicon',
       options: {
-        name: title.toLowerCase(),
-        short_name: 'mk',
-        start_url: '/',
-        background_color: '#e7eef4',
+        logo: './src/images/favicon.png',
+
+        // WebApp Manifest Configuration
+        appName: title.toLowerCase(),
+        appDescription: description,
+        developerName: null,
+        developerURL: null,
+        dir: 'auto',
+        lang: 'en-US',
+        background: '#e7eef4',
         theme_color: '#88bec8',
         display: 'minimal-ui',
-        icon: 'src/images/favicon.png'
+        orientation: 'any',
+        start_url: '/?homescreen=1',
+        short_name: 'mk',
+        version: '1.0',
+
+        icons: {
+          android: true,
+          appleIcon: true,
+          appleStartup: true,
+          coast: false,
+          favicons: true,
+          firefox: true,
+          opengraph: false,
+          twitter: false,
+          yandex: false,
+          windows: false
+        }
       }
     },
     'gatsby-plugin-react-helmet',

package.json

@@ -23,7 +23,7 @@
     "file-saver": "^1.3.8",
     "gatsby": "^2.0.4",
     "gatsby-image": "^2.0.0",
-    "gatsby-plugin-manifest": "^2.0.2",
+    "gatsby-plugin-favicon": "^3.1.4",
     "gatsby-plugin-matomo": "^0.5.0",
     "gatsby-plugin-offline": "^2.0.0",
     "gatsby-plugin-react-helmet": "^3.0.0",

src/components/molecules/ProjectImage.jsx

@@ -22,7 +22,7 @@ ProjectImage.propTypes = {
 export const projectImage = graphql`
   fragment ProjectImageFluid on ImageSharp {
     fluid(maxWidth: 1200, quality: 85) {
-      ...GatsbyImageSharpFluid_withWebp
+      ...GatsbyImageSharpFluid_withWebp_noBase64
     }
   }
 `