refactor(favicon): use background-less favicon

website/src/layouts/BaseLayout.astro

@@ -38,11 +38,11 @@ const { default: favicon } = await import("/public/img/favicon.svg?raw");
 		<title>{title}</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-		<link rel="mask-icon" href="/img/pinned-logo.svg" color="#FFC905">
-		<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
-		<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
 		<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
+		<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
 		<link rel="icon" type="image/svg+xml" href={encodeSVG(favicon)}>
+		<link rel="manifest" href="/img/site.webmanifest">
 
 		<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
 		<link rel="preload" href="/fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin>

website/src/playground/components/RomeHeader.tsx

@@ -1,16 +1,9 @@
 import biomeIcon from "../../svg/logomark.svg";
-import biomeDarkIcon from "../../svg/logomark_white_yellow.svg";
-import { useTheme } from "../utils";
 
 export default function RomeHeader() {
-	const theme = useTheme();
-
 	return (
 		<>
-			<img
-				alt="Biome logo"
-				src={theme === "dark" ? biomeDarkIcon : biomeIcon}
-			/>
+			<img alt="Biome logo" src={biomeIcon} />
 			<span>Biome</span>
 		</>
 	);