feat: svg favicon

.changeset/sour-lamps-explain.md

@@ -0,0 +1,5 @@
+---
+"web": minor
+---
+
+Use SVG favicon

apps/web/src/app/icon.tsx

@@ -0,0 +1,34 @@
+import { ImageResponse } from 'next/og';
+import { Logo } from '../components/logo';
+
+// Image metadata
+export const size = {
+  width: 32,
+  height: 32,
+};
+export const contentType = 'image/png';
+
+// Image generation
+export default function Icon() {
+  return new ImageResponse(
+    (
+      // ImageResponse JSX element
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <Logo variant="compact" style={{ width: '100%', height: 'auto' }} />
+      </div>
+    ),
+    // ImageResponse options
+    {
+      // For convenience, we can re-use the exported icons size metadata
+      // config to also set the ImageResponse's width and height.
+      ...size,
+    }
+  );
+}