fix: favicon badge — remove favicon.ico, fix Firefox compat#66
Open
jabiinfante wants to merge 1 commit intoroot-fr:mainfrom
Open
fix: favicon badge — remove favicon.ico, fix Firefox compat#66jabiinfante wants to merge 1 commit intoroot-fr:mainfrom
jabiinfante wants to merge 1 commit intoroot-fr:mainfrom
Conversation
- Delete app/favicon.ico so Next.js renders a single <link rel="icon"> for icon.svg. With two icon links in the DOM, browsers disagreed on which to use: Chrome and Firefox on Linux both picked the *first* one, making the dynamically-appended badge link invisible. - Mutate href on the existing <link> instead of injecting a second one. Firefox only updates the tab icon when the href of the element it already tracks changes — adding new <link> nodes dynamically is ignored. - Simplify image loading: replace fetch → blob → FileReader → Image chain with new Image() + crossOrigin="anonymous". - Fix badge border in Safari 15 fallback: use strokeRect instead of stroke() after fillRect (fillRect does not add to the canvas path).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The favicon badge was broken in Firefox and Chrome on Linux.
The original implementation appended a second
<link rel="icon">to the<head>and left the Next.js-rendered one intact. This caused two issues:First-vs-last selection: Chrome on Windows picks the last matching
<link rel="icon">; Firefox and Chrome on Linux pick the first. Withtwo links in the DOM, the badge link (appended last) was systematically
ignored on Linux.
Firefox ignores dynamically added links: Firefox caches the favicon
from the element it tracked at page load. Inserting a new
<link>nodeat runtime is silently ignored — Firefox only reacts when the
hrefofthe existing element changes.
Solution
Remove
app/favicon.icoso Next.js emits a single<link rel="icon">pointing to
icon.svg. One link = no browser disagreement.Mutate
hrefon that link directly instead of injecting a second one.On mount the original
hrefis saved; the badge overwrites it on eachcount change; cleanup restores it on unmount. This satisfies Firefox and
is React-safe: the reconciler crash (
parentNode is null) only happenswhen a tracked DOM node is removed, not when its attributes are mutated.
Other fixes
fetch → blob → FileReader → Imagereplacedwith
new Image() + crossOrigin="anonymous"(same result, less code).stroke()after
fillRect()was a no-op becausefillRectdoes not write to thecanvas path. Changed to
strokeRect().