A logo drawn from the radio's screen, to app icon guidelines (#55)

The 2004 icon is a whole radio on a transparent background and not
square, so the tab icon was padded and iOS painted the home-screen icon
on white. web/logo.svg is the radio's screen alone, its tuning scale and
orange needle, laid out as Apple's app icon guidelines ask: opaque and
full-bleed (the system cuts its own corners), a gradient background and
flat foreground layers with hard edges, no highlights or shadows of its
own, nothing thin enough to vanish at 32px. Each layer is a <g>, ready to
split out for Icon Composer. web/logo-dark.svg is the same layers
recoloured.

favicon.png (128) and apple-touch-icon.png (180) are renders of it. The
pages show it from /logo.svg, served outside the auth layer for the
sign-in page, with an app icon's rounded corners. The 2004 icon stays at
/icon.png for anything outside that links to it.

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

web/admin.html

@@ -13,7 +13,7 @@
 <!-- The server sends this page, and its script, to admins only. -->
 <header id="topbar">
   <a class="btn ico" href="/" title="Back to iPodderX" aria-label="Back to iPodderX" data-icon="left"></a>
-  <img class="logo" src="/icon.png" alt="" width="26">
+  <img class="logo" src="/logo.svg" alt="" width="26">
   <h1>Admin</h1>
   <span class="grow"></span>
   <nav class="tabs" id="atabs">

web/app.css

@@ -495,7 +495,7 @@ a{color:var(--accent)}
 }
 .brand{display:flex;align-items:center;gap:9px;padding:14px 14px 10px}
 .brand .logo{
-  width:30px;height:30px;flex:none;object-fit:contain;
+  width:30px;height:30px;flex:none;border-radius:7px;
 }
 .brand h1{font-size:16px;margin:0;font-weight:650;letter-spacing:-.01em;color:var(--fg);flex:1}
 .iconbtn{
@@ -768,7 +768,7 @@ kbd{font:inherit;font-size:12px;color:var(--fg);background:var(--panel2);border:
 body.adminpage{display:block;overflow:auto}
 body.adminpage #topbar{position:sticky;top:0;z-index:5}
 body.adminpage #topbar h1{font-size:16px;margin:0;font-weight:650}
-body.adminpage #topbar .logo{border-radius:5px}
+body.adminpage #topbar .logo{border-radius:6px}
 body.adminpage #topbar > a.btn{text-decoration:none}
 body.adminpage #admin{max-width:780px;margin:0 auto}
 body.adminpage #admin h2{font-size:18px;margin:0 0 12px}

web/index.html

@@ -34,7 +34,7 @@
 <div id="shell">
   <aside id="sidebar">
     <div class="brand">
-      <img class="logo" src="/icon.png" alt="iPodderX" title="The original iPodderX icon, 2004"><h1>iPodderX</h1>
+      <img class="logo" src="/logo.svg" alt="iPodderX"><h1>iPodderX</h1>
     </div>
     <div class="searchwrap"><input type="search" id="feedFilter" placeholder="Filter feeds…"></div>
     <div id="feedlist"></div>

web/login.html

@@ -55,9 +55,9 @@ form{
   width:min(360px,100%);background:var(--panel);border:1px solid var(--line);
   border-radius:14px;padding:22px;box-shadow:var(--shadow);
 }
-/* The one place the 2004 icon is shown at the size it was drawn for. */
+/* The logo is a square app icon, so it gets an app icon's corners. */
 .brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:20px}
-.brand img{width:96px;height:auto}
+.brand img{width:72px;height:72px;border-radius:16px}
 h1{font-size:21px;margin:0;font-weight:650;letter-spacing:-.01em}
 label{display:block;font-size:12px;color:var(--dim);margin:0 0 4px}
 input{
@@ -74,7 +74,7 @@ button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 </style>
 
 <form id="f">
-  <div class="brand"><img src="/icon.png" alt=""><h1>iPodderX</h1></div>
+  <div class="brand"><img src="/logo.svg" alt=""><h1>iPodderX</h1></div>
   <label for="name">Name</label>
   <input id="name" name="name" autocomplete="username" autofocus required>
   <label for="pw">Password</label>

web/logo-dark.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <!-- logo.svg's dark appearance: the same layers in the same places, only recoloured, as the
+       guidelines ask, so the icon reads as itself in either. -->
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#1d4468"/>
+      <stop offset="1" stop-color="#0c2238"/>
+    </linearGradient>
+  </defs>
+  <g id="background"><rect width="1024" height="1024" fill="url(#bg)"/></g>
+  <g id="scale" fill="#8fc2ea">
+    <rect x="120" y="520" width="112" height="304" rx="56" opacity=".45"/>
+    <rect x="288" y="360" width="112" height="464" rx="56" opacity=".7"/>
+    <rect x="456" y="440" width="112" height="384" rx="56" opacity=".55"/>
+    <rect x="624" y="280" width="112" height="544" rx="56" opacity=".85"/>
+    <rect x="792" y="600" width="112" height="224" rx="56" opacity=".5"/>
+  </g>
+  <g id="needle"><rect x="728" y="160" width="72" height="704" rx="36" fill="#ff9f2e"/></g>
+</svg>

web/logo.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <!-- The iPodderX radio's screen, reduced to its tuning scale and needle, laid out as Apple's
+       app icon guidelines ask: square and opaque (the system cuts the corners, and paints
+       transparency black), one background and flat foreground layers with hard edges, no
+       highlights or shadows of its own (the system adds them), nothing thin enough to vanish
+       at 32px. Each <g> is a layer, for splitting out into Icon Composer. -->
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#dff0fb"/>
+      <stop offset="1" stop-color="#9fccef"/>
+    </linearGradient>
+  </defs>
+  <g id="background"><rect width="1024" height="1024" fill="url(#bg)"/></g>
+  <g id="scale" fill="#2f6aa0">
+    <rect x="120" y="520" width="112" height="304" rx="56" opacity=".45"/>
+    <rect x="288" y="360" width="112" height="464" rx="56" opacity=".7"/>
+    <rect x="456" y="440" width="112" height="384" rx="56" opacity=".55"/>
+    <rect x="624" y="280" width="112" height="544" rx="56" opacity=".85"/>
+    <rect x="792" y="600" width="112" height="224" rx="56" opacity=".5"/>
+  </g>
+  <g id="needle"><rect x="728" y="160" width="72" height="704" rx="36" fill="#f7931e"/></g>
+</svg>