fix(web): use correct favicon sizes (#2446)

* fix(web): use correct favicon sizes

Signed-off-by: martin <martin.labat92@gmail.com>

* fix: format

Signed-off-by: martin <martin.labat92@gmail.com>

---------

Signed-off-by: martin <martin.labat92@gmail.com>

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}

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} />

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}