astrolicious/astro-tips.dev

Tips for favicon caching behavior

JusticeMatthew opened this issue · 1 comments

JusticeMatthew commented

favicons love to be cached which can cause them to not show up correctly a lot of time in the dev environment, it comes up fairly consistently in the discord

This can be worked around by appending the favicon with some info specifically related to the caching

- <link rel="icon" href="/favicon.ico"

+ <link rel="icon" href="/favicon.ico?"

or

+ <link rel="icon" href="/favicon.ico?v1"
BryceRussell commented

One downside to this is that users have to manually update the path every time the favicon is updated.

Another way of doing this is using an imported image, which includes cache busting hashes automatically:

---
import favicon from '../favicon.svg';
---

<link rel="icon" type="image/svg+xml" href={favicon.svg} />

Although this does not work while in dev mode, the hash is only applied when building. To get this working in dev, you can use a hack like this:

---
import favicon from '../favicon.svg'

const faviconSrc = import.meta.env.DEV
	// Prevent caching in dev with a Unix time stamp
	? `${favicon.src}?${(new Date()).valueOf()}`
	// Prevent caching in production with the default cache busting hashes
	: favicon.src
---

<link rel="icon" type="image/svg+xml" href={faviconSrc} />

One issue with this hack is that the favicon will never be cached in dev mode, even if it hasn't changed, because the Unix time stamp will always return a unique path. But, this shouldn't be a problem because it only happens in dev mode.

  • 👍3