From 7a6c064040eefc07794785d4c673542f34c02e41 Mon Sep 17 00:00:00 2001 From: Devon Neill <35456245+devneill@users.noreply.github.com> Date: Mon, 26 Aug 2024 20:13:52 +0200 Subject: [PATCH] Add fingerprinting to favicons to bust browser caching (#823) --- .../assets}/favicons/apple-touch-icon.png | Bin {public => app/assets}/favicons/favicon.svg | 0 app/root.tsx | 13 +++++++------ public/favicons/README.md | 7 ++++--- public/favicons/favicon-16x16.png | Bin 669 -> 0 bytes public/favicons/favicon-32x32.png | Bin 1435 -> 0 bytes public/favicons/mask-icon.svg | 1 - vite.config.ts | 6 +++++- 8 files changed, 16 insertions(+), 11 deletions(-) rename {public => app/assets}/favicons/apple-touch-icon.png (100%) rename {public => app/assets}/favicons/favicon.svg (100%) delete mode 100644 public/favicons/favicon-16x16.png delete mode 100644 public/favicons/favicon-32x32.png delete mode 100644 public/favicons/mask-icon.svg diff --git a/public/favicons/apple-touch-icon.png b/app/assets/favicons/apple-touch-icon.png similarity index 100% rename from public/favicons/apple-touch-icon.png rename to app/assets/favicons/apple-touch-icon.png diff --git a/public/favicons/favicon.svg b/app/assets/favicons/favicon.svg similarity index 100% rename from public/favicons/favicon.svg rename to app/assets/favicons/favicon.svg diff --git a/app/root.tsx b/app/root.tsx index 108806968..f21f11216 100644 --- a/app/root.tsx +++ b/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) } diff --git a/public/favicons/README.md b/public/favicons/README.md index 94870db08..ee77416b6 100644 --- a/public/favicons/README.md +++ b/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. diff --git a/public/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png deleted file mode 100644 index c61907752ef08dbc305585c937cc3e1e139eac73..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 669 zcmV;O0%HA%P)Px%S4l)cR5(vvlg&?4K@`P*qmLckfzXY#EY!p(2=0un#uysHMon6Qoe0nP(JDyj ze?S*}1R6}M)|H@bA}i4vHW*w=C}D#vXsZk9|4NNUq~Wp z93enT1Yo}EI1kKE&z(fHG>7Ftq@SPLThwYbG@5?s7CQhQ;Py5@y;pkpT>PQ{LehW6 zPd1$)znUlisX)D6=R_afy2-ML-ivboZj8~m&0*~j(c%kBMR_3K@K zCBxid(|x&{iKhty9YHehvMlF6Ak>hq23C_rZYf8wBcSVw>t9LDq(BIgFQ@3c72yPx)RY^oaR9HuqSKUusMHK(t3%*d6(1fN`1*%e`ZCXK0Lto%Q4N##8HZDp(l&|Gm zT*PSqf|8W7p)3Mhw$&D^Kw4Bv3&nS^7DP?a+8REZwCD@y3Qz2gnVEa<&fI%fpqa?-W5GV>j00jV12-rve^JOSR0RiFr^gol+WFYVH!`4qfYbeovD9ix; zlWvHlDw=llo}iFAX53_$1H*vAf;VtyW*W1~71S5E~mC;hPl#?tsNC)71*imytqoGd4CBB}bhod9wtr z_p3EWsR52$0>Td+bC#l}yc!Ej3pnfbVD{&qw5*G&{!gB`Y{r2MG&i`hJ8d_5{Jpp` zc*TgZgaK-$|IZuM#DYvrN_QdU|t*k-bYk5!<1@nvZ zsHm&dqRWj_cEsms{`12b`wyVw%sHAJRt0|t0yuxshmo;Sgo44y5EtMOqpBz@D1xi3 z3J!;ZLk9#+ElrsHg+?`udbtX;^;0dUQ1E&l2Z@%1x!>mC>1@Zn2lpif0<_us^XYrg z+~~&M7xrpl=HfRe#&EjrwCn(dOj3NVSRYIvF)6M?;GaMM$16`_b=90oW6T4|}i z{oXqWg+gp!RTX^o*_WV|WcQuzXu~%*Mzo01WC%&HZA1W6MMam#i+wN3p`=Hrf1HN< zlV<5IPis4}GP5lA-~IJ2>OW{e2;5k6%B&a=WcECl4qvCw6jGqe*Ts5;_>~+jLA|R^ zTB9j*HM(&Bj|T#pWD^Vw2+dKlvZ1B{&f>QO+ycicPhjcc67xs@Qc_aU-*-vyQo-Qx z5WGEJ+q4*U5Ke*F1pYrRE)EyFFW~X=V@!TOg{dDVvG{PwR%u#FDzXnA!l8rN*p<8s zWwqs4Utj04w!NK%K^U#cs;UYS3K`&`#VJEc0F@R$^O;CtuIio0|3Br ztqetbQ&ZB=fBuqg7uy>AdI;X`P0P?U3k6Sp=P48he{ z#Trr6DzMGF(Tew3&Q8zH!2PjXTKBYikd^teMV7T%V({q ziC9qKfoC>Kq~*Q-UVLFk%lX5k2LsoJFmQDM8^H}Tc@eJO?15sn`-#|CI4utoAp(W@ zhjC|S2Fri(rp07)mMDr$v-U$Chuja1nWkD?1!HB>Xb5 pA&nx=w-|X_ \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 9b93fa2df..f257deb01 100644 --- a/vite.config.ts +++ b/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 } },