diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a805749..98600e3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -102,7 +102,8 @@ function QuickStart() {
 ferrus register --supervisor claude-code --executor codex    # write agent configs
 ferrus                                                       # enter HQ`}</CodeBlock>
         <p className={styles.sectionLead}>
-          Inside HQ, type <code>/task</code>. A supervisor spawns, you describe
+          Inside HQ, type <code>/spec</code> to draft a written spec first,
+          or <code>/task</code> to go straight in. A supervisor spawns, you describe
           what you want, and the Executor → Reviewer loop runs automatically
           until the task is <strong style={{color: 'var(--ferrus-green)'}}>Complete</strong>.
         </p>
diff --git a/static/img/favicon.svg b/static/img/favicon.svg
index b2f13c9..fd0d90b 100644
--- a/static/img/favicon.svg
+++ b/static/img/favicon.svg
@@ -1,10 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="64" height="64" rx="8" fill="#060708"/>
-  <g fill="#ff7a1a">
-    <!-- block-style F -->
-    <rect x="14" y="12" width="36" height="8"/>
-    <rect x="14" y="12" width="8"  height="40"/>
-    <rect x="22" y="28" width="22" height="8"/>
+  <defs>
+    <linearGradient id="node" gradientUnits="userSpaceOnUse" x1="16" y1="11" x2="48" y2="53">
+      <stop offset="0" stop-color="#e8861f"/>
+      <stop offset="1" stop-color="#c4691e"/>
+    </linearGradient>
+    <linearGradient id="edge" gradientUnits="userSpaceOnUse" x1="16" y1="11" x2="48" y2="53">
+      <stop offset="0" stop-color="#a85416"/>
+      <stop offset="1" stop-color="#93481a"/>
+    </linearGradient>
+  </defs>
+
+  <rect width="64" height="64" rx="11" fill="#231f1e"/>
+
+  <!-- an F drawn as a graph: three nodes on the spine, two branching right -->
+  <g fill="url(#edge)">
+    <rect x="23" y="14.5" width="19.7" height="2"/>
+    <rect x="20" y="17.5" width="2" height="12.25"/>
+    <rect x="23" y="30.5" width="15.25" height="2"/>
+    <rect x="20" y="33.25" width="2" height="14.25"/>
+  </g>
+
+  <g fill="none" stroke="url(#node)">
+    <circle cx="21" cy="15.5" r="3.175" stroke-width="2.85"/>
+    <circle cx="44.2" cy="15.5" r="2.35" stroke-width="2.1"/>
+    <circle cx="21" cy="31.5" r="2.8" stroke-width="2.6"/>
+    <circle cx="39.7" cy="31.5" r="2.15" stroke-width="1.9"/>
+    <circle cx="21" cy="49.2" r="2.675" stroke-width="2.45"/>
   </g>
-  <rect x="14" y="12" width="36" height="2" fill="#ffa347" opacity="0.8"/>
 </svg>