outsource favicon generation to webpack plugin

bowman-starter/package.json

@@ -62,6 +62,7 @@
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.1.4",
+    "favicons-webpack-plugin": "^4.2.0",
     "front-matter": "^3.1.0",
     "fs-extra": "^9.0.0",
     "hard-source-webpack-plugin": "^0.13.1",

bowman-starter/scripts/webpack/env/webpack.prod.prebuild.js

@@ -3,6 +3,7 @@ const common = require('../webpack.common.prebuild.js');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ImageminPlugin = require('imagemin-webpack-plugin').default
 const ImageminWebpWebpackPlugin= require("imagemin-webp-webpack-plugin");
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
 
 module.exports = merge(common, {
   mode: 'production',
@@ -13,5 +14,7 @@ module.exports = merge(common, {
     // compress images (might take a while if there's a lot)
     new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
     new ImageminWebpWebpackPlugin(),
+    // generate optimized favicons for different devices
+    new FaviconsWebpackPlugin()
   ],
 });

bowman-starter/scripts/webpack/webpack.common.prebuild.js

@@ -43,7 +43,6 @@ module.exports = {
     new CopyWebpackPlugin([
       // copy over misc assets
       { from:'./src/static/fonts/', to: 'static/fonts', },
-      { from:'./src/static/fav/', to: '', },
       // files you don't want webpack to compile go below (e.g. vendors)
     ]),
   ],

bowman-starter/src/static/ejs/layouts/favicons.ejs

@@ -0,0 +1,36 @@
+<link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="167x167" href="/assets/apple-touch-icon-167x167.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png">
+<link rel="apple-touch-icon" sizes="1024x1024" href="/assets/apple-touch-icon-1024x1024.png">
+<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-320x460.png">
+<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x920.png">
+<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x1096.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-750x1294.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1182x2208.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1242x2148.png">
+<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-748x1024.png">
+<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1496x2048.png">
+<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-768x1004.png">
+<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1536x2008.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="228x228" href="/assets/coast-228x228.png">
+<link rel="manifest" href="/assets/manifest.json">
+<link rel="shortcut icon" href="/assets/favicon.ico">
+<link rel="yandex-tableau-widget" href="/assets/yandex-browser-manifest.json">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title">
+<meta name="application-name">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="msapplication-TileColor" content="#fff">
+<meta name="msapplication-TileImage" content="/assets/mstile-144x144.png">
+<meta name="msapplication-config" content="/assets/browserconfig.xml">
+<meta name="theme-color" content="#fff">

bowman-starter/src/static/ejs/layouts/head.ejs

@@ -7,10 +7,8 @@
 <base href="<%= site.basePath %>">
 
 <!-- https://favicon.io/favicon-generator/?t=b&ff=Tajawal&fs=110&fc=%23FFFFFF&b=rounded&bc=%23333a56 -->
-<link rel="apple-touch-icon" sizes="180x180" href="<%= site.basePath %>apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="<%= site.basePath %>favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="<%= site.basePath %>favicon-16x16.png">
-<link rel="manifest" href="<%= site.basePath %>site.webmanifest">
+<!-- Using the best quality favicon to feed into favicon webpack plugin: android-chrome-512x512 -->
+<%- include('./favicons') %>
 
 <!--
   Without crossorigin, the preloaded font is ignored by the browser, and a new fetch takes place.