diff --git a/web/src/lib/assets/apple/apple-icon-180.png b/web/src/lib/assets/favicon/apple-icon-180.png
similarity index 100%
rename from web/src/lib/assets/apple/apple-icon-180.png
rename to web/src/lib/assets/favicon/apple-icon-180.png
diff --git a/web/src/lib/assets/favicon/favicon-16.png b/web/src/lib/assets/favicon/favicon-16.png
new file mode 100644
index 0000000000..4233a3c097
Binary files /dev/null and b/web/src/lib/assets/favicon/favicon-16.png differ
diff --git a/web/src/lib/assets/favicon/favicon-32.png b/web/src/lib/assets/favicon/favicon-32.png
new file mode 100644
index 0000000000..20f8d345fa
Binary files /dev/null and b/web/src/lib/assets/favicon/favicon-32.png differ
diff --git a/web/src/lib/assets/favicon/favicon-96.png b/web/src/lib/assets/favicon/favicon-96.png
new file mode 100644
index 0000000000..8095377f39
Binary files /dev/null and b/web/src/lib/assets/favicon/favicon-96.png differ
diff --git a/web/src/lib/assets/favicon.png b/web/src/lib/assets/favicon/favicon.png
similarity index 100%
rename from web/src/lib/assets/favicon.png
rename to web/src/lib/assets/favicon/favicon.png
diff --git a/web/src/lib/components/shared-components/apple-header.svelte b/web/src/lib/components/shared-components/apple-header.svelte
index 182b6a48aa..11079a9892 100644
--- a/web/src/lib/components/shared-components/apple-header.svelte
+++ b/web/src/lib/components/shared-components/apple-header.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import appleIcon180 from '$lib/assets/apple/apple-icon-180.png';
 	import appleSplash20482732 from '$lib/assets/apple/apple-splash-2048-2732.png';
 	import appleSplash27322048 from '$lib/assets/apple/apple-splash-2732-2048.png';
 	import appleSplash16682388 from '$lib/assets/apple/apple-splash-1668-2388.png';
@@ -32,7 +31,6 @@
 	import appleSplash1136640 from '$lib/assets/apple/apple-splash-1136-640.png';
 </script>
 
-<link rel="apple-touch-icon" href={appleIcon180} />
 <link
 	rel="apple-touch-startup-image"
 	href={appleSplash20482732}
diff --git a/web/src/lib/components/shared-components/favicon-header.svelte b/web/src/lib/components/shared-components/favicon-header.svelte
new file mode 100644
index 0000000000..9555a04b23
--- /dev/null
+++ b/web/src/lib/components/shared-components/favicon-header.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import IconAppleTouch180 from '$lib/assets/favicon/apple-icon-180.png';
+	import Icon16 from '$lib/assets/favicon/favicon-16.png';
+	import Icon32 from '$lib/assets/favicon/favicon-32.png';
+	import Icon96 from '$lib/assets/favicon/favicon-96.png';
+</script>
+
+<link rel="icon" type="image/png" sizes="16x16" href={Icon16} />
+<link rel="icon" type="image/png" sizes="32x32" href={Icon32} />
+<link rel="icon" type="image/png" sizes="96x96" href={Icon96} />
+<link rel="apple-touch-icon" sizes="180x180" href={IconAppleTouch180} />
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 69c8a96b60..ea56316587 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -8,12 +8,12 @@
 	import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
 	import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
 	import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
-	import faviconUrl from '$lib/assets/favicon.png';
 	import type { LayoutData } from './$types';
 	import { fileUploadHandler } from '$lib/utils/file-uploader';
 	import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
 	import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
 	import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
+	import FaviconHeader from '$lib/components/shared-components/favicon-header.svelte';
 
 	let showNavigationLoadingBar = false;
 	export let data: LayoutData;
@@ -42,9 +42,9 @@
 
 <svelte:head>
 	<title>{$page.data.meta?.title || 'Web'} - Immich</title>
-	<link rel="icon" href={faviconUrl} />
 	<link rel="manifest" href="/manifest.json" />
 	<meta name="theme-color" content="currentColor" />
+	<FaviconHeader />
 	<AppleHeader />
 
 	{#if $page.data.meta}