Use the CorralitoComing seal as the site logo and favicon

The seal already carries the name, so it replaces the text wordmark in the
header and opens the footer. Small icon sizes use the central emblem only: the
circular lettering is unreadable below 48px.

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 {

frontend/app/pages/index.vue

@@ -25,6 +25,7 @@ useSeoMeta({
   ogDescription: SITE_DESCRIPTION,
   ogType: 'website',
   ogUrl: config.siteUrl,
+  ogImage: `${config.siteUrl}/logo.png`,
 })
 </script>
 

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' },
+      ],
     },
   },