fix: serve favicon.svg as the app favicon via root links export (#854)

__tests__/root.test.tsx

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createRoutesStub } from "react-router";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { http, HttpResponse } from "msw";
-import App from "#/root";
+import App, { links } from "#/root";
 import { server } from "#/mocks/node";
 import { __resetActiveStoreForTests } from "#/api/backend-registry/active-store";
 import { ActiveBackendProvider } from "#/contexts/active-backend-context";
@@ -142,3 +142,17 @@ describe("App root agent-server availability guard", () => {
     ).not.toBeInTheDocument();
   });
 });
+
+describe("App root document links", () => {
+  it("declares the SVG favicon used by the browser tab", () => {
+    // Act
+    const documentLinks = links();
+
+    // Assert
+    expect(documentLinks).toContainEqual({
+      rel: "icon",
+      type: "image/svg+xml",
+      href: "/favicon.svg",
+    });
+  });
+});

src/root.tsx

@@ -1,5 +1,6 @@
 import {
   Links,
+  LinksFunction,
   Meta,
   MetaFunction,
   Outlet,
@@ -94,6 +95,10 @@ function MissingAgentServerScreen() {
   );
 }
 
+export const links: LinksFunction = () => [
+  { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
+];
+
 export const meta: MetaFunction = () => [
   { title: "OpenHands" },
   { name: "description", content: "Let's Start Building!" },