diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 8ccf999..4e404a6 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -14,7 +14,9 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
     <header class="site-header">
       <div class="container">
         <p class="wordmark">
-          <NuxtLink to="/">{{ SITE_NAME }}</NuxtLink>
+          <NuxtLink to="/">
+            <img src="/logo.png" :alt="SITE_NAME" width="400" height="400">
+          </NuxtLink>
         </p>
         <p class="tagline kicker">{{ SITE_DESCRIPTION }}</p>
       </div>
@@ -36,7 +38,7 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
     <footer class="site-footer">
       <div class="container footer-inner">
         <div class="footer-block">
-          <p class="wordmark small">{{ SITE_NAME }}</p>
+          <img class="footer-logo" src="/logo.png" :alt="SITE_NAME" width="400" height="400">
           <p class="muted">{{ SITE_DESCRIPTION }}</p>
         </div>
 
@@ -82,16 +84,19 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
 
 .wordmark {
   margin: 0;
-  font-family: var(--font-display);
-  font-size: clamp(1.75rem, 5vw, 2.75rem);
-  letter-spacing: 0.02em;
-  color: var(--color-ink);
 }
 
 .wordmark a {
+  display: inline-block;
   text-decoration: none;
 }
 
+/* The seal carries the name itself, so it stands in for a text wordmark. */
+.wordmark img {
+  width: clamp(6rem, 14vw, 8.5rem);
+  height: auto;
+}
+
 .tagline {
   margin-top: 0.6rem;
 }
@@ -151,8 +156,10 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
   margin-bottom: 0;
 }
 
-.wordmark.small {
-  font-size: 1.4rem;
+.footer-logo {
+  width: 4.5rem;
+  height: auto;
+  margin-bottom: 1rem;
 }
 
 .footer-block ul {
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index 5f4747c..315aa64 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -25,6 +25,7 @@ useSeoMeta({
   ogDescription: SITE_DESCRIPTION,
   ogType: 'website',
   ogUrl: config.siteUrl,
+  ogImage: `${config.siteUrl}/logo.png`,
 })
 </script>
 
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 80c2d95..ae0f110 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -12,6 +12,10 @@ export default defineNuxtConfig({
       htmlAttrs: { lang: 'en' },
       titleTemplate: `%s · ${SITE_NAME}`,
       meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+      link: [
+        { rel: 'icon', href: '/favicon.ico', sizes: '48x48' },
+        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
+      ],
     },
   },
 
diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png
new file mode 100644
index 0000000..db72f37
Binary files /dev/null and b/frontend/public/apple-touch-icon.png differ
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
index 18993ad..5a4de42 100644
Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ
diff --git a/frontend/public/logo.png b/frontend/public/logo.png
new file mode 100644
index 0000000..21d2828
Binary files /dev/null and b/frontend/public/logo.png differ