diff --git a/docs/public/static/favicon-dev.ico b/docs/public/static/favicon-dev.ico
index f0d7d90ce7..973420a054 100644
Binary files a/docs/public/static/favicon-dev.ico and b/docs/public/static/favicon-dev.ico differ
diff --git a/docs/public/static/favicon.ico b/docs/public/static/favicon.ico
index 0744032c80..81f2e7e4ba 100644
Binary files a/docs/public/static/favicon.ico and b/docs/public/static/favicon.ico differ
diff --git a/docs/src/app/Favicons.tsx b/docs/src/app/Favicons.tsx
index 2668a4a13b..1f6981f42f 100644
--- a/docs/src/app/Favicons.tsx
+++ b/docs/src/app/Favicons.tsx
@@ -1,25 +1,18 @@
-'use client';
import * as React from 'react';
-// TODO: add SVG favicons when we are settled with the logo
export function Favicons() {
return (
{/* Separate set of favicons in dev so that the dev tabs are easier to spot */}
{process.env.NODE_ENV !== 'production' && (
-
-
- {/* */}
-
+
)}
{process.env.NODE_ENV === 'production' && (
-
-
- {/* */}
-
+
)}
+ {/* Used by Safari when the website is favourited */}
);
diff --git a/docs/src/components/Header.css b/docs/src/components/Header.css
index 485a4d94a0..b10e8ef5c5 100644
--- a/docs/src/components/Header.css
+++ b/docs/src/components/Header.css
@@ -75,4 +75,24 @@
}
}
}
+
+ .HeaderLogoLink {
+ display: flex;
+ padding: 0.25rem 0.5rem;
+ margin: -0.25rem -0.5rem;
+
+ &:active {
+ color: var(--color-gray-500);
+ }
+
+ & svg {
+ margin-top: -0.125rem;
+ }
+
+ &:focus-visible {
+ border-radius: var(--radius-md);
+ outline: 2px solid var(--color-blue);
+ outline-offset: -1px;
+ }
+ }
}
diff --git a/docs/src/components/Header.tsx b/docs/src/components/Header.tsx
index 4ad9a8d6c0..1930e6f77f 100644
--- a/docs/src/components/Header.tsx
+++ b/docs/src/components/Header.tsx
@@ -12,8 +12,11 @@ export function Header() {
return (