favicon

conf/httpd.conf

@@ -295,7 +295,7 @@ DocumentRoot "/usr/local/apache2/htdocs"
     # Custom
     #
     Header add Link "</static/catppuccin.css>; rel=stylesheet; type=text/css"
-    Header add Link "</favicon.ico>; rel=icon; type=image/x-icon"
+    Header add Link "</static/favicon.svg>; rel=icon; type=image/svg+xml"
 
     AddOutputFilter INCLUDES .html
 </Directory>
@@ -446,6 +446,7 @@ LogLevel warn
     # If the AddEncoding directives above are commented-out, then you
     # probably should define those extensions to indicate media types:
     #
+    AddType image/svg+xml .svg
     AddType application/x-compress .Z
     AddType application/x-gzip .gz .tgz
 

htdocs/common/header.html

@@ -14,7 +14,8 @@
         <meta name="twitter:title" content="eom.dev — Build your own corner of the internet">
         <meta name="twitter:description" content="Practical self-hosting, creative coding, and community experiments from Eric Meehan's home lab.">
         <link rel="canonical" href="https://www.eom.dev/">
-        <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" sizes="any">
+        <link rel="alternate icon" href="/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="/static/pure.css">
         <link rel="stylesheet" href="/static/home.css">
         <title>eom.dev — Build your own corner of the internet</title>

htdocs/static/favicon.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <title>eom.dev</title>
+  <defs>
+    <radialGradient id="core" cx="34%" cy="28%" r="78%">
+      <stop offset="0" stop-color="#292940"/>
+      <stop offset="1" stop-color="#181825"/>
+    </radialGradient>
+  </defs>
+  <circle cx="32" cy="32" r="30" fill="url(#core)" stroke="#45475a" stroke-width="1.5"/>
+  <g fill="none" stroke-width="2.5" opacity=".9">
+    <ellipse cx="32" cy="32" rx="27" ry="13" stroke="#cba6f7" transform="rotate(-28 32 32)"/>
+    <ellipse cx="32" cy="32" rx="27" ry="13" stroke="#89b4fa" transform="rotate(32 32 32)"/>
+    <ellipse cx="32" cy="32" rx="20" ry="10" stroke="#a6e3a1" transform="rotate(72 32 32)"/>
+  </g>
+  <circle cx="32" cy="32" r="12" fill="#1e1e2e" stroke="#585b70" stroke-width="1"/>
+  <text x="32" y="31" fill="#cdd6f4" font-family="system-ui, sans-serif" font-size="10" font-weight="800" letter-spacing="-1" text-anchor="middle">eom</text>
+  <text x="32" y="39" fill="#cba6f7" font-family="system-ui, sans-serif" font-size="5.5" font-weight="700" letter-spacing=".2" text-anchor="middle">.dev</text>
+</svg>