ID-458 Crestacular favicons part 2

Author: WarwickGoatee

docs/_includes/header-borderless.html

@@ -11,24 +11,34 @@
 <link rel="apple-touch-icon" sizes="144x144" href="/dist/images/apple-touch-icon-144x144.png">
 <link rel="apple-touch-icon" sizes="152x152" href="/dist/images/apple-touch-icon-152x152.png">
 <link rel="apple-touch-icon" sizes="180x180" href="/dist/images/apple-touch-icon-180x180.png">
-<link rel="icon" type="image/png" href="/dist/images/android-chrome-192x192.png" sizes="192x192">
 
-<!-- Default/light mode favicons -->
+<!-- Default favicons -->
 <link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon.ico">
 <link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" sizes="32x32">
 <link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" sizes="96x96">
 <link rel="icon" type="image/png" href="/dist/images/favicon-16x16.png" sizes="16x16">
+<link rel="icon" type="image/png" href="/dist/images/favicon-192x192.png" sizes="192x192">
+
+<!-- Light mode favicons -->
+<link rel="shortcut icon" type="image/x-icon" media="(prefers-color-scheme: light)" href="/dist/images/favicon.ico">
+<link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" media="(prefers-color-scheme: light)" sizes="32x32">
+<link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" media="(prefers-color-scheme: light)" sizes="96x96">
+<link rel="icon" type="image/png" href="/dist/images/favicon-16x16.png" media="(prefers-color-scheme: light)" sizes="16x16">
+<link rel="icon" type="image/png" href="/dist/images/favicon-192x192.png" media="(prefers-color-scheme: light)" sizes="192x192">
 
 <!-- Dark mode favicon -->
 <link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon-dark-mode.ico" media="(prefers-color-scheme: dark)">
-<link rel="icon" href="/dist/images/favicon-dark-mode-16x16.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="16x16">
-<link rel="icon" href="/dist/images/favicon-dark-mode-32x32.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="32x32">
-<link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="96x96">
+<link rel="icon" href="/dist/images/favicon-dark-mode-16x16.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="16x16">
+<link rel="icon" href="/dist/images/favicon-dark-mode-32x32.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="32x32">
+<link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="96x96">
+<link rel="icon" href="/dist/images/favicon-dark-mode-192x192.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="192x192">
 
 <meta name="msapplication-TileColor" content="#204f79">
 <meta name="msapplication-TileImage" content="/dist/images/mstile-144x144.png">
 <meta name="theme-color" content="#204f79">
 
+<link rel="manifest" href="/dist/docs/pwa/manifest.json">
+
 <title>
   {% if page.layout == "home" %}
   {{ page.title }}

docs/_includes/header-wide.html

@@ -11,19 +11,29 @@
 <link rel="apple-touch-icon" sizes="144x144" href="/dist/images/apple-touch-icon-144x144.png">
 <link rel="apple-touch-icon" sizes="152x152" href="/dist/images/apple-touch-icon-152x152.png">
 <link rel="apple-touch-icon" sizes="180x180" href="/dist/images/apple-touch-icon-180x180.png">
-<link rel="icon" type="image/png" href="/dist/images/android-chrome-192x192.png" sizes="192x192">
 
-<!-- Default/light mode favicons -->
+<!-- Default favicons -->
 <link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon.ico">
 <link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" sizes="32x32">
 <link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" sizes="96x96">
 <link rel="icon" type="image/png" href="/dist/images/favicon-16x16.png" sizes="16x16">
+<link rel="icon" type="image/png" href="/dist/images/favicon-192x192.png" sizes="192x192">
+
+<!-- Light mode favicons -->
+<link rel="shortcut icon" type="image/x-icon" media="(prefers-color-scheme: light)" href="/dist/images/favicon.ico">
+<link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" media="(prefers-color-scheme: light)" sizes="32x32">
+<link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" media="(prefers-color-scheme: light)" sizes="96x96">
+<link rel="icon" type="image/png" href="/dist/images/favicon-16x16.png" media="(prefers-color-scheme: light)" sizes="16x16">
+<link rel="icon" type="image/png" href="/dist/images/favicon-192x192.png" media="(prefers-color-scheme: light)" sizes="192x192">
 
 <!-- Dark mode favicon -->
 <link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon-dark-mode.ico" media="(prefers-color-scheme: dark)">
-<link rel="icon" href="/dist/images/favicon-dark-mode-16x16.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="16x16">
-<link rel="icon" href="/dist/images/favicon-dark-mode-32x32.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="32x32">
-<link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="96x96">
+<link rel="icon" href="/dist/images/favicon-dark-mode-16x16.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="16x16">
+<link rel="icon" href="/dist/images/favicon-dark-mode-32x32.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="32x32">
+<link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="96x96">
+<link rel="icon" href="/dist/images/favicon-dark-mode-192x192.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="192x192">
+
+<link rel="manifest" href="/dist/docs/pwa/manifest.json">
 
 <meta name="msapplication-TileColor" content="#204f79">
 <meta name="msapplication-TileImage" content="/dist/images/mstile-144x144.png">

docs/_includes/header.html

