fix(website): add dark-background favicon for legibility in search results by christian-byrne · Pull Request #12285 · Comfy-Org/ComfyUI_frontend

christian-byrne · 2026-05-15T06:40:20Z

PR Created by the Glary-Bot Agent

Summary

The comfy.org favicon was reported as illegible in Google search results. The current logomark.svg is a transparent yellow "C" — when Google (or any client) composites it onto a white surface (search results, light-theme tab strips), the yellow disappears into the background.

Fix: ship a dedicated /favicon.svg that wraps the existing yellow logomark in a solid black square, and point <link rel="icon"> at it. The in-page nav logo, Organization.logo Schema.org URL, and any other consumer of logomark.svg are left untouched, so transparent-composite contexts (knowledge panels, dark nav) continue to render cleanly.

Changes

apps/website/public/favicon.svg (new) — 48×48 SVG: black square + scaled-down original logomark path. Existing path geometry is reused verbatim inside a <g transform> so the C glyph is byte-identical to the source.
apps/website/src/layouts/BaseLayout.astro — <link rel="icon" href="/icons/logomark.svg"> → <link rel="icon" href="/favicon.svg">. One-line change.

Why a new file (vs editing `logomark.svg` in place)

logomark.svg is also used by SiteNav.vue (in-page header on the dark --color-primary-comfy-ink background) and by the JSON-LD Organization.logo URL. Both consumers want the transparent version. Editing it in place would draw an ugly black square in the site's own header.

User report

"just google searched comfyui and logo isnt legible. We should update.."

Verification

Built site

pnpm typecheck (astro check): 0 errors, 0 warnings
pnpm build (astro build): 280 pages built, exit 0
Built dist/index.html contains exactly one <link rel="icon" href="/favicon.svg"> and zero references to the old icon path in <head>
oxlint on changed .astro file: 0 warnings, 0 errors

Visual (Playwright on local astro dev server)

New favicon renders correctly at 16/32/64 px — yellow C centered on black square, no clipping.
In-page nav logo unchanged (yellow C floats cleanly on the dark --color-primary-comfy-ink nav background, no black wrapper visible).
Mock of Google search-result row shows the new favicon is high-contrast inside Google's white circular wrapper; the old one is nearly invisible.

Screenshots

Google-style search result simulation (before / after)

Favicon at native sizes + Google circular wrapper

In-page nav header (unchanged after the fix)

Notes for reviewers

The change deliberately uses pure black #000 (matching the user's literal request "make the white background, black") rather than --color-primary-comfy-ink (#211927). Either would work; happy to switch if brand preference is the ink color.
Search-engine cached favicons can take days/weeks to refresh on Google's side after the new file is deployed.

Screenshots

┆Issue is synchronized with this Notion page by Unito

…sults The transparent yellow logomark used as the favicon rendered nearly invisibly on white surfaces (Google search results, Safari/Chrome tab strips on light themes) because no background fill was provided and clients composite the icon on white by default. Ship a dedicated /favicon.svg that wraps the existing yellow logomark in a black square and point <link rel="icon"> at it. The in-page nav logo, Schema.org Organization.logo, and other consumers of logomark.svg are left untouched so transparent contexts continue to composite cleanly.

coderabbitai · 2026-05-15T06:40:37Z

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)

