Add fingerprinting to favicons to bust browser caching (#823)

app/root.tsx

@@ -20,6 +20,8 @@ import {
 import { withSentry } from '@sentry/remix'
 import { useRef } from 'react'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
+import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'
+import faviconAssetUrl from './assets/favicons/favicon.svg'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
 import { EpicProgress } from './components/progress-bar.tsx'
 import { SearchBar } from './components/search-bar.tsx'
@@ -52,19 +54,18 @@ export const links: LinksFunction = () => {
 	return [
 		// Preload svg sprite as a resource to avoid render blocking
 		{ rel: 'preload', href: iconsHref, as: 'image' },
-		{ rel: 'mask-icon', href: '/favicons/mask-icon.svg' },
 		{
-			rel: 'alternate icon',
-			type: 'image/png',
-			href: '/favicons/favicon-32x32.png',
+			rel: 'icon',
+			href: '/favicon.ico',
+			sizes: '48x48',
 		},
-		{ rel: 'apple-touch-icon', href: '/favicons/apple-touch-icon.png' },
+		{ rel: 'icon', type: 'image/svg+xml', href: faviconAssetUrl },
+		{ rel: 'apple-touch-icon', href: appleTouchIconAssetUrl },
 		{
 			rel: 'manifest',
 			href: '/site.webmanifest',
 			crossOrigin: 'use-credentials',
 		} as const, // necessary to make typescript happy
-		{ rel: 'icon', type: 'image/svg+xml', href: '/favicons/favicon.svg' },
 		{ rel: 'stylesheet', href: tailwindStyleSheetUrl },
 	].filter(Boolean)
 }

public/favicons/README.md

@@ -1,9 +1,10 @@
 # Favicon
 
-This directory has a few versions of icons to account for different devices. In
-some cases, we cannot reliably detect light/dark mode preference. Hence some of
-the icons in here should not have a transparent background. These icons are
+This directory has the icons used for android devices. In
+some cases, we cannot reliably detect light/dark mode preference. Hence these icons should not have a transparent background. These icons are
 referenced in the `site.webmanifest` file.
 
+The icons used by modern browsers and Apple devices are in `app/assets/favicons` as they can be imported with a fingerprint to bust the browser cache.
+
 Note, there's also a `favicon.ico` in the root of `/public` which some older
 browsers will request automatically. This is a fallback for those browsers.

vite.config.ts

@@ -16,7 +16,11 @@ export default defineConfig({
 		},
 
 		assetsInlineLimit: (source: string) => {
-			if (source.endsWith('sprite.svg')) {
+			if (
+				source.endsWith('sprite.svg') ||
+				source.endsWith('favicon.svg') ||
+				source.endsWith('apple-touch-icon.png')
+			) {
 				return false
 			}
 		},