Merge pull request #4 from clean-commit/0.3.2

0.3.2 merged

README.md

@@ -166,6 +166,10 @@ const homePage = {
 export default homePage
 ```
 
+### Adding Favicons
+
+Favicons can be generated using this [Favicon Generator](https://www.favicon-generator.org/) After generating the icons, drop the contents of downloaded file into `static/img/favicons` directory
+
 ## Debugging
 
 Windows users might encounter `node-gyp` errors when trying to npm install.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-starter",
   "description": "Clean starter for gatsby website, with image optimization and GDPR cookies",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "author": "Wojciech Kałużny",
   "dependencies": {
     "classnames": "^2.2.6",

src/components/Layout.js

@@ -22,24 +22,85 @@ const TemplateWrapper = ({ children, hideNav }) => {
         <meta name='theme-color' content={siteMetadata.themeColor} />
         <meta property='og:image' content={SEO.image()} />
         <meta name='keywords' content={siteMetadata.keywords} />
+        <link
+          rel='apple-touch-icon'
+          sizes='57x57'
+          href='/img/favicons/apple-icon-57x57.png'
+        />
+        <link
+          rel='apple-touch-icon'
+          sizes='60x60'
+          href='/img/favicons/apple-icon-60x60.png'
+        />
+        <link
+          rel='apple-touch-icon'
+          sizes='72x72'
+          href='/img/favicons/apple-icon-72x72.png'
+        />
+        <link
+          rel='apple-touch-icon'
+          sizes='76x76'
+          href='/img/favicons/apple-icon-76x76.png'
+        />
+        <link
+          rel='apple-touch-icon'
+          sizes='114x114'
+          href='/img/favicons/apple-icon-114x114.png'
+        />
+        <link
+          rel='apple-touch-icon'
+          sizes='120x120'
+          href='/img/favicons/apple-icon-120x120.png'
+        />
+        <link
+          rel='apple-touch-icon'
+          sizes='144x144'
+          href='/img/favicons/apple-icon-144x144.png'
+        />
+        <link
+          rel='apple-touch-icon'
+          sizes='152x152'
+          href='/img/favicons/apple-icon-152x152.png'
+        />
         <link
           rel='apple-touch-icon'
           sizes='180x180'
-          href='/img/favicons/apple-touch-icon.png'
+          href='/img/favicons/apple-icon-180x180.png'
+        />
+        <link
+          rel='icon'
+          type='image/png'
+          sizes='192x192'
+          href='/img/favicons/android-icon-192x192.png'
         />
         <link
           rel='icon'
           type='image/png'
           sizes='32x32'
           href='/img/favicons/favicon-32x32.png'
         />
+        <link
+          rel='icon'
+          type='image/png'
+          sizes='96x96'
+          href='/img/favicons/favicon-96x96.png'
+        />
         <link
           rel='icon'
           type='image/png'
           sizes='16x16'
           href='/img/favicons/favicon-16x16.png'
         />
-        <link rel='manifest' href='/img/favicons/site.webmanifest' />
+        <link rel='manifest' href='/img/favicons/manifest.json' />
+        <meta
+          name='msapplication-TileImage'
+          content='/img/favicons/ms-icon-144x144.png'
+        />
+        <meta
+          name='msapplication-TileColor'
+          content={siteMetadata.themeColor}
+        />
+        <meta name='theme-color' content={siteMetadata.themeColor} />
       </Helmet>
       <div className='h-screen'>
         {hideNav === true ? '' : <Navbar />}

static/img/favicons/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

static/img/favicons/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}