Favicon is not visible in dark mode, Improve favicon visibility for dark browser themes
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 536
- Forks
- 496
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 9
Description
Describe the bug
The Aave favicon is black, making it effectively invisible when viewed in browsers using dark mode. This reduces brand visibility and makes it difficult to identify the Aave tab among other open tabs. The issue was observed on the Aave web app.
To Reproduce
- Open the Aave web app in a browser.
- Enable your browser or operating system's dark mode.
- Open the site in a new tab.
- Observe that the favicon is black and blends into the dark browser tab background, making it difficult or impossible to see.
Expected behavior
The favicon should remain clearly visible in both light and dark browser themes. This can be achieved by providing a dark-mode-specific favicon, using an SVG favicon that supports prefers-color-scheme, or designing a favicon with sufficient contrast against dark tab backgrounds.
Screenshots
Please see the two screenshot below.
Desktop (please complete the following information):
- OS: macOS
- Browser: Chrome
- Version: Latest
Smartphone (please complete the following information):
- Device: N/A
- OS: N/A
- Browser: N/A
- Version: N/A
Additional context
Modern browsers do not automatically invert favicon colors for dark mode. Since the current favicon is predominantly black, it becomes nearly invisible against dark tab backgrounds. Providing separate light/dark favicons or an adaptive SVG favicon would improve visibility and overall user experience.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the Aave web app's favicon asset and the document entry point that references it, then reproduce the issue in Chrome with dark mode enabled. Update the favicon treatment so it remains visible in both light and dark browser themes, and verify the result in each theme.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100