Skip to content

Favicon is not visible in dark mode, Improve favicon visibility for dark browser themes #3072

Description

@JosueMpia

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

  1. Open the Aave web app in a browser.
  2. Enable your browser or operating system's dark mode.
  3. Open the site in a new tab.
  4. 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.

Image Image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingnew issueThis issue has not been triaged by the core team yet

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions