diff --git a/_includes/components/webmentions.njk b/_includes/components/webmentions.njk
index 013423f..f203321 100644
--- a/_includes/components/webmentions.njk
+++ b/_includes/components/webmentions.njk
@@ -35,7 +35,7 @@
          target="_blank"
          rel="noopener">
         <img
-          src="{{ like.author.photo or '/images/default-avatar.png' }}"
+          src="{{ like.author.photo or '/images/default-avatar.svg' }}"
           alt="{{ like.author.name }}"
           class="w-8 h-8 rounded-full"
           loading="lazy"
@@ -61,7 +61,7 @@
          target="_blank"
          rel="noopener">
         <img
-          src="{{ repost.author.photo or '/images/default-avatar.png' }}"
+          src="{{ repost.author.photo or '/images/default-avatar.svg' }}"
           alt="{{ repost.author.name }}"
           class="w-8 h-8 rounded-full"
           loading="lazy"
@@ -85,7 +85,7 @@
         <div class="flex gap-3">
           <a href="{{ reply.author.url }}" target="_blank" rel="noopener">
             <img
-              src="{{ reply.author.photo or '/images/default-avatar.png' }}"
+              src="{{ reply.author.photo or '/images/default-avatar.svg' }}"
               alt="{{ reply.author.name }}"
               class="w-10 h-10 rounded-full"
               loading="lazy"
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 9b1160c..ad34938 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -41,9 +41,14 @@
   <meta name="twitter:image" content="{% if contentImage.startsWith('http') %}{{ contentImage }}{% else %}{{ site.url }}/{{ contentImage }}{% endif %}">
   {% endif %}
 
+  {# Favicon #}
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+
   <link rel="stylesheet" href="/css/style.css?v={{ '/css/style.css' | hash }}">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.3.2/src/lite-yt-embed.min.css">
   <script src="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.3.2/src/lite-yt-embed.min.js" defer></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
   <style>[x-cloak] { display: none !important; }</style>
   <link rel="canonical" href="{{ site.url }}{{ page.url }}">
diff --git a/eleventy.config.js b/eleventy.config.js
index 18bdfd9..a6c5238 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -122,6 +122,7 @@ export default function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("css");
   eleventyConfig.addPassthroughCopy("images");
   eleventyConfig.addPassthroughCopy("js");
+  eleventyConfig.addPassthroughCopy("favicon.ico");
 
   // Watch for content changes
   eleventyConfig.addWatchTarget("./content/");
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..9274a8c
Binary files /dev/null and b/favicon.ico differ
diff --git a/images/favicon.svg b/images/favicon.svg
new file mode 100644
index 0000000..c15703d
--- /dev/null
+++ b/images/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <rect width="100" height="100" fill="#3b82f6"/>
+  <text x="50" y="70" font-family="Arial, sans-serif" font-size="60" font-weight="bold" text-anchor="middle" fill="white">i</text>
+</svg>
diff --git a/interactions.njk b/interactions.njk
index bcc2e1d..4abfc19 100644
--- a/interactions.njk
+++ b/interactions.njk
@@ -198,11 +198,11 @@ permalink: /interactions/
             {# Author avatar #}
             <a :href="wm.author?.url || '#'" target="_blank" rel="noopener" class="flex-shrink-0">
               <img
-                :src="wm.author?.photo || '/images/default-avatar.png'"
+                :src="wm.author?.photo || '/images/default-avatar.svg'"
                 :alt="wm.author?.name || 'Anonymous'"
                 class="w-10 h-10 rounded-full"
                 loading="lazy"
-                onerror="this.src='/images/default-avatar.png'"
+                onerror="this.src='/images/default-avatar.svg'"
               >
             </a>
 
diff --git a/js/webmentions.js b/js/webmentions.js
index b9ab360..5381dfe 100644
--- a/js/webmentions.js
+++ b/js/webmentions.js
@@ -100,7 +100,7 @@
       link.dataset.new = 'true';
 
       const img = document.createElement('img');
-      img.src = author.photo || '/images/default-avatar.png';
+      img.src = author.photo || '/images/default-avatar.svg';
       img.alt = author.name || 'Anonymous';
       img.className = 'w-8 h-8 rounded-full ring-2 ring-primary-500';
       img.loading = 'lazy';
@@ -148,7 +148,7 @@
       avatarLink.rel = 'noopener';
 
       const avatarImg = document.createElement('img');
-      avatarImg.src = author.photo || '/images/default-avatar.png';
+      avatarImg.src = author.photo || '/images/default-avatar.svg';
       avatarImg.alt = author.name || 'Anonymous';
       avatarImg.className = 'w-10 h-10 rounded-full';
       avatarImg.loading = 'lazy';