apps/website/public/favicon.svg is excluded by !**/*.svg

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: dea680f8-d071-4390-bc84-98f27f18fbcc

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

📝 Walkthrough

Walkthrough

The favicon reference in the website's base layout is updated from pointing to the logomark icon to a dedicated favicon SVG file, changing the href from /icons/logomark.svg to /favicon.svg.

Changes

Favicon Configuration

Layer / File(s)	Summary
Favicon link update `apps/website/src/layouts/BaseLayout.astro`	The favicon `<link>` tag `href` is updated from `/icons/logomark.svg` to `/favicon.svg`.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~1 minute

Poem

A rabbit hops with glee, so bright, ✨
The favicon now shines with light,
From logomark to favicon new,
The browser tab wears colors true! 🐇

🚥 Pre-merge checks | ✅ 7

✅ Passed checks (7 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a dark-background favicon to improve legibility in search results, which aligns with the core file modification in BaseLayout.astro.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
End-To-End Regression Coverage For Fixes	✅ Passed	Changes are exclusively in apps/website/ (favicon asset and layout template). Per the check instructions, changes exclusively in apps/website are exempted from end-to-end regression test requirements.
Adr Compliance For Entity/Litegraph Changes	✅ Passed	PR modifies only website files (favicon asset and BaseLayout.astro). No changes to src/lib/litegraph/, src/ecs/, or graph entity files. ADR compliance check does not apply.
Description check	✅ Passed	PR description comprehensively covers all template sections with detailed context, rationale, verification steps, and visual evidence.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch glary/fix-comfy-org-favicon-contrast

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-05-15T06:40:46Z

🌐 Website E2E

Tip

All tests passed.


Status	✅ Passed
Report	View Report

🔗 Website Preview

Website Preview: https://comfy-website-preview-pr-12285.vercel.app

_{This commit: https://website-frontend-e5brvxt0d-comfyui.vercel.app}

_{Last updated: 2026-05-19T02:06:00Z for b359dbb}

Per design feedback, the black-square favicon looked awkward inside Google's circular crop wrapper - a sharp black box floating inside a white circle. Per Google's published favicon guidance the wrapper is circular, so the favicon content itself should be circular too: the content edge and the wrapper edge then coincide, producing a single clean disc instead of a square-inside-a-circle. Changes to favicon.svg: - Replace the full-bleed black <rect> with a black <circle> filling the viewBox. The corners outside the circle are transparent, so on light surfaces they composite to whatever the surface color is (Google's white wrapper, light browser tabs, etc.) rather than drawing a hard square. - Embed prefers-color-scheme media query so the icon inverts on dark surfaces (yellow circle + black C) - prevents the previous version's black-circle-disappears-into-dark-tab failure mode. Supported in Chrome / Firefox / Edge. Safari ignores the media query and gets the light-mode variant, which still reads on Safari's typical light tab strip. - Enlarge the C glyph from scale 0.844 to 0.72 of the new circular canvas. The C now occupies a larger fraction of the visible area so it stays readable at 16px (browser tab) and inside Google's ~18px inner-favicon slot.

glary-bot · 2026-05-15T07:00:33Z

Revised design (v2)

Feedback from the original requester: the v1 black square looked like a black square floating inside Google's white circular crop wrapper — ugly. Quoting the screenshot they sent: "you made a black square in a white circle".

What changed

Per Google's official favicon guidance, search results crop favicons into a circular container. So the right shape for the content is also a circle — the content edge and the crop edge then coincide, producing one clean disc.

favicon.svg:

Full-bleed <rect> → full-bleed <circle>. Corners outside the circle are transparent, so on light surfaces they composite to whatever the surface color is (Google's white wrapper, light browser tabs) instead of drawing a hard square.
@media (prefers-color-scheme: dark) inverts colors (yellow circle + black C) on dark surfaces. Fixes the v1 failure mode where the black circle was invisible on a dark browser tab. Chrome/Firefox/Edge support this; Safari ignores it and gets the light-mode variant, which still reads fine on Safari's typical light tab strip.
Larger C glyph (scale 0.844 → 0.72 of the new circular canvas) so it stays readable at 16px and inside Google's ~18px inner-favicon slot.

No changes to BaseLayout.astro (still references /favicon.svg).

Verification

pnpm typecheck: 0 errors / 0 warnings
pnpm build: 280 pages built, exit 0
Playwright screenshots in both prefers-color-scheme: light and : dark emulation confirm:
- Light mode → black circle / yellow C
- Dark mode → yellow circle / black C (inverted)
Confirmed in-page nav header (which renders /icons/logomark.svg, NOT this file) is unchanged.

Before / After in Google's circular crop wrapper

The top row is this PR's revised favicon; the bottom row is the production transparent-yellow logomark.

The favicon at multiple sizes — light surface

OS in light mode (or Safari, regardless): black circle, yellow C.

Dark mode auto-swap

OS in dark mode on Chrome/Firefox/Edge: yellow circle, black C. Same SVG, different prefers-color-scheme value.

Nav header (regression check)

Unchanged from main — /icons/logomark.svg still the transparent yellow on dark nav, no black box added.

Screenshots

coderabbitai Bot previously approved these changes May 15, 2026

View reviewed changes

glary-bot Bot dismissed coderabbitai[bot]’s stale review via 88f132c May 15, 2026 07:00

coderabbitai Bot approved these changes May 15, 2026

View reviewed changes

christian-byrne marked this pull request as ready for review May 19, 2026 02:04

christian-byrne requested a review from a team May 19, 2026 02:04

dosubot Bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label May 19, 2026

Merge branch 'main' into glary/fix-comfy-org-favicon-contrast

b359dbb

christian-byrne merged commit 4931b0c into main May 19, 2026
40 checks passed

christian-byrne deleted the glary/fix-comfy-org-favicon-contrast branch May 19, 2026 02:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(website): add dark-background favicon for legibility in search results#12285

fix(website): add dark-background favicon for legibility in search results#12285
christian-byrne merged 3 commits into
mainfrom
glary/fix-comfy-org-favicon-contrast

christian-byrne commented May 15, 2026 •

edited by sync-by-unito Bot

Loading

Uh oh!

coderabbitai Bot commented May 15, 2026 •

edited

Loading

Review skipped

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

github-actions Bot commented May 15, 2026 •

edited

Loading

Uh oh!

glary-bot Bot commented May 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

christian-byrne commented May 15, 2026 • edited by sync-by-unito Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Why a new file (vs editing logomark.svg in place)

User report

Verification

Screenshots

Google-style search result simulation (before / after)

Favicon at native sizes + Google circular wrapper

In-page nav header (unchanged after the fix)

Notes for reviewers

Screenshots

Uh oh!

coderabbitai Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

github-actions Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🌐 Website E2E

🔗 Website Preview

Uh oh!

glary-bot Bot commented May 15, 2026

Revised design (v2)

What changed

Verification

Before / After in Google's circular crop wrapper

The favicon at multiple sizes — light surface

Dark mode auto-swap

Nav header (regression check)

Screenshots

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

christian-byrne commented May 15, 2026 •

edited by sync-by-unito Bot

Loading

Why a new file (vs editing `logomark.svg` in place)

coderabbitai Bot commented May 15, 2026 •

edited

Loading

github-actions Bot commented May 15, 2026 •

edited

Loading