feat: lightning bolt logo with full asset set

Favicon SVG with light/dark mode via prefers-color-scheme (lighter
violet in light mode, deeper ultramarine in dark). PNG fallbacks at
192px and 512px. Apple touch icon at 180px. OG image updated with
logo mark. Logo mark shown in site header next to wordmark.

Author: bryantbiggs

docs/public/apple-touch-icon.png

@@ -86,6 +86,9 @@ const isDesignActive = pathname.startsWith(
     </script>
     <ClientRouter />
     <link rel="icon" type="image/svg+xml" href={`${base}favicon.svg`} />
+    <link rel="icon" type="image/png" sizes="192x192" href={`${base}favicon-192.png`} />
+    <link rel="icon" type="image/png" sizes="512x512" href={`${base}favicon-512.png`} />
+    <link rel="apple-touch-icon" href={`${base}apple-touch-icon.png`} />
     <link rel="sitemap" href={`${base}sitemap-index.xml`} />
 
     {
@@ -102,7 +105,10 @@ const isDesignActive = pathname.startsWith(
 
     <header class="site-header">
       <nav aria-label="Primary">
-        <a href={base} class="site-logo">ocync</a>
+        <a href={base} class="site-logo">
+          <img src={`${base}favicon.svg`} alt="" width="24" height="24" class="site-logo-mark" />
+          ocync
+        </a>
         <ul class="site-nav" role="list">
           <li>
             <a

docs/public/apple-touch-icon.svg

@@ -318,6 +318,9 @@
   }
 
   .site-logo {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
     font-size: var(--text-xl);
     font-weight: 800;
     color: var(--pink);