diff --git a/assets/style/_components.scss b/assets/style/_components.scss
index 102202c..fd72758 100644
--- a/assets/style/_components.scss
+++ b/assets/style/_components.scss
@@ -149,7 +149,7 @@ a.card:hover {
 	display: grid; place-items: center;
 	border-radius: var(--radius-sm);
 	background: var(--color-primary-100);
-	color: var(--color-primary-600);
+	color: var(--color-icon-brand);
 	margin-bottom: 0.4rem;
 }
 .card-icon svg { width: 1.15rem; height: 1.15rem; }
diff --git a/assets/style/_layout.scss b/assets/style/_layout.scss
index ce1a4d8..bb708df 100644
--- a/assets/style/_layout.scss
+++ b/assets/style/_layout.scss
@@ -26,16 +26,12 @@
 	color: var(--color-content-inv);
 	letter-spacing: -0.01em;
 }
-.navbar-brand .mark {
-	width: 1.6rem;
-	height: 1.6rem;
-	display: grid;
-	place-items: center;
-	border-radius: var(--radius-sm);
-	background: linear-gradient(150deg, var(--color-primary-500), var(--color-primary-700));
-	box-shadow: 0 0 0 1px hsla(335, 80%, 53%, 0.35), 0 4px 14px -4px hsla(335, 80%, 53%, 0.7);
+.navbar-brand picture { display: inline-flex; }
+.navbar-brand .brand-logo {
+	width: 1.75rem;
+	height: 1.75rem;
+	display: block;
 }
-.navbar-brand .mark svg { width: 1rem; height: 1rem; color: #fff; }
 .navbar-brand .tag {
 	font-family: var(--font-family-mono);
 	font-size: var(--font-size-100);
diff --git a/assets/style/_theme.scss b/assets/style/_theme.scss
index a7fda78..6989ef2 100644
--- a/assets/style/_theme.scss
+++ b/assets/style/_theme.scss
@@ -14,6 +14,11 @@
 	--color-primary-800: hsl(335, 72%, 31%);
 	--color-primary-900: hsl(335, 72%, 25%);
 
+	/* Brand-tinted icon glyph (card tiles). Points at primary-600 on Paper; dark
+	 * mode re-points it to the console's signal magenta (hsl 336 86% 60%) so the
+	 * icons read the same as the console rather than the brighter primary-600. */
+	--color-icon-brand: var(--color-primary-600);
+
 	/* Secondary — console accent cyan */
 	--color-secondary-300: hsl(190, 80%, 80%);
 	--color-secondary-400: hsl(189, 86%, 50%);
@@ -122,6 +127,9 @@ html.dark {
 	--color-primary-600: hsl(335, 85%, 72%);
 	--color-primary-700: hsl(335, 80%, 78%);
 
+	/* Match the console's dark signal magenta for brand-tinted icon glyphs. */
+	--color-icon-brand: hsl(336, 86%, 60%);
+
 	/* Shadow on Ink reads more as a glow than a drop. */
 	--color-shadow: 230 60% 2%;
 	--shadow-panel: 0 1px 2px hsl(var(--color-shadow) / 0.4), 0 8px 24px -12px hsl(var(--color-shadow) / 0.6);
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6b84265..dfad32e 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,7 +7,8 @@
 	{{- if .IsHome }}<title>{{ .Site.Title }} — Deploy and run containers</title>
 	{{- else }}<title>{{ $title }} · {{ .Site.Title }}</title>{{ end }}
 	<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
-	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+	<link rel="icon" type="image/webp" href="/favicon.webp">
+	<link rel="icon" type="image/png" href="/favicon.png">
 	<script>
 		// Apply the persisted (or system-preferred) theme before first paint so
 		// the page never flashes the wrong colors. The "theme-ready" class is
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 38d9acb..87663f5 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -3,7 +3,10 @@
 	<label class="navbar-burger" for="nav-toggle" aria-label="Toggle navigation">{{ partial "icon" "menu" }}</label>
 	{{- end }}
 	<a class="navbar-brand" href="/">
-		<span class="mark">{{ partial "icon" "rocket" }}</span>
+		<picture>
+			<source srcset="/img/logo.webp" type="image/webp">
+			<img class="brand-logo" src="/img/logo.png" width="26" height="26" alt="Deploys.app" decoding="async">
+		</picture>
 		Deploys.app
 		<span class="tag">Docs</span>
 	</a>
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..914cef6
Binary files /dev/null and b/static/favicon.png differ
diff --git a/static/favicon.svg b/static/favicon.svg
deleted file mode 100644
index 3613f68..0000000
--- a/static/favicon.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-	<defs>
-		<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-			<stop offset="0" stop-color="hsl(335,85%,58%)"/>
-			<stop offset="1" stop-color="hsl(335,72%,34%)"/>
-		</linearGradient>
-	</defs>
-	<rect width="32" height="32" rx="8" fill="url(#g)"/>
-	<g fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-		<path d="M10 21c-1.2 1-1.6 4-1.6 4s3-.4 4-1.6c.57-.67.56-1.7-.07-2.33a1.74 1.74 0 0 0-2.33-.07z"/>
-		<path d="m16.5 18.5-3-3a17.6 17.6 0 0 1 1.6-3.16A10.3 10.3 0 0 1 23 8c0 2.18-.62 6-4.8 8.8a17.9 17.9 0 0 1-1.7 1.7z"/>
-	</g>
-</svg>
diff --git a/static/favicon.webp b/static/favicon.webp
new file mode 100644
index 0000000..23e9a2c
Binary files /dev/null and b/static/favicon.webp differ
diff --git a/static/img/logo.png b/static/img/logo.png
new file mode 100644
index 0000000..914cef6
Binary files /dev/null and b/static/img/logo.png differ
diff --git a/static/img/logo.webp b/static/img/logo.webp
new file mode 100644
index 0000000..23e9a2c
Binary files /dev/null and b/static/img/logo.webp differ