Repository navigation
Make the favicon a background-free, theme-aware logo - #2
Merged
Merged
Conversation
Drop the black plate from the favicon and re-fit the mark to a square canvas with 4% padding, so the logo reads edge-to-edge instead of sitting inside a badge. `favicon.svg` carries a `prefers-color-scheme` rule, so it draws black on light UI and white on dark. Rasters can't carry that rule, so ship both: `favicon-96x96.png` (black) and `favicon-96x96-dark.png` (white), selected by `media` on their icon links, with the light one last so browsers that ignore `media` land on it. Every raster is rendered from the SVG at its own size — 16/32/48 inside the `.ico`, 96 for the PNGs, 180 for the apple-touch icon — rather than downscaled, and all are RGBA with a transparent background. The apple-touch icon uses the white mark because iOS composites transparent home-screen icons onto black. Icon payload drops from 17.8 kB to 6.2 kB. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HSpEGpoGdyewcAX6VzG6W1
GoatInAHat
marked this pull request as ready for review
August 24, 2026 22:01
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
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.
Drops the black plate behind the mark and makes the icon follow the viewer's colour scheme.
What changed
public/favicon.svg— the source of truth. Background<rect>removed; the mark is re-fitted to a square canvas (viewBox="11.442 11.237 44.088 44.088", the path's exact bbox squared with 4% padding) so it reads edge-to-edge instead of sitting inside a badge. Path data is untouched. A<style>block fills it#000, switching to#fffunder@media (prefers-color-scheme: dark).index.html— the 96px PNG link is split into a light/dark pair selected bymedia. The light one is declared last, so a browser that ignoresmediaon icon links lands on the black mark (the safe default for light fallback surfaces) rather than an invisible white one.Rasters — each size rendered from the SVG at its own resolution rather than downscaled from one bitmap, all RGBA with a transparent background:
favicon.icofavicon-96x96.pngfavicon-96x96-dark.pngapple-touch-icon.pngThe apple-touch icon uses the white mark because iOS composites transparent home-screen icons onto black.
AGENTS.md— thepublic/row now says the SVG is the source and the rasters are rendered from it.Icon payload: 17.8 kB → 6.2 kB.
Verification
npm run lint,npm run build,npm run check:force(816 assertions),npm run check:density(139500 assertions),git diff --check,pre-commit run --all-files— all pass.favicon.icore-parsed: 3 entries, each a valid 32-bit RGBA PNG matching its directory dimensions, no trailing bytes.prefers-color-schemeswitch confirmed in Chromium by loadingfavicon.svgas an image — black under the default scheme, white with the dark preference forced, same 2113 opaque pixels either way.npm run previewserves every icon at HTTP 200 with the right content type, and the page renders unchanged.No generation script is committed — the SVG is the source, and any SVG rasteriser reproduces the set.