diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
new file mode 100644
index 0000000000..e2c0272cf4
Binary files /dev/null and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
new file mode 100644
index 0000000000..32d6983dfd
Binary files /dev/null and b/public/android-chrome-512x512.png differ
diff --git a/public/android-chrome-mask.png b/public/android-chrome-mask.png
new file mode 100644
index 0000000000..27079058c1
Binary files /dev/null and b/public/android-chrome-mask.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000000..6a517fee16
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-hidden.ico b/public/favicon-hidden.ico
new file mode 100644
index 0000000000..07c91a02a1
Binary files /dev/null and b/public/favicon-hidden.ico differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000..9d1b826cc6
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000000..845631cb2f
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/src/components/Favicon.astro b/src/components/Favicon.astro
index db43d5dcd0..a011fe9e54 100644
--- a/src/components/Favicon.astro
+++ b/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>