[ehfreema]

Description

The favicon always stays black

Fixes part of #2116

Next.js creates file-based favicon links from app/favicon.ico and app/icon.png. These file-based links override the theme-aware link tags. Removal lets the prefers-color-scheme icons take effect.

The change is related to #2116 (comment)

How Has This Been Tested?

• Test A — pnpm --filter @karakeep/web format, lint, typecheck, build — all passed.
• Test B — pnpm --filter @karakeep/landing format, lint, typecheck, build — all passed.
• Test C — Full pre-commit turbo typecheck lint format (64 tasks) — all passed.
• Test D — Helium on macOS at http://localhost:3000/signin and http://localhost:4321/:
  - Make sure that link[rel="icon"][media="(prefers-color-scheme: light)"] points to /icons/logo-icon.svg.
  - Make sure that link[rel="icon"][media="(prefers-color-scheme: dark)"] points to /icons/logo-icon-dark.svg.
  - Make sure that matchMedia('(prefers-color-scheme: dark)').matches is correct for light and for dark.
  - If the OS is light and the page is light, the Chromium tab bar is light and the favicon is black.
  - If the OS is dark and the page is dark, the Chromium tab bar is dark and the favicon is white.

To reproduce:

1. Start the web app on http://localhost:3000 and the landing app on http://localhost:4321.
2. Open each URL in Chromium.
3. Change the color scheme and do a hard reload. The favicon changes with the scheme.

Screenshots

Checklist:

• I have carefully read CONTRIBUTING.md
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation if applicable
• I have no unrelated changes in the PR.
• I have confirmed that any new dependencies are strictly necessary.
• I have written tests for new code (if applicable)

Please describe to which degree, if any, an LLM was used in creating this pull request.

Muse Spark 1.2 helped with research about the Next.js fields and test cases. All code changes were reviewed by a human.

[greptile-apps]

Greptile Summary

This PR makes the web and landing favicons adapt to the browser’s preferred color scheme.

• Adds light- and dark-theme SVG favicon metadata to both applications.
• Adds white logo variants for dark browser chrome.
• Removes Next.js file-based favicon assets that overrode the theme-aware metadata.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
apps/web/app/layout.tsx	Adds theme-aware SVG icon metadata while retaining the existing Apple touch icon metadata.
apps/landing/src/layouts/BaseLayout.astro	Replaces the static ICO favicon declaration with light- and dark-scheme SVG declarations.
apps/web/public/icons/logo-icon-dark.svg	Adds the white SVG logo used as the web app’s dark-theme favicon.
apps/landing/public/icons/logo-icon-dark.svg	Adds the white SVG logo used as the landing site’s dark-theme favicon.
apps/web/app/favicon.ico	Removes the conventional favicon that previously overrode theme-aware icon metadata.
apps/web/app/icon.png	Removes the Next.js file-based icon while leaving the dedicated Apple icon intact.

_{Reviews (2): Last reviewed commit: "fix(web): remove conflicting file-based ..." | Re-trigger Greptile}

[MohamedBassem]

Thank you!