Dev favicon

app/root.tsx

@@ -99,6 +99,16 @@ import "nprogress/nprogress.css";
 // already targets the header instead of briefly rendering over the sidebar.
 NProgress.configure({ parent: `#${NPROGRESS_ANCHOR_ID}` });
 
+type DevFaviconColors = { fill: string; stroke: string };
+
+// tints the favicon per local dev instance so the browser tabs of parallel
+// worktrees are told apart, matching each one's VS Code (Peacock) colors
+const DEV_FAVICON_COLORS: Record<string, DevFaviconColors | undefined> = {
+	yellow: { fill: "#eae4c8", stroke: "#dcd2a3" },
+	pink: { fill: "#eac8dd", stroke: "#dca3c6" },
+	cyan: { fill: "#c8e3ea", stroke: "#a3d0dc" },
+};
+
 export const shouldRevalidate: ShouldRevalidateFunction = (args) => {
 	if (isMatchResultsScopedRevalidation(args)) return false;
 	if (isRevalidation(args)) return true;
@@ -159,6 +169,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 					}
 				: undefined,
 			customTheme: isSupporter(user) ? user?.customTheme : undefined,
+			devFaviconColors: devFaviconColors(request),
 			...layoutData,
 		},
 		{
@@ -244,6 +255,9 @@ function Document({
 					/>
 				))}
 				<ThemeHead />
+				{data?.devFaviconColors ? (
+					<DevFavicon colors={data.devFaviconColors} />
+				) : null}
 				<link rel="manifest" href="/app.webmanifest" />
 				<PWALinks />
 				<Fonts />
@@ -473,6 +487,26 @@ function HydrationTestIndicator() {
 	);
 }
 
+function devFaviconColors(request: Request) {
+	if (process.env.NODE_ENV !== "development") return;
+
+	const [subdomain] = new URL(request.url).hostname.split(".");
+
+	return DEV_FAVICON_COLORS[subdomain];
+}
+
+function DevFavicon({ colors }: { colors: DevFaviconColors }) {
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect x="2" y="2" width="28" height="28" rx="8" fill="${colors.fill}" stroke="${colors.stroke}" stroke-width="4" /></svg>`;
+
+	return (
+		<link
+			rel="icon"
+			type="image/svg+xml"
+			href={`data:image/svg+xml,${encodeURIComponent(svg)}`}
+		/>
+	);
+}
+
 function Fonts() {
 	return (
 		<link