diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..0e8e80c
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 7f48a94..aede303 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
index 86ac076..180c466 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,4 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <rect width="100" height="100" rx="16" fill="#3d5a3e"/>
-  <text x="50" y="68" font-family="Georgia, serif" font-size="52" font-weight="bold" fill="#faf8f5" text-anchor="middle">S</text>
-</svg>
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3d5a3e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#2d4a2e;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="100" height="100" rx="18" fill="url(#bg)"/>
+  <text x="50" y="70" font-family="EB Garamond, Georgia, serif" font-size="56" font-weight="600" fill="#faf8f5" text-anchor="middle">S</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/hero-speaker-new-1200.webp b/public/images/hero-speaker-new-1200.webp
new file mode 100644
index 0000000..2c5ab10
Binary files /dev/null and b/public/images/hero-speaker-new-1200.webp differ
diff --git a/public/images/hero-speaker-new-1920.png b/public/images/hero-speaker-new-1920.png
new file mode 100644
index 0000000..5fbad69
Binary files /dev/null and b/public/images/hero-speaker-new-1920.png differ
diff --git a/public/images/hero-speaker-new-800.webp b/public/images/hero-speaker-new-800.webp
new file mode 100644
index 0000000..eb97797
Binary files /dev/null and b/public/images/hero-speaker-new-800.webp differ
diff --git a/public/images/hero-speaker-new.webp b/public/images/hero-speaker-new.webp
new file mode 100644
index 0000000..36259b4
Binary files /dev/null and b/public/images/hero-speaker-new.webp differ
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 6944e79..6e8d716 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -31,7 +31,8 @@ const currentPath = canonicalUrl || Astro.url.pathname;
   <head>
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="generator" content={Astro.generator} />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e02c1d8..b1830ea 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -10,7 +10,11 @@ import PillarCard from '../components/PillarCard.astro';
   <!-- Hero Section -->
   <section class="hero">
     <div class="hero-bg">
-      <img src="/images/hero-speaker-new.png" alt="Scott Scoble speaking on stage" class="hero-image" />
+      <picture>
+        <source type="image/webp" srcset="/images/hero-speaker-new-800.webp 800w, /images/hero-speaker-new-1200.webp 1200w, /images/hero-speaker-new.webp 1920w" sizes="100vw" />
+        <source type="image/png" srcset="/images/hero-speaker-new-1920.png 1920w" sizes="100vw" />
+        <img src="/images/hero-speaker-new.webp" alt="Scott Scoble speaking on stage" class="hero-image" width="1920" height="1072" loading="eager" decoding="async" />
+      </picture>
       <div class="hero-overlay"></div>
     </div>
     <div class="hero-content">