@@ -11,24 +11,34 @@
 <link rel="apple-touch-icon" sizes="144x144" href="/dist/images/apple-touch-icon-144x144.png">
 <link rel="apple-touch-icon" sizes="152x152" href="/dist/images/apple-touch-icon-152x152.png">
 <link rel="apple-touch-icon" sizes="180x180" href="/dist/images/apple-touch-icon-180x180.png">
-<link rel="icon" type="image/png" href="/dist/images/android-chrome-192x192.png" sizes="192x192">
 
-<!-- Default/light mode favicons -->
+<!-- Default favicons -->
 <link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon.ico">
 <link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" sizes="32x32">
 <link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" sizes="96x96">
 <link rel="icon" type="image/png" href="/dist/images/favicon-16x16.png" sizes="16x16">
+<link rel="icon" type="image/png" href="/dist/images/favicon-192x192.png" sizes="192x192">
+
+<!-- Light mode favicons -->
+<link rel="shortcut icon" type="image/x-icon" media="(prefers-color-scheme: light)" href="/dist/images/favicon.ico">
+<link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" media="(prefers-color-scheme: light)" sizes="32x32">
+<link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" media="(prefers-color-scheme: light)" sizes="96x96">
+<link rel="icon" type="image/png" href="/dist/images/favicon-16x16.png" media="(prefers-color-scheme: light)" sizes="16x16">
+<link rel="icon" type="image/png" href="/dist/images/favicon-192x192.png" media="(prefers-color-scheme: light)" sizes="192x192">
 
 <!-- Dark mode favicon -->
 <link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon-dark-mode.ico" media="(prefers-color-scheme: dark)">
-<link rel="icon" href="/dist/images/favicon-dark-mode-16x16.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="16x16">
-<link rel="icon" href="/dist/images/favicon-dark-mode-32x32.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="32x32">
-<link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="96x96">
+<link rel="icon" href="/dist/images/favicon-dark-mode-16x16.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="16x16">
+<link rel="icon" href="/dist/images/favicon-dark-mode-32x32.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="32x32">
+<link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="96x96">
+<link rel="icon" href="/dist/images/favicon-dark-mode-192x192.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="192x192">
 
 <meta name="msapplication-TileColor" content="#204f79">
 <meta name="msapplication-TileImage" content="/dist/images/mstile-144x144.png">
 <meta name="theme-color" content="#204f79">
 
+<link rel="manifest" href="/dist/docs/pwa/manifest.json">
+
 <title>
   {% if page.layout == "home" %}
   {{ page.title }}

docs/assets/pwa/manifest.json

@@ -0,0 +1,39 @@
+{
+  "short_name": "ID7",
+  "name": "ID7 - University of Warwick brand",
+  "icons": [
+    {
+      "src": "/dist/images/pwa-icon-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/dist/images/pwa-icon-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    }
+  ],
+  "id": "/",
+  "start_url": "/",
+  "background_color": "#A499F4",
+  "display": "standalone",
+  "scope": "/",
+  "theme_color": "#A499F4",
+  "description": "Standalone app for University of Warwick's ID7 brand",
+  "screenshots": [
+    {
+      "src": "/dist/images/screenshot-540x720.jpg",
+      "type": "image/jpg",
+      "sizes": "540x720",
+      "form_factor": "narrow"
+    },
+    {
+      "src": "/dist/images/screenshot-720x540.jpg",
+      "type": "image/jpg",
+      "sizes": "720x540",
+      "form_factor": "wide"
+    }
+  ]
+}

generate-icons.js

@@ -15,7 +15,8 @@ const SETTINGS = {
   darkColor: '#0c0c0c',
   androidChromeIconSizes: [36, 48, 72, 96, 144, 192],
   appleTouchIconSizes: [57, 60, 72, 76, 114, 120, 144, 152, 180],
-  faviconSizes: [16, 32, 96],
+  faviconSizes: [16, 32, 96, 192],
+  pwaIconSizes: [72, 128, 144, 192, 512],
 }
 
 const transparent = {r: 0, g: 0, b: 0, alpha: 0};
@@ -24,7 +25,7 @@ SETTINGS.androidChromeIconSizes.forEach(async (size) => {
   await generateIcon({
     size,
     padding: Math.floor(size / 20),
-    inputFilename: SETTINGS.iconLightFilename,
+    inputFilename: SETTINGS.iconDarkFilename,
     outputFilename: `android-chrome-${size}x${size}.png`,
     background: transparent,
   })
@@ -60,6 +61,16 @@ SETTINGS.faviconSizes.forEach(async (size) => {
   });
 });
 
+SETTINGS.pwaIconSizes.forEach(async (size) => {
+  await generateIcon({
+    size,
+    padding: Math.floor(size / 5.5), // 5.5 is a bit arbitrary, but works for the crest
+    inputFilename: SETTINGS.iconDarkFilename,
+    outputFilename: `pwa-icon-${size}x${size}.png`,
+    background: transparent,
+  });
+});
+
 const faviconBuffer = await pngToIco(SETTINGS.faviconSizes.map((size) => path.join(__dirname, SETTINGS.outputDirectory, `favicon-${size}x${size}.png`)));
 await fs.writeFile(path.join(__dirname, SETTINGS.outputDirectory, 'favicon.ico'), faviconBuffer);