Separate standalone leaf icon from text — favicon.svg + logo-icon.svg

css/style.css

@@ -168,6 +168,11 @@ img {
     font-size: 1.5rem;
 }
 
+.logo-icon-svg {
+    width: 36px;
+    height: 36px;
+}
+
 .logo-text .accent {
     color: var(--cyan-bright);
 }

img/favicon.svg

@@ -1,6 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
-  <rect width="32" height="32" rx="4" fill="#1e5128"/>
+  <!-- Background circle -->
-  <path d="M16,6 Q22,12 16,22 Q10,16 16,6Z" fill="#5cb85c"/>
+  <circle cx="16" cy="16" r="15" fill="#1e5128"/>
-  <line x1="16" y1="6" x2="16" y2="22" stroke="#1e5128" stroke-width="1.5"/>
+  
-  <text x="16" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="6" font-weight="bold" fill="white">LB</text>
+  <!-- Leaf icon -->
+  <path d="M16,5 
+           Q24,10 22,18 
+           Q20,24 16,26 
+           Q12,24 10,18 
+           Q8,10 16,5Z" 
+        fill="#4a9e4a"/>
+  
+  <!-- Leaf vein -->
+  <line x1="16" y1="5" x2="16" y2="26" stroke="#1e5128" stroke-width="1.5"/>
+  
+  <!-- Small accent lines -->
+  <line x1="16" y1="12" x2="12" y2="16" stroke="#1e5128" stroke-width="1" opacity="0.6"/>
+  <line x1="16" y1="12" x2="20" y2="16" stroke="#1e5128" stroke-width="1" opacity="0.6"/>
 </svg>

img/logo-icon.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <!-- Background circle -->
+  <circle cx="50" cy="50" r="48" fill="#1e5128"/>
+  
+  <!-- Main leaf -->
+  <path d="M50,12 
+           Q75,28 72,52 
+           Q68,72 50,86 
+           Q32,72 28,52 
+           Q25,28 50,12Z" 
+        fill="#4a9e4a"/>
+  
+  <!-- Leaf vein (center) -->
+  <line x1="50" y1="12" x2="50" y2="86" stroke="#1e5128" stroke-width="2.5"/>
+  
+  <!-- Side veins -->
+  <line x1="50" y1="30" x2="38" y2="40" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
+  <line x1="50" y1="30" x2="62" y2="40" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
+  <line x1="50" y1="48" x2="38" y2="56" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
+  <line x1="50" y1="48" x2="62" y2="56" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
+  <line x1="50" y1="66" x2="40" y2="72" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
+  <line x1="50" y1="66" x2="60" y2="72" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
+</svg>

index.html

@@ -27,9 +27,8 @@
     <meta name="twitter:image" content="https://loperboys.com/img/og-banner.png">
 
     <!-- Favicon -->
-    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon.png">
+    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
-    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon.png">
+    <link rel="apple-touch-icon" href="img/favicon.svg">
-    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
 
     <!-- Structured Data (LocalBusiness) -->
     <script type="application/ld+json">
@@ -63,7 +62,7 @@
     <nav class="navbar" id="navbar">
         <div class="nav-container">
             <a href="#" class="logo">
-                <span class="logo-icon">🌱</span>
+                <img src="img/logo-icon.svg" alt="LoperBoys" class="logo-icon-svg">
                 <span class="logo-text">Loper<span class="accent">Boys</span></span>
             </a>
             <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">