Use the app icon as the web favicon and landing logo

RecipesCamIcon.png (scaled to 256px) becomes favicon + apple-touch-icon and
replaces the drawn camera svg in front of the landing wordmark, which now sits
a touch closer to it.

docker/frontend/index.html

@@ -4,7 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#0a0a0a" />
-    <link rel="icon" href="data:," />
+    <link rel="icon" type="image/png" href="/assets/RecipesCamIcon.png" />
+    <link rel="apple-touch-icon" href="/assets/RecipesCamIcon.png" />
     <title>RecipesCam — web</title>
     <meta name="description" content="RecipesCam web — grade photos with the same film recipes as the app." />
   </head>

docker/frontend/src/Landing.tsx

@@ -142,10 +142,7 @@ export function Landing() {
       <nav className="lp-nav">
         <div className="lp-wrap">
           <a className="lp-logo" href="#top" onClick={() => setMenu(false)}>
-            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round">
-              <path d="M3 8a2 2 0 0 1 2-2h2l1.4-2h7.2L17 6h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
-              <circle cx="12" cy="12.5" r="3.4" />
-            </svg>
+            <img className="lp-logo-mark" src="/assets/RecipesCamIcon.png" alt="" width="22" height="22" />
             Recipes<em>Cam</em>
           </a>
           <div className="lp-nav-links">

docker/frontend/src/styles/landing.css

@@ -116,9 +116,9 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
   border-bottom: 1px solid var(--lp-line);
 }
 .lp-nav .lp-wrap { display: flex; align-items: center; gap: 18px; height: 62px; }
-.lp-logo { display: flex; align-items: center; gap: 9px; font-family: var(--lp-display); font-weight: 800; font-size: 18px; }
+.lp-logo { display: flex; align-items: center; gap: 6px; font-family: var(--lp-display); font-weight: 800; font-size: 18px; }
 .lp-logo em { font-style: normal; color: var(--lp-ink-amber); }
-.lp-logo svg { color: var(--lp-amber); }
+.lp-logo-mark { border-radius: 6px; display: block; }
 .lp-nav-links { display: flex; gap: 16px; margin-left: 14px; font-size: 12.5px; color: var(--lp-muted); }
 .lp-nav-links a:hover { color: var(--lp-text); }
 .lp-nav .lp-spacer { flex: 1 1 auto; }
@@ -421,7 +421,7 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
   /* logo + theme + language + burger have to fit a 360px phone */
   .lp-nav .lp-wrap { gap: 10px; }
   .lp-logo { font-size: 15px; }
-  .lp-logo svg { width: 18px; height: 18px; }
+  .lp-logo-mark { width: 18px; height: 18px; }
   .lp-tool { width: 30px; height: 30px; font-size: 11px; }
   .lp-burger { padding: 6px; }
   .lp-sec { padding: 64px 0; }