Skip to content

feat(web): SVG logo + favicon, replace corrupted PNGs#126

Merged
themightychris merged 1 commit into
mainfrom
feat/svg-logos
Jun 2, 2026
Merged

feat(web): SVG logo + favicon, replace corrupted PNGs#126
themightychris merged 1 commit into
mainfrom
feat/svg-logos

Conversation

@themightychris
Copy link
Copy Markdown
Member

Summary

Two related fixes you flagged after #123 landed:

  1. The PNGs from fix(web): always-visible wordmark in navbar #123 were corrupted. The bytes I wrote via base64 from the Drive download were off by 300+ bytes from the original metadata — the decoded files were valid PNGs with reasonable dimensions, but the wrong content. Replaced all three with the correct binaries.
  2. Added SVG variants for the two surfaces that actually render the logo — the navbar (`/img/logo-horizontal.svg`) and the browser tab favicon (`/favicon.svg`). SVG scales perfectly at any zoom, scales for retina without serving a 2x asset, and is roughly half the payload of the new high-res PNG.

Updates:

  • `AppHeader.tsx` swaps `/img/logo-horizontal.png` → `/img/logo-horizontal.svg`.
  • `index.html` prefers the SVG favicon via `<link rel="icon" type="image/svg+xml">` with the PNG retained as a fallback for old browsers (pre-Chrome 80 / pre-Firefox 41).
  • `logo.png` (square standalone) is updated to the correct binary but still isn't referenced anywhere — kept on hand for future use.

Test plan

  • `npm run -w apps/web type-check` clean
  • `npm run -w apps/web test -- tests/AppHeader.test.tsx` — 5/5 (header test asserts alt-text + link target, not the specific src)
  • `npm run lint` clean
  • After deploy: confirm logo renders crisply in the navbar + favicon appears in the tab on https://next-v2.codeforphilly.org

🤖 Generated with Claude Code

The PNGs added in 57c9270 (Code for Philly logo + favicon) decoded
to the right shape but the wrong bytes — base64 transcription went
sideways somewhere between Drive download and disk. This commit
replaces all three PNGs with the corrected binaries (favicon
5866B, logo.png 8372B matching the original Drive metadata, and
logo-horizontal upgraded to a 1067x400 high-res 19KB version).

Adds SVG variants for the two places we actually render the image:

  apps/web/public/favicon.svg
  apps/web/public/img/logo-horizontal.svg

AppHeader now renders the SVG (sharper at any zoom, scales perfectly
on retina, half the payload of the new high-res PNG). index.html
prefers the SVG favicon via <link rel="icon" type="image/svg+xml">
with the PNG kept as a fallback for browsers that don't support
SVG favicons (anything pre-Chrome 80 / pre-Firefox 41).

The standalone square logo (logo.png) stays PNG-only — it isn't
referenced anywhere in the app yet, kept on hand for future use.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@themightychris themightychris merged commit 741aa2c into main Jun 2, 2026
1 check passed
@themightychris themightychris deleted the feat/svg-logos branch June 2, 2026 14:44
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