✨ feat: Add support for light and dark mode favicons

carlosjorger · carlosjorger · commit ebf6e444c864 · 2025-07-18T18:02:39.000-04:00
diff --git a/public/favicon-dark.svg b/public/favicon-dark.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 974.7 638.2" style="enable-background:new 0 0 974.7 638.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#3A3839;stroke:#000000;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
+	.st2{fill:#40403F;stroke:#000000;stroke-miterlimit:10;}
+	.st3{fill:#A9D3EA;}
+	.st4{fill:#3A3839;}
+</style>
+<path class="st0" d="M0,123.1"/>
+<path class="st0" d="M9.3,638.2"/>
+<path class="st1" d="M30.1,185.5"/>
+<path class="st1" d="M262.5,617.5"/>
+<path class="st0" d="M227.4,580.3"/>
+<path class="st2" d="M275.5,465"/>
+<path class="st0" d="M974.7,145.8"/>
+<path class="st0" d="M294.8,0"/>
+<path class="st3" d="M904.8,139.1L899,94.5c-0.6-5.3-2.6-10.2-5.9-14.5c-13.8-18.2-17.6-15.4-40.5-26.8l-56.3-37.9
+	c-22.3-9-14.2,4.3-20.7-1.2C756.3-2.8,762.8,1,735.6,2.9C693.9,9,631.1,31,594,39l-85.9,20.9C493.7,63.2,492.9,71,491.7,71
+	c-1,0-3,25-6.1,27.5c-39.5,30.9-85.5,67.2-108,108.8c-10.7,19.9-34.4,72.5-34.4,72.5c-20.1,55.1-17.8,85.8-0.4,141.4l0.6,2l1.6,1.6
+	c25.3,25.4,65.4,38.5,76.4,71.5l28.2,1.6l18.2-5.9l6.1,30.7c0.8,9.8,5.9,18.8,14.4,24.6l109.2,72.9c16.8,11.1,36.5,17.2,56.9,17.2
+	h65.9c13.8,0,26.9-3.9,38.1-11.5l88.3-59.2c6.1-4.1,10.5-9.6,13-15.8l14.4-38.3l0.2-0.2c0.2,0.2,0.2,0.4,0.2,0.4l33.8-6.1
+	c-0.2,0,36.3-59.8,42.8-104.1c7.1-48.4-11.1-139.7-23.9-174.4 M351.2,408.4c-7.3,55.3-32.8-93-1-135
+	C350.4,273.1,360.6,338.7,351.2,408.4z M385.7,297.9c-48.8,12.7-22.1-45.9-22.1-45.9l54.3-27C420.1,223.8,434.3,285.4,385.7,297.9z
+	 M437,360.8l-7.7-145.5c8.1-2.3,12.8,4.3,15.2,16.2c0.6,2.7,1,5.5,1.2,8.6C450.5,280.9,437.6,358.2,437,360.8z M447.7,211.9
+	c-8.5,0.2-18.2,0.8-18.2,0.6l-53.9,32.8C389,207,423.8,173,466.4,143.7C457.8,165.6,451.7,188.5,447.7,211.9z M725.5,132.2
+	l-2.6,73.3c-4.5-0.4-18.4-5.1-29-7.2c-6.1-1.2-12.6,0.4-17.4,4.3l-15.2,11.7l22.3,21.7l-58-9.4c-8.3-1.2-16.8-0.2-24.3,3.3
+	l-32.6,14.8c-6.7,2.9-12.2,7.8-16.2,13.7c-7.5,11.9-19.5,31.1-18.8,34.4c0.2,0.8,0,0,34.4,3.1l44.4,31.1c8.5,5.9,19.7,8,29.8,4.9
+	c20.5-5.5,53.3-15,55.9-17c4.1-3.1,13.8-43.6,14.4-45.9c0.6-1.6,6.3-5.7,9.1-8c1-0.6,2.2-0.2,2.4,1l16.4,76.2c0.6,2.9,0.4,5.5-1,8.2
+	l-0.4,0.4c-4.7,10-13.8,17.8-24.7,20.9l-35.7,10.4c-2.2,0.6-4.1,2.3-4.5,4.7l-1.4,6.1c-0.6,2.7-0.2,5.3,1.4,7.6l0.2,0.2
+	c2.8,4.1,6.5,7.6,10.9,10.4l8.3,5.5l-29-9.8c-4.7-1.6-8.7-4.5-11.3-8.4l0,0c-3.6-5.3-4.5-11.9-2.2-17.8l3-8.2l-20.5,5.5
+	c-8.3,2.3-15.4,8-19.2,15.4l-4.9,8.8c-4.3,8.2-11.3,15-20.3,18.8L565.8,428c0,0-18.4,48.4-12.8,42.8c3.6-3.5,16.6-5.9,25.5-7.2
+	c5.1-0.8,10.1,1.2,13.2,5.1l8.9,11.7c4.5,5.7,6.1,12.9,4.5,20.1l-8.5,36.5l60-8c5.7-0.8,11.5,0,17,2c3.2,1.2,6.9,2.7,10.1,3.7
+	c6.7,2.3,12.2,6.6,16,11.9c4.1,5.7,8.1,11.7,8.1,11.7l-44.4,8.2c-7.9,1.6-15.4,4.9-21.9,9.8l-23.9,18.4l-49.4-27.2l-70.5-45.9
+	l-9.7-77l-6.9-54.1c-0.8-6.4-0.6-12.9,0.6-19.3l7.9-40.6l4.9-25.4c1.4-7.2,4.3-14.1,8.3-20.5l8.7-13.5c4.1-6.1,6.3-12.9,6.9-20.1
+	l3-39.1l0.4-9.8c0.8-16.8,10.5-32,25.9-40.2l52.7-27.9c13.4-7.2,28.2-11.7,43.6-13.1l36.1-5.9c13-2,26.1-1.8,38.9,0.8l34.4,3.7
+	 M723.9,451.6l11.1,6.1l-22.3,7.4l-15.2-5.1c-7.7-2.7-16-2.9-23.7-0.6l-26.3,7.4l-1.8-14.3c-1.4-11.1,1.6-22.1,8.1-30.9l6.5-8.6
+	l30.6,13.7v17.8 M835.5,383.6l-4.5,24.8l-23.3-20.3l-0.4-13.7c-0.2-4.3-0.8-8.4-2-12.5c-1.8-6.1-6.1-11.7-12.2-15.4l-2.8-1.8
+	l38.7,3.7c5.9,0.6,11.5,2.5,16.6,5.5c3.2,1.8,6.3,3.9,8.3,5.1l3.2,17.2L835.5,383.6z M928.9,309.2l-7.9-10l-2.8-3.7l4.1-20.1
+	l0.4-10.2c0.4,1.2,0.6,2.3,0.8,3.7c4.1,16.8,6.9,31.3,7.1,40.4L928.9,309.2L928.9,309.2z"/>
+<path class="st4" d="M237.7,540.6"/>
+<path class="st4" d="M233.4,227.3"/>
+<path class="st4" d="M323.3,434.3"/>
+<path class="st4" d="M973.6,363.2"/>
+</svg>
diff --git a/public/images/favicon-dark.png b/public/images/favicon-dark.png
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -41,7 +41,18 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 			name="twitter:image"
 			content="https://carlosjorger.github.io/images/purple-logo.png"
 		/>
-		<link rel="icon" type="image/svg+xml" href="/images/favicon.png" />
+		<link
+			rel="icon"
+			type="image/svg+xml"
+			href="/images/favicon.png"
+			media="(prefers-color-scheme: light)"
+		/>
+		<link
+			rel="icon"
+			type="image/svg+xml"
+			href="/images/favicon-dark.png"
+			media="(prefers-color-scheme: dark)"
+		/>
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
 			rel="preload"
