feat(brand): use /logo.svg for the wolf mark + document favicon drop-in

WolfMark now loads public/logo.svg (your provided SVG mark) with the built-in
SVG fallback when absent. Favicon goes at apps/web/src/app/favicon.ico.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: nathanialhenniges

README.md

@@ -167,9 +167,11 @@ Timer config shape:
 
 ### Adding your logo
 
-Drop your wolf mark at `apps/web/public/wolf_mark.png` and it is used
-automatically across the overlays and panel. If the file is missing, a built-in
-brand SVG mark is shown instead, so nothing ever renders broken.
+Drop your wolf mark (head only) at `apps/web/public/logo.svg` and it is used
+automatically across the overlays and panel. Put your favicon at
+`apps/web/src/app/favicon.ico` (Next serves it automatically). If `logo.svg` is
+missing, a built-in brand SVG mark is shown instead, so nothing ever renders
+broken.
 
 ## Tech Stack
 

apps/web/src/components/wolf-mark.tsx

@@ -5,25 +5,25 @@ import { useState } from "react";
 /**
  * The Wolfathon mark.
  *
- * Prefers your real logo at `public/wolf_mark.png` (drop it in and it's used
+ * Prefers your real logo at `public/logo.svg` (drop it in and it's used
  * everywhere automatically). If that file is missing, it falls back to a
  * built-in brand SVG so nothing ever renders broken — handy on the OBS overlay.
  *
  * Size is controlled entirely by `className` (e.g. `size-8` or `size-[4cqw]`).
  */
 export function WolfMark({ className }: { className?: string }) {
-  const [usePng, setUsePng] = useState(true);
+  const [useLogo, setUseLogo] = useState(true);
 
   return (
     <span className={className} role="img" aria-label="Wolfathon">
-      {usePng ? (
+      {useLogo ? (
         // Plain <img> (not next/image) so a missing file degrades gracefully.
         // eslint-disable-next-line @next/next/no-img-element
         <img
-          src="/wolf_mark.png"
+          src="/logo.svg"
           alt=""
           className="h-full w-full object-contain"
-          onError={() => setUsePng(false)}
+          onError={() => setUseLogo(false)}
         />
       ) : (
         <WolfMarkSvg />