Skip to content

Favicon: transparent light/dark variants - #8

Open
naman06dev wants to merge 1 commit into
mainfrom
fix/favicon-variants
Open

Favicon: transparent light/dark variants#8
naman06dev wants to merge 1 commit into
mainfrom
fix/favicon-variants

Conversation

@naman06dev

Copy link
Copy Markdown
Contributor

The current favicon is a 1080×1080 white-mark-on-solid-black square. Two problems: on a light browser tab it renders as a black box, and the mark occupies only ~58% of the tile, so at 16×16 it reads as a gray smudge (visible on the live site now).

This PR:

  • Extracts the mark from the existing artwork and crops to its bounds so it fills the tile at small sizes.
  • Generates two transparent-background variants colored to match the logo files: #18181B for light tabs (same ink as logo/light.svg), #fafafa for dark tabs (same as logo/dark.svg).
  • Points docs.json's favicon at the light/dark object so each browser theme gets the matching variant.

Replaces the single favicon.png. Preview both at 32px before merging if you want — they're crisp.

🤖 Generated with Claude Code

The favicon was a 1080px white-mark-on-solid-black square: on a light
browser tab it rendered as a black box, and the mark itself occupied
only ~58% of the tile, so at 16px it read as a smudge. Extracted the
mark, cropped to its bounds, and generated two transparent variants
matching the logo colors (#18181B light / #fafafa dark), wired via
docs.json's favicon light/dark object so each theme gets the right one.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant