diff --git a/public/css/trielingual.css b/public/css/trielingual.css
index d2613e7aa..d5bcf2f04 100644
--- 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
new file mode 100644
index 000000000..5538bd33c
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/images/icon-128x128.png b/public/images/icon-128x128.png
new file mode 100644
index 000000000..302108d65
Binary files /dev/null and b/public/images/icon-128x128.png differ
diff --git a/public/images/icon-144x144.png b/public/images/icon-144x144.png
new file mode 100644
index 000000000..d5208169c
Binary files /dev/null and b/public/images/icon-144x144.png differ
diff --git a/public/images/icon-152x152.png b/public/images/icon-152x152.png
new file mode 100644
index 000000000..d3c733ff9
Binary files /dev/null and b/public/images/icon-152x152.png differ
diff --git a/public/images/icon-192x192-maskable.png b/public/images/icon-192x192-maskable.png
new file mode 100644
index 000000000..120a278ef
Binary files /dev/null and b/public/images/icon-192x192-maskable.png differ
diff --git a/public/images/icon-192x192.png b/public/images/icon-192x192.png
new file mode 100644
index 000000000..b898cc2d5
Binary files /dev/null and b/public/images/icon-192x192.png differ
diff --git a/public/images/icon-384x384.png b/public/images/icon-384x384.png
new file mode 100644
index 000000000..c1df03ba7
Binary files /dev/null and b/public/images/icon-384x384.png differ
diff --git a/public/images/icon-512x512-maskable.png b/public/images/icon-512x512-maskable.png
new file mode 100644
index 000000000..4874e5999
Binary files /dev/null and b/public/images/icon-512x512-maskable.png differ
diff --git a/public/images/icon-512x512.png b/public/images/icon-512x512.png
new file mode 100644
index 000000000..8e1fb35d9
Binary files /dev/null and b/public/images/icon-512x512.png differ
diff --git a/public/images/icon-72x72.png b/public/images/icon-72x72.png
new file mode 100644
index 000000000..037706fff
Binary files /dev/null and b/public/images/icon-72x72.png differ
diff --git a/public/images/icon-96x96.png b/public/images/icon-96x96.png
new file mode 100644
index 000000000..8eaeb0838
Binary files /dev/null and b/public/images/icon-96x96.png differ
diff --git a/public/images/icon.svg b/public/images/icon.svg
new file mode 100644
index 000000000..cf0dae823
--- /dev/null
+++ b/public/images/icon.svg
@@ -0,0 +1,16 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background gradient -->
+  <defs>
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#071024;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1e3a5f;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="512" height="512" rx="115" fill="url(#bgGradient)"/>
+  
+  <!-- Title text centered - two lines -->
+  <text x="256" y="200" font-family="Inter, system-ui, sans-serif" font-size="130" font-weight="800" fill="#6de200" text-anchor="middle" letter-spacing="0">Trie</text>
+  <text x="256" y="360" font-family="Inter, system-ui, sans-serif" font-size="130" font-weight="800" fill="#6de200" text-anchor="middle" letter-spacing="-2">Lingual</text>
+</svg>
diff --git a/public/index.html b/public/index.html
index a17b43ede..fd88e3d4c 100644
--- 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
index 090055543..ace574c59 100644
--- 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"
+        }
+    ]
 }
\ No newline at end of file
diff --git a/scripts/generate-pwa-icons.sh b/scripts/generate-pwa-icons.sh
new file mode 100755
index 000000000..9f9e15325
--- /dev/null
+++ 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 ")"}'