Add DOCSight icon as favicon, sidebar logo, and README header

itsDNNS · claude · itsDNNS · commit 8be3d155bb1d · 2026-02-09T14:17:52.000+01:00
- Favicon on all pages (login, setup, settings, dashboard)
- Icon in sidebar header, login page, and setup page
- Centered icon + title in README

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/README.md b/README.md
@@ -1,6 +1,12 @@
-# DOCSight
+<p align="center">
+  <img src="docs/docsight.png" alt="DOCSight" width="128">
+</p>
 
-Docker container that monitors DOCSIS channel health on cable modems and publishes per-channel sensor data to Home Assistant via MQTT Auto-Discovery. Currently supports AVM FRITZ!Box Cable routers.
+<h1 align="center">DOCSight</h1>
+
+<p align="center">
+  Docker container that monitors DOCSIS channel health on cable modems and publishes per-channel sensor data to Home Assistant via MQTT Auto-Discovery. Currently supports AVM FRITZ!Box Cable routers.
+</p>
 
 ![Dashboard Dark Mode](docs/screenshots/dashboard-dark.png)
 
diff --git a/app/static/icon.png b/app/static/icon.png
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>DOCSight</title>
+    <link rel="icon" type="image/png" href="/static/icon.png">
     <style>
         :root, [data-theme="dark"] {
             --bg: #1a1a2e;
@@ -341,6 +342,7 @@
 <!-- Sidebar -->
 <nav class="sidebar" id="sidebar">
     <div class="sidebar-header">
+        <img src="/static/icon.png" alt="DOCSight" style="width:28px;height:28px;border-radius:6px;vertical-align:middle;margin-right:8px;">
         <span>DOCSight</span>
         <button class="sidebar-toggle" id="sidebar-collapse" title="Collapse">&#10094;</button>
     </div>
diff --git a/app/templates/login.html b/app/templates/login.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>DOCSight - {{ t.login_title }}</title>
+    <link rel="icon" type="image/png" href="/static/icon.png">
     <style>
         :root, [data-theme="dark"] {
             --bg: #1a1a2e;
@@ -94,6 +95,7 @@
 </head>
 <body>
     <div class="login-box">
+        <img src="/static/icon.png" alt="DOCSight" style="width:64px;height:64px;border-radius:14px;display:block;margin:0 auto 12px;">
         <h1>DOCSight</h1>
         <p class="hint">{{ t.login_hint }}</p>
         {% if error %}
diff --git a/app/templates/settings.html b/app/templates/settings.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>DOCSight - {{ t.settings }}</title>
+    <link rel="icon" type="image/png" href="/static/icon.png">
     <style>
         :root, [data-theme="dark"] {
             --bg: #1a1a2e;
diff --git a/app/templates/setup.html b/app/templates/setup.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>DOCSight - {{ t.initial_setup }}</title>
+    <link rel="icon" type="image/png" href="/static/icon.png">
     <style>
         :root, [data-theme="dark"] {
             --bg: #1a1a2e;
@@ -179,9 +180,12 @@
 <body>
 
 <div class="top-row">
-    <div>
-        <h1>DOCSight</h1>
-        <p class="subtitle">{{ t.initial_setup }}</p>
+    <div style="display:flex;align-items:center;gap:12px;">
+        <img src="/static/icon.png" alt="DOCSight" style="width:48px;height:48px;border-radius:10px;">
+        <div>
+            <h1>DOCSight</h1>
+            <p class="subtitle">{{ t.initial_setup }}</p>
+        </div>
     </div>
     <select class="lang-select" onchange="location.href='?lang='+this.value">
         {% for code, name in languages.items() %}
diff --git a/docs/docsight.png b/docs/docsight.png
