🐛 Make favicon visible in dark themes

davidgasquez · davidgasquez · commit 019028ddc542 · 2026-03-03T11:55:10.000+01:00
diff --git a/web/favicon.svg b/web/favicon.svg
@@ -1,3 +1,14 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 20 20">
+  <style>
+    text {
+      fill: #0b0b0b;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      text {
+        fill: #f2f2f2;
+      }
+    }
+  </style>
   <text x="10" y="10" text-anchor="middle" dominant-baseline="middle">࿂</text>
 </svg>
diff --git a/web/index.html b/web/index.html
@@ -7,7 +7,7 @@
             name="description"
             content="Historical snapshot of Gitcoin Grants Stack era data."
         />
-        <link rel="icon" href="favicon.svg" />
+        <link rel="icon" type="image/svg+xml" href="favicon.svg" />
         <title>Grants Data Portal</title>
         <style>
             :root {
@@ -177,7 +177,7 @@
 
         <main id="main-content" class="layout">
             <header class="hero">
-                <img class="logo" src="favicon.svg" alt="" aria-hidden="true" />
+                <img class="logo" src="logo.svg" alt="" aria-hidden="true" />
                 <h1>Grants Data Portal</h1>
             </header>
 
diff --git a/web/logo.svg b/web/logo.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 20 20">
+  <text x="10" y="10" text-anchor="middle" dominant-baseline="middle">࿂</text>
+</svg>
