Add dark icons and load them with webpack

index.template.html

@@ -49,92 +49,97 @@
     <link
       rel="apple-touch-icon-precomposed"
       sizes="57x57"
-      href="icons/apple-touch-icon-57x57.png"
+      href="<%= require('./src/icons/apple-touch-icon-57x57.png') %>"
     />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="icons/apple-touch-icon-114x114.png"
+      href="<%= require('./src/icons/apple-touch-icon-114x114.png') %>"
     />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="icons/apple-touch-icon-72x72.png"
+      href="<%= require('./src/icons/apple-touch-icon-72x72.png') %>"
     />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="icons/apple-touch-icon-144x144.png"
+      href="<%= require('./src/icons/apple-touch-icon-144x144.png') %>"
     />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="60x60"
-      href="icons/apple-touch-icon-60x60.png"
+      href="<%= require('./src/icons/apple-touch-icon-60x60.png') %>"
     />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="icons/apple-touch-icon-120x120.png"
+      href="<%= require('./src/icons/apple-touch-icon-120x120.png') %>"
     />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="76x76"
-      href="icons/apple-touch-icon-76x76.png"
+      href="<%= require('./src/icons/apple-touch-icon-76x76.png') %>"
     />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="icons/apple-touch-icon-152x152.png"
+      href="<%= require('./src/icons/apple-touch-icon-152x152.png') %>"
     />
     <link
       rel="icon"
       type="image/png"
-      href="icons/favicon-196x196.png"
+      href="<%= require('./src/icons/favicon-196x196.png') %>"
       sizes="196x196"
     />
     <link
       rel="icon"
       type="image/png"
-      href="icons/favicon-96x96.png"
+      href="<%= require('./src/icons/favicon-96x96.png') %>"
       sizes="96x96"
     />
     <link
       rel="icon"
       type="image/png"
-      href="icons/favicon-32x32.png"
+      href="<%= require('./src/icons/favicon-32x32.png') %>"
       sizes="32x32"
     />
     <link
       rel="icon"
       type="image/png"
-      href="icons/favicon-16x16.png"
+      href="<%= require('./src/icons/favicon-16x16.png') %>"
       sizes="16x16"
     />
     <link
       rel="icon"
       type="image/png"
-      href="icons/favicon-128.png"
+      href="<%= require('./src/icons/favicon-128.png') %>"
       sizes="128x128"
     />
+    <link
+      rel="shortcut icon"
+      href="<%= require('./src/icons/favicon.ico') %>"
+      type="image/x-icon"
+    />
     <meta name="msapplication-TileColor" content="#1A1A1A" />
     <meta name="msapplication-TileImage" content="icons/mstile-144x144.png" />
     <meta
       name="msapplication-square70x70logo"
-      content="icons/mstile-70x70.png"
+      content="<%= require('./src/icons/mstile-70x70.png') %>"
     />
     <meta
       name="msapplication-square150x150logo"
-      content="icons/mstile-150x150.png"
+      content="<%= require('./src/icons/mstile-150x150.png') %>"
     />
     <meta
       name="msapplication-wide310x150logo"
-      content="icons/mstile-310x150.png"
+      content="<%= require('./src/icons/mstile-310x150.png') %>"
     />
     <meta
       name="msapplication-square310x310logo"
-      content="icons/mstile-310x310.png"
+      content="<%= require('./src/icons/mstile-310x310.png') %>"
     />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="<%= require('./src/manifest.webmanifest') %>" />
     <meta name="theme-color" content="#1A1A1A" />
     <base href="/" />
     <title>Generative.fm - Generative music by Alex Bainter</title>

package.json

@@ -29,6 +29,7 @@
     "@babel/polyfill": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
+    "app-manifest-loader": "^2.3.0",
     "aws-sdk": "^2.420.0",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^0.1.19",

manifest.json → src/manifest.webmanifest

@@ -4,12 +4,17 @@
   "lang": "en-US",
   "icons": [
     {
-      "src": "/icons/icon-192x192.png",
+      "src": "./icons/icon-192x192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "/icons/icon-512x512.png",
+      "src": "./icons/icon-384x384.png",
+      "type": "image/png",
+      "sizes": "384x384"
+    },
+    {
+      "src": "./icons/icon-512x512.png",
       "type": "image/png",
       "sizes": "512x512"
     }

webpack.config.js

@@ -63,9 +63,13 @@ const makeConfig = alias => ({
         type: 'javascript/auto',
       },
       {
-        test: /\.mp3$/,
+        test: [/\.mp3$/, /\.ico$/],
         use: 'file-loader',
       },
+      {
+        test: /\.webmanifest/,
+        use: ['file-loader', 'app-manifest-loader'],
+      },
     ],
   },
   plugins: [