mreichhoff · mreichhoff · Dec 14, 2025 · Dec 14, 2025 · Dec 14, 2025 · Dec 14, 2025
diff --git a/public/css/trielingual.css b/public/css/trielingual.css
@@ -1675,7 +1675,7 @@ select {
 
     #control-pane {
         width: 100%;
-        height: 50%;
+        height: 45%;
         border-right: 0;
         border-bottom: 1px solid #333;
     }
@@ -1684,7 +1684,7 @@ select {
        should take 50% of the viewport height and the graph fill that area. */
     #graph-area {
         width: 100%;
-        height: 50%;
+        height: 55%;
         display: flex;
         flex-direction: column;
     }

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/images/icon-128x128.png b/public/images/icon-128x128.png
diff --git a/public/images/icon-144x144.png b/public/images/icon-144x144.png
diff --git a/public/images/icon-152x152.png b/public/images/icon-152x152.png
diff --git a/public/images/icon-192x192-maskable.png b/public/images/icon-192x192-maskable.png
diff --git a/public/images/icon-192x192.png b/public/images/icon-192x192.png
diff --git a/public/images/icon-384x384.png b/public/images/icon-384x384.png
diff --git a/public/images/icon-512x512-maskable.png b/public/images/icon-512x512-maskable.png
diff --git a/public/images/icon-512x512.png b/public/images/icon-512x512.png
diff --git a/public/images/icon-72x72.png b/public/images/icon-72x72.png
diff --git a/public/images/icon-96x96.png b/public/images/icon-96x96.png
diff --git a/public/images/icon.svg b/public/images/icon.svg
diff --git a/public/index.html b/public/index.html
@@ -14,8 +14,9 @@
     <script src="/js/data-load.js"></script>
     <link rel="stylesheet" type="text/css" href="/css/trielingual.css">
     <link rel="manifest" href="/manifest.json">
-    <!-- <link rel="icon" href="images/favicon-32x32.png" type="image/x-icon">
-    <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> -->
+    <link rel="icon" href="/favicon.png" type="image/png">
+    <link rel="apple-touch-icon" href="/images/icon-192x192.png">
+    <meta name="theme-color" content="#071024">
 </head>
 
 <body>

diff --git a/public/manifest.json b/public/manifest.json
@@ -3,7 +3,69 @@
     "short_name": "TrieLingual",
     "start_url": ".",
     "display": "standalone",
-    "background_color": "#121212",
+    "background_color": "#071024",
+    "theme_color": "#6de200",
     "description": "Learn languages by studying how words relate to one another alongside example sentences that illustrate their use.",
-    "icons": []
+    "icons": [
+        {
+            "src": "images/icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "images/icon-96x96.png",
+            "sizes": "96x96",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "images/icon-128x128.png",
+            "sizes": "128x128",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "images/icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "images/icon-152x152.png",
+            "sizes": "152x152",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "images/icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "images/icon-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "images/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "images/icon-192x192-maskable.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "images/icon-512x512-maskable.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
 }
diff --git a/scripts/generate-pwa-icons.sh b/scripts/generate-pwa-icons.sh
@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# Script to generate PWA icons from SVG source using rsvg-convert
+# Usage: ./scripts/generate-pwa-icons.sh
+
+cd "$(dirname "$0")/../public/images"
+
+SVG_SOURCE="icon.svg"
+SIZES=(72 96 128 144 152 192 384 512)
+
+echo "Generating PWA icons from $SVG_SOURCE..."
+echo ""
+
+# Generate standard icons
+for size in "${SIZES[@]}"; do
+    echo "Creating ${size}x${size} icon..."
+    rsvg-convert -w "$size" -h "$size" "$SVG_SOURCE" -o "icon-${size}x${size}.png"
+done
+
+# Generate maskable icons (with padding for safe zone)
+echo ""
+echo "Creating maskable icons..."
+for size in 192 512; do
+    echo "Creating ${size}x${size} maskable icon..."
+    # Add 10% padding on all sides for safe zone
+    padding=$((size / 10))
+    inner=$((size - 2 * padding))
+    rsvg-convert -w "$inner" -h "$inner" "$SVG_SOURCE" | magick - -background "#071024" \
+        -gravity center -extent "${size}x${size}" \
+        "icon-${size}x${size}-maskable.png"
+done
+
+# Generate favicon
+echo ""
+echo "Creating favicon..."
+rsvg-convert -w 32 -h 32 "$SVG_SOURCE" -o "../favicon.png"
+
+echo ""
+echo "✓ Icon generation complete!"
+echo ""
+echo "Generated files:"
+ls -lh icon-*.png ../favicon.png 2>/dev/null | awk '{print "  " $9 " (" $5 ")"}'