Use the app icon in the header

The header carried the bare tiger head in two files, one drawn for light
backgrounds and one for dark. The app icon is the mark people already
recognise from the phone home screen and the browser tab, and it brings
its own ground — so one file now serves both themes.

Corners are rounded in CSS rather than by shipping the pre-rounded SVG,
which is built on an opaque full-bleed square and would have shown as a
black tile behind the icon. A hairline inset ring keeps the near-black
edge from disappearing into a dark header.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: BenGlut

src/components/SiteTitle.astro

@@ -1,18 +1,17 @@
 ---
 /**
- * Header brand: the tiger head mark plus the wordmark.
+ * Header brand: the app icon plus the wordmark.
  *
- * The two mark files are the ones the press kit designates — `tiger-head.svg`
- * is drawn in white for dark backgrounds, `tiger-head-contour.svg` in black for
- * light ones — so the header follows the brand rather than recolouring a logo.
+ * `tigersystem-app-icon.svg` is the square app icon — it carries its own dark
+ * ground, so one file serves both themes; the corners are rounded in CSS
+ * rather than by shipping a second, pre-rounded file.
  */
 const locale = Astro.currentLocale;
 const href = locale && locale !== 'en' ? `/${locale}/` : '/';
 ---
 
 <a class="site-title" href={href}>
-  <img class="site-title__mark site-title__mark--light" src="/assets/logos/tiger-head-contour.svg" alt="" width="34" height="19" />
-  <img class="site-title__mark site-title__mark--dark" src="/assets/logos/tiger-head.svg" alt="" width="34" height="19" />
+  <img class="site-title__mark" src="/assets/logos/tigersystem-app-icon.svg" alt="" width="32" height="32" />
   <span class="site-title__text">
     <span class="site-title__name">TigerSystem</span>
     <span class="site-title__kind">Wiki</span>

src/styles/tigersystem.css

@@ -90,19 +90,19 @@
   white-space: nowrap;
 }
 
+/* The app icon: a square that carries its own dark ground, so one file works
+   on both themes. Rounded here rather than in a second SVG, and given a hairline
+   ring so its near-black edge stays visible against a dark header. */
 .site-title__mark {
-  width: auto;
-  height: 1.55rem;
+  width: 1.7rem;
+  height: 1.7rem;
   flex-shrink: 0;
+  border-radius: 23%;
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
 }
 
-:root .site-title__mark--light,
-:root[data-theme='light'] .site-title__mark--dark {
-  display: none;
-}
-
-:root[data-theme='light'] .site-title__mark--light {
-  display: block;
+:root[data-theme='light'] .site-title__mark {
+  box-shadow: none;
 }
 
 .site-title__text {