Fix favicon and add icons and manifest

nicolalamacchia · Feb 19, 2020 · 3bbc568 · 3bbc568
1 parent 191ac13
commit 3bbc568
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,13 +2,14 @@
   "scripts": {
     "start": "webpack-dev-server --open --mode development --hot",
     "format": "prettier --write \"src/**/*.js\"",
-    "build": "webpack -p --progress && rm dist/main.js"
+    "build": "rm -rf dist && webpack -p --progress && rm dist/main.js"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.12.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-preset-env": "^1.7.0",
+    "copy-webpack-plugin": "^5.1.1",
     "critters-webpack-plugin": "^2.4.0",
     "css-loader": "^3.2.0",
     "file-loader": "^5.0.2",

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/img/favicon.png → public/favicon.png b/img/favicon.png → public/favicon.png
diff --git a/public/favicon_io.zip b/public/favicon_io.zip
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "Powertab",
+  "name": "Powertab",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type":"image/png"
+    },
+    {
+      "src": "favicon.ico",
+      "sizes": "48x48 32x32 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#ebdbb2",
+  "background_color": "#282828"
+}
diff --git a/src/template.html b/src/template.html
@@ -3,7 +3,11 @@
   <head>
     <title>powertab</title>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/png" href="img/favicon.png" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/manifest.json" />
     <style>
       body {
         background-color: #282828;

diff --git a/webpack.config.js b/webpack.config.js
@@ -2,6 +2,7 @@ const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
 const Critters = require('critters-webpack-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
 
 module.exports = {
   entry: __dirname + '/src/index.js',
@@ -27,22 +28,11 @@ module.exports = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       },
-      {
-        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'fonts/',
-            },
-          },
-        ],
-      },
     ],
   },
 
   plugins: [
+    new CopyPlugin([{ from: 'public/*', flatten: true }]),
     new HtmlWebpackPlugin({
       template: './src/template.html',
       filename: './index.html',