feat(frontend): update app icon

packages/frontend/index.js

@@ -1,7 +1,7 @@
 import { fileURLToPath } from "node:url";
 
 export const assetsPath = fileURLToPath(new URL("assets", import.meta.url));
-export { touchIcon } from "./lib/touch-icon.js";
+export { appIcon } from "./lib/app-icon.js";
 export { templates } from "./lib/nunjucks.js";
 export { styles } from "./lib/lightningcss.js";
 export { scripts } from "./lib/rollup.js";

packages/frontend/layouts/default.njk

@@ -37,9 +37,8 @@
   <meta name="supported-color-schemes" content="light dark">
 
   <link rel="alternate" href="{{ application.url }}/feed.jf2" type="application/jf2feed+json" title="JF2 Feed">
-  <link rel="apple-touch-icon" href="{{ application.url }}{{ assetPath | default("/assets") }}/app.png">
+  <link rel="apple-touch-icon" href="{{ application.url }}{{ assetPath | default("/assets") }}/app-icon-180.png">
   <link rel="icon" href="{{ application.url }}{{ assetPath | default("/assets") }}/icon.svg">
-  <link rel="mask-icon" href="{{ application.url }}{{ assetPath | default("/assets") }}/icon.svg" color="{{ application.themeColor }}">
   <link rel="preload" href="{{ application.url }}{{ assetPath | default("/assets") }}/mona-sans.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="{{ application.url }}{{ assetPath | default("/assets") }}/app.css">
   <link rel="manifest" href="{{ application.url }}/app.webmanifest">

packages/frontend/lib/app-icon.js

@@ -0,0 +1,16 @@
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import sharp from "sharp";
+
+export const appIcon = async (themeColor, size) => {
+  const svgPath = fileURLToPath(
+    new URL("../assets/app-icon.svg", import.meta.url),
+  );
+
+  const svg = fs.readFileSync(svgPath);
+  return sharp(svg)
+    .tint(themeColor)
+    .resize(size)
+    .png({ colours: 16 })
+    .toBuffer();
+};