Give the favicon a transparent background - #126
Merged
Conversation
The icon was a single 256x256 frame flattened onto white, so every tab and bookmark bar drew a white card behind the hexagon instead of letting the mark sit on the browser's own chrome. It looked worst against a dark theme, where the card is the only white thing on the strip. Regenerated from public/img/favicon/bluehex.svg, which is the same mark the site header already renders, so there is one source for the icon rather than two that can drift. Alpha is premultiplied before resampling and divided back out afterwards; without that the white behind the transparent pixels bleeds into the blue at every edge and the small sizes come out with a pale halo. The ico now carries seven frames (16 through 256) rather than one. A single 256 frame left the browser to shrink the mark itself for a 16px tab, and a hexagon outline is exactly the shape that survives that badly.
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.
The icon was a single 256x256 frame flattened onto white, so every tab and bookmark bar drew a white card behind the hexagon instead of letting the mark sit on the browser's own chrome. It looked worst against a dark theme, where the card is the only white thing on the strip.
What changed
Regenerated from
public/img/favicon/bluehex.svg— which turns out to be byte-identical to the file that prompted this (same md5), and is the same marksite-header.tsxalready renders. So there is one source for the icon rather than two that can drift, and no new asset was added.Alpha is premultiplied before resampling and divided back out afterwards. Without that step the white sitting behind the transparent pixels bleeds into the blue at every edge, and the small sizes come out with a pale halo — visible on exactly the dark backgrounds this is meant to fix.
The
.iconow carries seven frames (16, 24, 32, 48, 64, 128, 256) rather than one. A single 256 frame left the browser to shrink the mark itself for a 16px tab, and a hexagon outline is exactly the shape that survives that badly.Verification
All seven frames have alpha extrema
(0, 255)with fully transparent corners, and the 256 frame's transparent-pixel count matches the source exactly.pnpm buildpasses and the emitted.next/server/app/favicon.ico.bodycarries all seven frames with transparency intact, so the App Router file convention picks it up.pnpm lintclean,pnpm test244 passed.Rendered at 16-48px over both dark chrome and the
#faf7f6theme colour — no halo either way, and the hexagon still reads at 16px.Not in this change
Two things found next door and deliberately left alone:
public/img/favicon/manifest.webmanifestreferencesandroid-icon-192.pngandandroid-icon-512.png, and neither file exists in that directory.layout.tsxmetadata, so nothing currently reads it.Both want their own change.