brand: an icon, ~/ and a block cursor

The app was a ring and a dot, drawn in CSS in the bar and inlined as a data
URL for the favicon. It now has an icon of its own: the `~/` of the prompt it
is named after, with the cursor waiting beside it in the alarm colour of the
theme. It is the favicon, a full-bleed touch icon for a phone's home screen,
and the mark in the bar, on the login and on the share page, served from
`web/public` so all of them are the same file.

The banner and a 512 px copy in docs/images are for the README and the wiki.
The crate description says what the workspace is now, not the diary it was.

web/src/lib/Bar.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <header class="bar">
-  <span class="mark" aria-hidden="true"></span>
+  <img class="mark" src="/favicon.svg" alt="" width="18" height="18" />
   <span class="divider"></span>
 
   <nav class="spaces" aria-label="spaces">

web/src/lib/Login.svelte

@@ -37,7 +37,7 @@
 <main>
   <form class="resolve" onsubmit={submit}>
     <div class="brand">
-      <span class="mark" aria-hidden="true"></span>
+      <img class="mark" src="/favicon.svg" alt="" width="34" height="34" />
       <h1 class="display">workspace</h1>
     </div>
 
@@ -95,22 +95,8 @@
   .brand { display: flex; align-items: center; gap: 14px; }
   h1 { margin: 0; font-size: 26px; text-shadow: 0 2px 24px var(--ink); }
 
-  /* The ring-and-dot mark, larger than in the bar. */
-  .mark {
-    position: relative;
-    width: 18px;
-    height: 18px;
-    flex: none;
-    border: 2px solid var(--light);
-    border-radius: 999px;
-  }
-  .mark::after {
-    content: '';
-    position: absolute;
-    inset: 3px;
-    border-radius: 999px;
-    background: var(--light);
-  }
+  /* The app icon: ~/ and a block cursor. */
+  .mark { flex: none; display: block; }
 
   p { margin: 0 0 4px; font-size: 10px; }
 

web/src/lib/Shared.svelte

@@ -78,7 +78,7 @@
 
 <div class="shell shared">
   <header class="bar">
-    <span class="mark" aria-hidden="true"></span>
+    <img class="mark" src="/favicon.svg" alt="" width="18" height="18" />
     <span class="divider"></span>
     <span class="pill" aria-current="true">shared</span>
     <span class="divider"></span>