Added Favicon

public/App.jsx

@@ -29,6 +29,7 @@ import Header from './header/Header';
 import Footer from './footer/Footer';
 import { HashRouter, BrowserRouter } from 'react-router-dom';
 import Routes from './page/Routes';
+import Favicon from './Favicon';
 
 class App extends React.Component {
   constructor(props) {
@@ -55,6 +56,7 @@ class App extends React.Component {
 
     let children = (
       <div className={clazz} ref="app">
+        <Favicon />
         <Header />
         { modal }
         <Routes onEntering={this.onEnteringBound} />

public/Favicon.jsx

@@ -0,0 +1,54 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+/*
+
+
+*/
+
+import React from 'react';
+import Helmet from 'react-helmet';
+
+export default (props) => {
+  return (
+    <Helmet>
+      <link rel="apple-touch-icon" sizes="57x57" href={ require('./images/favicon/apple-icon-57x57.png').src } />
+      <link rel="apple-touch-icon" sizes="60x60" href={ require('./images/favicon/apple-icon-60x60.png').src } />
+      <link rel="apple-touch-icon" sizes="72x72" href={ require('./images/favicon/apple-icon-72x72.png').src } />
+      <link rel="apple-touch-icon" sizes="76x76" href={ require('./images/favicon/apple-icon-76x76.png').src } />
+      <link rel="apple-touch-icon" sizes="114x114" href={ require('./images/favicon/apple-icon-114x114.png').src } />
+      <link rel="apple-touch-icon" sizes="120x120" href={ require('./images/favicon/apple-icon-120x120.png').src } />
+      <link rel="apple-touch-icon" sizes="144x144" href={ require('./images/favicon/apple-icon-144x144.png').src } />
+      <link rel="apple-touch-icon" sizes="152x152" href={ require('./images/favicon/apple-icon-152x152.png').src } />
+      <link rel="apple-touch-icon" sizes="180x180" href={ require('./images/favicon/apple-icon-180x180.png').src } />
+      <link rel="icon" type="image/png" sizes="192x192"  href={ require('./images/favicon/android-icon-192x192.png').src } />
+      <link rel="icon" type="image/png" sizes="32x32" href={ require('./images/favicon/favicon-32x32.png').src } />
+      <link rel="icon" type="image/png" sizes="96x96" href={ require('./images/favicon/favicon-96x96.png').src } />
+      <link rel="icon" type="image/png" sizes="16x16" href={ require('./images/favicon/favicon-16x16.png').src } />
+      <link rel="manifest" href={ require('./images/favicon/favicon-16x16.png').src } />
+      <meta name="msapplication-TileColor" content="#ffffff" />
+      <meta name="msapplication-TileImage" content={ require('./images/favicon/ms-icon-144x144.png').src } />
+      <meta name="theme-color" content="#ffffff" />
+    </Helmet>
+  );
+};

public/images/favicon/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>

public/images/favicon/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"
+  }
+ ]
+}