Skip to content

fix: make the favicon visible on dark browser tabs - #16

Merged
ClausValcaTD merged 1 commit into
mainfrom
fix/favicon-visibility
Nov 4, 2026
Merged

ClausValcaTD merged 1 commit into
mainfrom
fix/favicon-visibility

Conversation

@ClausValcaTD

@ClausValcaTD ClausValcaTD commented Nov 4, 2026 •

Copy link
Copy Markdown
Member

The bug

The tab icon was pointed straight at romeo-logo.png, which is a dark navy
badge
— 77% near-black (dominant rgb(1,5,43), luminance ~7). On a dark tab
bar it read as an empty square:

romeo-logo.png at 16px, on a dark tab bar
bright pixels (>140 luminance): 0.0%   ← nothing for the browser to draw

There was also no /favicon.ico, so any browser falling back to the
conventional path got a 404.

The fix

The favicon is now the ROMeo art on a cyan→purple rounded frame, so the dark
badge separates from light and dark tab bars.

before                     after
┌──────────────┐           ╭──────────────╮
│              │           │▓ neon frame ▓│
│  ███ dark ██ │           │▓  ROMeo art ▓│
│  ██ badge ██ │           │▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│              │           ╰──────────────╯
└──────────────┘
invisible on dark tabs     legible on any background
File Purpose
public/favicon.ico multi-size (16/24/32/48/64) — conventional path + legacy consumers
public/images/romeo-favicon.png 512px modern rel="icon"
public/images/romeo-touch-icon.png 180px opaque — iOS ignores transparency and composites onto black, which would have swallowed the badge

Verification

Contrast, measured on both a white and a #202124 background:

Size Before (std / bright%) After (std / bright%)
16px 0.0 / 0% 49–58 / 27–36%
32px ~9 / 5% 54–62 / 27–34%
48px — 55–63 / 31–37%
  • /favicon.ico now serves 200 image/vnd.microsoft.icon; the browser requests
    it on load (confirmed in the Wrangler request log).
  • All three files decode as valid RGBA.
  • npm run build clean, npm test 50/50.

This pull request was created by an AI agent (OpenHands) on behalf of the user.

Summary by CodeRabbit

  • Bug Fixes
    • Updated the site’s favicon and Apple touch icon to use their respective image files.

The tab icon pointed straight at romeo-logo.png, which is 77% near-black
(dominant rgb(1,5,43), luminance ~7). On a dark tab bar it read as an empty
square — at 16px not a single pixel was brighter than 140, so the browser had
nothing to render. There was also no /favicon.ico, so browsers falling back to
the conventional path got a 404.

Both are fixed:

- The favicon is now the ROMeo art on a cyan->purple rounded frame, so the dark
  badge separates from light and dark tab bars alike. It lives in
  public/images/romeo-favicon.png and is also emitted as a multi-size
  public/favicon.ico (16/24/32/48/64) for the conventional path and legacy
  consumers.
- apple-touch-icon now uses a 180px opaque variant
  (public/images/romeo-touch-icon.png); iOS ignores transparency and composites
  onto black, which would have swallowed the badge.

Measured at 16/32/48px: contrast std ~55 and ~27-37% bright pixels on both a
white and a #202124 background, versus std ~0 and 0% bright before.

Co-authored-by: openhands <openhands@all-hands.dev>
@coderabbitai

coderabbitai Bot commented Nov 4, 2026 •

Copy link
Copy Markdown

Explain Change →

No actionable comments were generated in the recent review.

Walkthrough

The layout adds a generic /favicon.ico link and points the PNG favicon and Apple touch icon to separate image files.

Changes: Favicon links

Layer / File(s) Summary
Update favicon sources
src/layouts/Layout.astro
Adds /favicon.ico and changes the PNG favicon and Apple touch icon paths to /images/romeo-favicon.png and /images/romeo-touch-icon.png.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Bug fix

Possibly related PRs

Suggested reviewers: openhands-agent

Merge Risk: Minimal · up to 80b99

The favicon changes are ready to merge with no identified user-facing risk.

Architecture risk: Low · up to 80b99

The change affects 1 system.

Changed systems: src

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

  • observed — src (service) was modified; 1 changed file maps to changed impact.

Before / after behavior

  • observed — Modified behavior in src/layouts/Layout.astro: Adds /favicon.ico as an any-format icon, points the PNG icon to /images/romeo-favicon.png, and points the Apple touch icon to /images/romeo-touch-icon.png; both mobile icon links previously used /images/romeo-logo.png.
Pre-merge checks: Passed 5
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title "fix: make the favicon visible on dark browser tabs" matches the main change. The PR replaces the dark romeo-logo.png favicon with a framed icon that stays visible on dark tabs. It also adds…
Docstring Coverage Passed No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Title check

Explanation

The title "fix: make the favicon visible on dark browser tabs" matches the main change. The PR replaces the dark romeo-logo.png favicon with a framed icon that stays visible on dark tabs. It also adds a conventional /favicon.ico path and a separate opaque touch icon. The title covers the primary intent and omits the secondary changes, which the title check allows.

Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)

Finishing Touches
Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Recent review info
Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 29d8d9d4-e149-488a-bb5c-e3ec41483ae0
Commits

Reviewing files that changed from the base of the PR and between d307eb6 and 80b9937.

Files ignored due to path filters: 3
  • public/favicon.ico is excluded by !**/*.ico
  • public/images/romeo-favicon.png is excluded by !**/*.png
  • public/images/romeo-touch-icon.png is excluded by !**/*.png
Files selected for processing: 1
  • src/layouts/Layout.astro

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying openrom-store with  Cloudflare Pages  Cloudflare Pages

Latest commit: 80b9937
Status: ✅  Deploy successful!
Preview URL: https://ee3a0397.openrom-store.pages.dev
Branch Preview URL: https://fix-favicon-visibility.openrom-store.pages.dev

View logs

@ClausValcaTD
ClausValcaTD merged commit ae77af6 into main Nov 4, 2026
3 checks passed
@ClausValcaTD
ClausValcaTD deleted the fix/favicon-visibility branch November 4, 2026 15:15
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.

2 participants