Add favicons for macOS Safari; add icons for iOS and Android home screens

public/site.webmanifest

@@ -0,0 +1,25 @@
+{
+  "name": "astro.build",
+  "short_name": "Astro",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-mask.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#0d0f14",
+  "display": "standalone"
+}

src/components/Favicon.astro

@@ -1,9 +1,29 @@
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" href="/favicon.ico" sizes="48x48" />
+<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
+<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+<link rel="manifest" href="/site.webmanifest" />
 
+{/* Only run favicon change script on browsers that support SVG favicons */}
 <script>
-	const favicon = document.querySelector('link[rel="icon"]')!;
+	function isSafariOnMacOS() {
+		const userAgent = navigator.userAgent;
+		return (
+			userAgent.includes('Safari') &&
+			userAgent.includes('Macintosh') &&
+			!userAgent.includes('Chrome')
+		);
+	}
+
 	document.addEventListener('visibilitychange', () => {
+		const safari = isSafariOnMacOS();
 		const hidden = document.hidden;
-		favicon.setAttribute('href', `/favicon${hidden ? '-hidden' : ''}.svg`);
+
+		if (safari) {
+			const favicon = document.querySelector('link[rel="icon"][sizes="48x48"]')!;
+			favicon.setAttribute('href', `/favicon${hidden ? '-hidden' : ''}.ico`);
+		} else {
+			const favicon = document.querySelector('link[rel="icon"][type="image/svg+xml"]')!;
+			favicon.setAttribute('href', `/favicon${hidden ? '-hidden' : ''}.svg`);
+		}
 	});
 </script>