fix(pwa): add icon/manifest tags to login page and fix maskable purpose

dorlugasigal · Copilot · dorlugasigal · commit 7d4ee501fd19 · 2026-03-18T13:03:15.000+02:00
Three issues preventing the PWA icon from displaying:

1. Login page HTML had no apple-touch-icon or manifest link tags.
   When users add to home screen from the login page, browsers
   couldn't discover the icon at all.

2. Manifest had a separate icon with purpose 'maskable' instead of
   'any maskable'. This caused some browsers to skip it for display.

3. Added 180x180 icon to manifest and includeAssets for precaching.

Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
@@ -13,6 +13,7 @@ export default defineConfig({
       injectManifest: {
         globPatterns: ['**/*.{js,css,ico,png,svg,woff2,ttf}'],
       },
+      includeAssets: ['icons/icon-180.png', 'icons/icon-192.png', 'icons/icon-512.png'],
       manifest: {
         name: 'TermBeam',
         short_name: 'TermBeam',
@@ -22,13 +23,14 @@ export default defineConfig({
         background_color: '#1e1e1e',
         theme_color: '#1e1e1e',
         icons: [
+          { src: '/icons/icon-180.png', sizes: '180x180', type: 'image/png' },
           { src: '/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
           { src: '/icons/icon-512.png', sizes: '512x512', type: 'image/png' },
           {
             src: '/icons/icon-512.png',
             sizes: '512x512',
             type: 'image/png',
-            purpose: 'maskable',
+            purpose: 'any maskable',
           },
         ],
       },
diff --git a/src/server/auth.js b/src/server/auth.js
@@ -9,6 +9,10 @@ const LOGIN_HTML = `<!DOCTYPE html>
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="mobile-web-app-capable" content="yes" />
   <meta name="theme-color" content="#1e1e1e" />
+  <link rel="icon" type="image/png" href="/icons/icon-192.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180.png" />
+  <link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192.png" />
+  <link rel="manifest" href="/manifest.webmanifest" />
   <title>TermBeam — Login</title>
   <style>
     :root { --bg:#1e1e1e; --surface:#252526; --border:#3c3c3c; --border-subtle:#474747;
