feat: roller coaster logo and working favicon

- public/logo.svg: amber coaster silhouette (lift hill + vertical loop +
  camelback) on transparent background; used in header and README
- app/icon.tsx: PNG favicon via Next.js ImageResponse (works in all
  browsers including Safari); renders simplified hill + loop on dark
  rounded-square background
- app/page.tsx: logo img added next to "Thoosie Calendar" title in header
- README.md: logo displayed at top of document
- Remove app/icon.svg (replaced by icon.tsx → PNG)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/icon.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <!-- Dark rounded background matching app --color-bg -->
-  <rect width="32" height="32" rx="6" fill="#0c1220"/>
-  <!-- Amber T: horizontal bar -->
-  <rect x="6" y="8" width="20" height="4" rx="1.5" fill="#f59e0b"/>
-  <!-- Amber T: vertical stem -->
-  <rect x="13" y="12" width="6" height="14" rx="1.5" fill="#f59e0b"/>
-</svg>

app/icon.tsx

@@ -0,0 +1,59 @@
+import { ImageResponse } from "next/og";
+
+export const size = { width: 32, height: 32 };
+export const contentType = "image/png";
+
+export default function Icon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: 32,
+          height: 32,
+          borderRadius: 8,
+          backgroundColor: "#0c1220",
+          display: "flex",
+          position: "relative",
+        }}
+      >
+        {/* Ground line */}
+        <div
+          style={{
+            position: "absolute",
+            left: 3,
+            right: 3,
+            bottom: 7,
+            height: 2,
+            backgroundColor: "#f59e0b",
+            borderRadius: 1,
+          }}
+        />
+        {/* Lift hill — semicircle bump */}
+        <div
+          style={{
+            position: "absolute",
+            left: 3,
+            bottom: 9,
+            width: 10,
+            height: 13,
+            backgroundColor: "#f59e0b",
+            borderRadius: "50% 50% 0 0",
+          }}
+        />
+        {/* Vertical loop — circle outline */}
+        <div
+          style={{
+            position: "absolute",
+            right: 5,
+            bottom: 7,
+            width: 12,
+            height: 12,
+            border: "2.5px solid #f59e0b",
+            borderRadius: "50%",
+          }}
+        />
+      </div>
+    ),
+    { width: 32, height: 32 },
+  );
+}

app/page.tsx

@@ -78,14 +78,18 @@ export default async function HomePage({ searchParams }: PageProps) {
           justifyContent: "space-between",
           gap: 12,
         }}>
-          <span style={{
-            fontSize: "1.1rem",
-            fontWeight: 700,
-            color: "var(--color-text)",
-            letterSpacing: "-0.02em",
-          }}>
-            Thoosie Calendar
-          </span>
+          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src="/logo.svg" alt="" style={{ height: 28, width: "auto" }} />
+            <span style={{
+              fontSize: "1.1rem",
+              fontWeight: 700,
+              color: "var(--color-text)",
+              letterSpacing: "-0.02em",
+            }}>
+              Thoosie Calendar
+            </span>
+          </div>
 
           <span style={{
             background: "var(--color-surface)",