From 8235fbd4ef6c8adee39879863bfbe625eee0c8f9 Mon Sep 17 00:00:00 2001
From: Marc Campbell <marc.e.campbell@gmail.com>
Date: Tue, 3 Feb 2026 00:41:23 +0000
Subject: [PATCH] Add ttl.sh favicon - timer/clock design

- Green gradient background (matches accent color)
- Clock face with timer knob on top
- Clean, recognizable at small sizes

Signed-off-by: Marc Campbell <marc.e.campbell@gmail.com>
---
 docker-compose.yaml    |  2 +-
 web/public/favicon.svg | 13 +++++++++++++
 web/public/icon.svg    | 37 ++++++++++++++-----------------------
 web/src/app/layout.tsx | 12 ++----------
 4 files changed, 30 insertions(+), 34 deletions(-)
 create mode 100644 web/public/favicon.svg

diff --git a/docker-compose.yaml b/docker-compose.yaml
index 01dde71..7d5a191 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,6 +1,6 @@
 services:
   web:
-    image: us-east4-docker.pkg.dev/rgstry/ttl-sh-web/web:latest
+    image: ghcr.io/replicatedhq/ttlsh-web:latest
     build:
       context: web
       dockerfile: Dockerfile
diff --git a/web/public/favicon.svg b/web/public/favicon.svg
new file mode 100644
index 0000000..04eabbe
--- /dev/null
+++ b/web/public/favicon.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#10b981"/>
+      <stop offset="100%" style="stop-color:#059669"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="7" fill="url(#grad)"/>
+  <circle cx="16" cy="17" r="10" fill="none" stroke="white" stroke-width="2"/>
+  <line x1="16" y1="17" x2="16" y2="10" stroke="white" stroke-width="2" stroke-linecap="round"/>
+  <line x1="16" y1="17" x2="21" y2="17" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+  <rect x="14" y="4" width="4" height="4" rx="1" fill="white"/>
+</svg>
diff --git a/web/public/icon.svg b/web/public/icon.svg
index 5c11e6c..87e24d3 100644
--- a/web/public/icon.svg
+++ b/web/public/icon.svg
@@ -1,26 +1,17 @@
 <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    @media (prefers-color-scheme: light) {
-      .background { fill: black; }
-      .foreground { fill: white; }
-    }
-    @media (prefers-color-scheme: dark) {
-      .background { fill: white; }
-      .foreground { fill: black; }
-    }
-  </style>
-  <g clip-path="url(#clip0_7960_43945)">
-    <rect class="background" width="180" height="180" rx="37" />
-    <g style="transform: scale(95%); transform-origin: center">
-      <path class="foreground"
-        d="M101.141 53H136.632C151.023 53 162.689 64.6662 162.689 79.0573V112.904H148.112V79.0573C148.112 78.7105 148.098 78.3662 148.072 78.0251L112.581 112.898C112.701 112.902 112.821 112.904 112.941 112.904H148.112V126.672H112.941C98.5504 126.672 86.5638 114.891 86.5638 100.5V66.7434H101.141V100.5C101.141 101.15 101.191 101.792 101.289 102.422L137.56 66.7816C137.255 66.7563 136.945 66.7434 136.632 66.7434H101.141V53Z" />
-      <path class="foreground"
-        d="M65.2926 124.136L14 66.7372H34.6355L64.7495 100.436V66.7372H80.1365V118.47C80.1365 126.278 70.4953 129.958 65.2926 124.136Z" />
-    </g>
-  </g>
   <defs>
-    <clipPath id="clip0_7960_43945">
-      <rect width="180" height="180" fill="white" />
-    </clipPath>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </linearGradient>
   </defs>
-</svg>
\ No newline at end of file
+  <!-- Background -->
+  <rect width="180" height="180" rx="40" fill="url(#grad)"/>
+  <!-- Clock circle -->
+  <circle cx="90" cy="95" r="55" fill="none" stroke="white" stroke-width="8" opacity="0.9"/>
+  <!-- Clock hands -->
+  <line x1="90" y1="95" x2="90" y2="55" stroke="white" stroke-width="8" stroke-linecap="round"/>
+  <line x1="90" y1="95" x2="120" y2="95" stroke="white" stroke-width="6" stroke-linecap="round"/>
+  <!-- Top notch (like a timer) -->
+  <rect x="82" y="28" width="16" height="20" rx="4" fill="white"/>
+</svg>
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 5b34d04..1e0f4ae 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -20,19 +20,11 @@ export const metadata: Metadata = {
   icons: {
     icon: [
       {
-        url: '/icon-light-32x32.png',
-        media: '(prefers-color-scheme: light)',
-      },
-      {
-        url: '/icon-dark-32x32.png',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/icon.svg',
+        url: '/favicon.svg',
         type: 'image/svg+xml',
       },
     ],
-    apple: '/apple-icon.png',
+    apple: '/icon.svg',
   },
 }