feat(frontend): brand the favicon and page metadata - #319
Merged
Conversation
Tabs still showed the create-next-app icon, title and description. The favicon is now the sidebar tree from public/branch-logo.png, composited onto the sidebar's brand green because the artwork is white line work on transparency and would otherwise be invisible against a light tab. The .ico carries 256/48/32/16px renditions. The small ones are not plain downscales: hairline strokes shrink into faint partial alpha, so each is levels-corrected to reopen the gaps between leaves and drive the stroke cores opaque, keeping the tree readable at tab size. Co-authored-by: Cursor <cursoragent@cursor.com>
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.
Summary
Browser tabs still showed the
create-next-appicon, title and description. This swaps in BRANCH branding.public/branch-logo.png), composited onto the sidebar's brand green (#2E6038). The artwork is white line work on transparency, so left as-is it would be invisible against a light tab.Create Next AppbecomesBRANCH.Generated by create next appbecomesAccounting platform for BRANCH. This one shows up in link previews and search results, so it was worth more than a placeholder.No code change was needed to register the icon: Next's App Router picks up
app/favicon.icoautomatically, and file-based metadata routes get the previewbasePathprefix for free.On the small renditions
The
.icocarries 256/48/32/16px images. The small ones are not plain downscales — shrinking the hairline strokes smears them into faint partial alpha, which renders as grey mush rather than a tree. Each small size is levels-corrected on the alpha mask: low alpha is pushed back to transparent so the gaps between leaves reopen, high alpha is driven to solid white so the branches stay crisp. 16px is tuned for a readable silhouette instead, since a leaf is well under a pixel there.The 256px entry is listed first so Next advertises
sizes="256x256"rather than16x16, which matters on retina displays where a 16px hint gets upscaled into a blurry tab icon.Test plan
npm run devinapps/frontend, hard-reload (Cmd+Shift+R — browsers cache favicons aggressively) and confirm the tab shows the green tree icon and the titleBRANCH/favicon.icodirectly and confirm it is the tree, not the Next.js logo<title>BRANCH</title>and the BRANCH description meta tagnpm run buildstill exports cleanlyMade with Cursor