diff --git a/web/src/app.html b/web/src/app.html
index 9b73de6d1..2d7df91be 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -14,7 +14,7 @@
-
+
diff --git a/web/src/routes/favicon.svg/+server.ts b/web/src/routes/favicon.svg/+server.ts
new file mode 100644
index 000000000..6d29ee008
--- /dev/null
+++ b/web/src/routes/favicon.svg/+server.ts
@@ -0,0 +1,22 @@
+import { dev } from "$app/environment";
+import dolly from "../../../static/logos/dolly.svg?raw";
+import type { RequestHandler } from "./$types";
+
+// the logo is monochrome and tracks the color scheme, so we repaint the favicon
+// per environment to tell a local or next tab apart from production at a glance
+const devTint = "#d97706"; // --color-foreground-warning
+const nextTint = "#4338ca"; // --color-foreground-info
+
+export const prerender = false;
+
+export const GET: RequestHandler = ({ url }) => {
+ const tint = dev ? devTint : url.hostname === "next.tangled.org" ? nextTint : null;
+ const svg = tint ? dolly.replace(/color:\s*#[0-9a-f]{3,8};/gi, `color: ${tint};`) : dolly;
+
+ return new Response(svg, {
+ headers: {
+ "content-type": "image/svg+xml",
+ "cache-control": dev ? "no-store" : "public, max-age=3600"
+ }
+ });
+};