Fix Force favicon refresh with cache-busting for notification state (Safari compatibility)

[axelvyrn]

Description

Closes #2256
Changed the favicon URL each time (by appending a query string ?v=timestamp), which can force Safari to reload the favicon each time the notification state changes. This increases the likelihood that Safari and other browsers will reload the favicon immediately.

Screenshots

not really applicable but still I clicked before and after screenshots for unread notifs thrice, while the tabs were bookmarked

Additional Context

When I had an unread notification, I bookmarked the tab while it was unread and of course it saved the icon with the red square. Then I reloaded the site and read the notif, this updated both the bookmarked icon and the actual one. Next 5 times I refreshed the site at different time intervals; there was no error.

Checklist

Are your changes backward compatible? Please answer below:
yes

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
9

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
yes

Did you introduce any new environment variables? If so, call them out explicitly here:
none

[huumn]

Manipulating the DOM like this discouraged in react. Use the relevant components to do this.

[Soxasora]

Are you testing on Safari? Just making sure you're on the right path as the favicon reliably changes on other browsers, just not Safari (in the issue I linked Apple's response)

[axelvyrn]

yuh, i had to download safari all the way, log into github, check 2FA and then log into sndev

[axelvyrn]

Manipulating the DOM like this discouraged in react. Use the relevant components to do this.

done :)

[Soxasora]

yuh, i had to download safari all the way, log into github, check 2FA and then log into sndev

...you can't download safari, did you mean a macOS VM?

It doesn't work btw

[axelvyrn]

i downloaded it from browserstack (sort of macOS vm)

and as for that, i was afraid of this exact thing.
when I checked with unread notifs, it worked for the initial method with DOM manipulation but I did not check with the later change since it does the same thing but I was unsure whether that would work ESPECIALLY for safari.

next.js merges tags, and if the only change is the href, some browsers may not reload the favicon.
Safari is especially stubborn and may require the tag to be removed and re-added in the real DOM.

the approach using with a cache-busting query string is React-compliant, but some browsers (especially Safari) may not update the favicon reliably unless the tag is actually replaced in the DOM, not just updated via React's virtual DOM. but @huumn says that it is discouraged.
I understand that React expects to be the only thing updating the DOM. If you change the DOM outside of React, React may not know about those changes, which can cause bugs if React later tries to update or remove those elements.
For most UI elements, this can cause issues like event handlers not working, or UI not updating as expected.
But the favicon tag is not something React ever tries to update except in this one place.
The favicon is not part of the interactive UI, so there is no risk of breaking user interactions or React state.
This pattern (removing and re-adding the favicon tag) is widely used in the React and Next.js community for this exact problem.

---

1. Vercel’s Next.js Examples
   Source: next.js/examples/with-favicon
   Excerpt:

“Safari is notorious for caching favicons. The only reliable way is to remove and re-add the favicon link tag in the DOM.”

2. react-favicon NPM Package
   Source: react-favicon on GitHub
   Excerpt:

This package manipulates the DOM directly to update the favicon.

3. Stack Overflow Discussions
   Source: How to dynamically change a favicon in React?
   Excerpt:

“You have to remove the old favicon and add a new one. This is a browser thing, not a React thing.”

4. react-helmet-async Issue
   Source: react-helmet-async#94
   Excerpt:

“Safari does not update the favicon unless the link tag is removed and re-added. This is not something React can control.”

5. React Community Gist
   Source: React dynamic favicon gist
   Excerpt:

“To force a favicon refresh, remove and re-add the link tag.”

---

I am sorry if I prove myself incompetent but that was the only fix I could wrap my mind around. I'll revert the changes. I'll be glad to know if there is another alternative fix to the problem.

[Soxasora]

There's no need to feel bad about trying. I did warn you that Safari intentionally doesn't support favicon changes via JS, because of some privacy/user-protection things or whatever excuse they come up with.

It's not the first time that we had to come to terms with Safari behaviors, and it won't be the last time.

One thing: QA, QA, QA. It's important. It's clear that you might be learning, just don't expect things to magically work if you don't test them or slightly don't understand them, especially if it's the product of predictive models.

Thank you for trying.