Use the real BlueBubbles icon for the logo and social card

src/components/Nav.astro

@@ -3,6 +3,8 @@ import { NAV_LINKS } from '@data/site';
 import NavLink from './NavLink.astro';
 import ThemeToggle from './ThemeToggle.astro';
 import { Icon } from 'astro-icon/components';
+import { Image } from 'astro:assets';
+import brandIcon from '@assets/bluebubbles-icon.png';
 
 interface Props {
   path: string;
@@ -19,21 +21,18 @@ const { path } = Astro.props;
       class="flex items-center gap-2 text-lg font-extrabold tracking-tight text-strong
              focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent"
     >
-      <span
-        class="grid size-7 place-items-center rounded-bubble rounded-bl-sm bg-accent-solid text-white"
+      {/* The real app icon from the server repo's icons/regular set, rather than
+          a bubble drawn here. It is the brand mark: a blue bubble with three
+          dots, and it carries its own colour, so no tinting container. */}
+      <Image
+        src={brandIcon}
+        alt=""
         aria-hidden="true"
-      >
-        <!-- The bubble path's bounding box is centred at y=11 in a 24-unit box,
-           so a plain "0 0 24 24" makes the glyph ride high. Shifting the
-           viewBox up moves the glyph down: -1 would centre it geometrically,
-           and -1.5 goes slightly further so the round body optically straddles
-           the centre rather than the tail dragging it upward. Done on the
-           viewBox because the path ends on an absolute command (S17 3 12 3z)
-           and so cannot be moved by changing the opening moveto. -->
-        <svg viewBox="0 -1.5 24 24" class="size-4" fill="currentColor">
-          <path d="M12 3c-5 0-9 3.2-9 7.2 0 2.3 1.3 4.3 3.4 5.6-.2.9-.8 2.3-1.6 3.2 0 0 2.6-.4 4.5-1.8.9.2 1.8.3 2.7.3 5 0 9-3.2 9-7.3S17 3 12 3z" />
-        </svg>
-      </span>
+        width={28}
+        height={28}
+        densities={[1, 2]}
+        class="size-7 shrink-0"
+      />
       BlueBubbles
     </a>