itsjling · itsjling · Sep 5, 2026 · Sep 5, 2026 · Sep 5, 2026
diff --git a/app/globals.css b/app/globals.css
@@ -135,24 +135,11 @@ a {
 }
 
 .brand-mark {
-  border: 1px solid var(--ink);
-  display: grid;
-  flex: 0 0 38px;
-  font: 700 10px/1 var(--font-geist-mono), monospace;
-  grid-template-columns: 1fr 1fr;
-  height: 38px;
-  letter-spacing: -0.06em;
-}
-
-.brand-mark span {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-
-.brand-mark span:first-child {
-  background: var(--ink);
-  color: var(--paper);
+  display: block;
+  flex: 0 0 52px;
+  height: 52px;
+  width: 52px;
+  object-fit: contain;
 }
 
 .brand-name,

diff --git a/app/page.tsx b/app/page.tsx
@@ -470,10 +470,7 @@ function fileNavigationStep(event: KeyboardEvent) {
 function BrandBlock() {
   return (
     <div className="brand-block">
-      <div className="brand-mark" aria-hidden="true">
-        <span>D</span>
-        <span>S</span>
-      </div>
+      <img className="brand-mark" src="./logo-256.png" width="52" height="52" alt="" />
       <div>
         <p className="brand-name">Diffsplain</p>
         <p className="brand-tag">Agent-made change notes</p>

diff --git a/index.html b/index.html
@@ -8,7 +8,9 @@
       content="Clear code diffs with concise notes from your coding agent."
     />
     <meta name="theme-color" content="#e9e2d5" />
-    <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="./favicon-32.png" type="image/png" sizes="32x32" />
+    <link rel="icon" href="./favicon-16.png" type="image/png" sizes="16x16" />
+    <link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180" />
     <title>Diffsplain</title>
   </head>
   <body>

diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16.png b/public/favicon-16.png
diff --git a/public/favicon-32.png b/public/favicon-32.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/logo-256.png b/public/logo-256.png
diff --git a/public/logo.png b/public/logo.png
diff --git a/site/apple-touch-icon.png b/site/apple-touch-icon.png
diff --git a/site/favicon-16.png b/site/favicon-16.png
diff --git a/site/favicon-32.png b/site/favicon-32.png
diff --git a/site/index.html b/site/index.html
@@ -15,6 +15,9 @@
       content="Diffsplain is an open-source developer tool for reviewing GitHub pull requests one file at a time."
     />
     <meta name="theme-color" content="#e9e2d5" />
+    <link rel="icon" href="./favicon-32.png" type="image/png" sizes="32x32" />
+    <link rel="icon" href="./favicon-16.png" type="image/png" sizes="16x16" />
+    <link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Diffsplain" />
     <meta
@@ -100,9 +103,7 @@
 
     <header class="masthead">
       <a class="wordmark" href="#top" aria-label="Diffsplain home">
-        <span class="wordmark__mark" aria-hidden="true">
-          <span>D</span><span>S</span>
-        </span>
+        <img class="wordmark__mark" src="./logo-256.png" width="48" height="48" alt="" />
         <span class="wordmark__text">Diffsplain</span>
       </a>
 

diff --git a/site/logo-256.png b/site/logo-256.png
diff --git a/site/styles.css b/site/styles.css
@@ -115,24 +115,10 @@ code {
 }
 
 .wordmark__mark {
-  border: 1px solid var(--ink);
-  display: grid;
-  font: 650 10px/1 "Geist Mono", monospace;
-  grid-template-columns: 1fr 1fr;
-  height: 34px;
-  letter-spacing: -0.04em;
-  width: 34px;
-}
-
-.wordmark__mark span {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-
-.wordmark__mark span:first-child {
-  background: var(--ink);
-  color: var(--paper);
+  display: block;
+  height: 48px;
+  width: 48px;
+  object-fit: contain;
 }
 
 .wordmark__text {