PWA Icon Bug: Brave Icon Instead Of Website Logo

by Admin 49 views
PWA App Icon Issue: Brave Icon Displayed Instead of Website Logo in Overview/App Switcher

Hey everyone! Let's dive into a peculiar issue some of us are encountering with Progressive Web Apps (PWAs) in Brave. When you install a PWA, the desktop icon usually looks correct, displaying the website's logo. However, when you switch between apps or view the overview, the icon sometimes reverts to the default Brave icon instead of the website's logo. This can be a bit confusing, especially when you have multiple PWAs installed.

Understanding the Problem

So, what's actually happening here? Basically, when you install a PWA, the system creates a .desktop file that tells your operating system how to launch and display the application. This file includes information like the app's name, the command to execute, and, most importantly, the icon to use. In this case, the .desktop file generated by Brave seems to have a mismatch in how it identifies the application's window class, leading to the wrong icon being displayed in certain contexts.

To put it simply, the StartupWMClass entry in the .desktop file isn't correctly associated with the PWA's icon. This entry is responsible for telling the window manager (like GNOME) which icon to use for the application in the overview and app switching menu. When it's set incorrectly, the system falls back to the Brave icon. This issue impacts user experience because it makes it harder to visually distinguish between different PWA applications at a glance. Imagine having multiple PWAs pinned – all showing the Brave icon! It would definitely slow down your workflow.

This issue seems to be specifically affecting users on Linux distributions, particularly those using the GNOME desktop environment. Other operating systems might handle PWA icons differently, so the problem might not be as prevalent there. However, for those of us on Linux, it's a noticeable annoyance that disrupts the seamless integration of PWAs into our desktop experience. Furthermore, the underlying issue points to how Brave is generating these .desktop files for PWAs. It suggests that the process might not be fully capturing the unique identity of each PWA, leading to this icon confusion.

Steps to Reproduce the Issue

If you're curious to see if you can reproduce this issue, here's a step-by-step guide:

  1. Install a PWA-supported website as an app: Find a website that supports PWA installation (like YouTube Music, Twitter, or even a web-based chat app like Claude). Most modern websites offer an "Install" option in the browser's menu or address bar.
  2. Check the app icon in the app menu: After installation, the icon in your system's application menu should appear correctly, displaying the website's logo. This confirms that the initial installation process is working as expected.
  3. Observe the icon in the GNOME overview or app switching dialog: Now, activate your system's application overview (usually by pressing the Super/Windows key) or use the app switching shortcut (typically Alt+Tab). Here's where the problem surfaces – you'll likely see the Brave icon instead of the website's logo.

A Manual Fix: Diving into the .desktop File

Okay, so we've identified the problem. Now, let's talk about a manual fix that some users have discovered. This involves tweaking the .desktop file that Brave creates for the PWA. Don't worry, it's not as scary as it sounds! Here's the breakdown:

  1. Locate the .desktop file: These files are typically located in ~/.local/share/applications/. The filename will usually be something like brave-[some-unique-id]-Default.desktop. The unique ID corresponds to the PWA's app ID.
  2. Open the file in a text editor: Use your favorite text editor (like gedit, Nano, or VS Code) to open the .desktop file.
  3. Identify the key lines: Look for the lines starting with Icon= and StartupWMClass=. These are the lines we need to modify.
  4. Modify StartupWMClass: This is the crucial step. You need to change the value of StartupWMClass to match the value of Icon. For example, if your Icon line is Icon=brave-fmpnliohjhemenmnlpbfagaolkdacoja-Default, you should change StartupWMClass to StartupWMClass=brave-fmpnliohjhemenmnlpbfagaolkdacoja-Default.
  5. Save the file: Save the changes you made to the .desktop file.
  6. Log out and log back in (or restart your desktop session): This step is necessary for the changes to take effect. Logging out and back in refreshes the desktop environment and ensures that the updated .desktop file is loaded.

After doing this, the icon in your app switcher and overview should now display the correct website logo. This fix essentially tells the system, "Hey, use the same icon for this app everywhere!"

Example of .desktop File Modification

Let's illustrate this with an example. Suppose your original .desktop file looks like this:

#!/usr/bin/env xdg-open
[Desktop Entry]
Version=1.0
Terminal=false
Type=Application
Name=Claude
Exec=flatpak 'run' '--command=brave' 'com.brave.Browser' '--profile-directory=Default' '--app-id=fmpnliohjhemenmnlpbfagaolkdacoja'
Icon=brave-fmpnliohjhemenmnlpbfagaolkdacoja-Default
StartupWMClass=crx_fmpnliohjhemenmnlpbfagaolkdacoja
X-Flatpak-Part-Of=com.brave.Browser
TryExec=/var/lib/flatpak/exports/bin/com.brave.Browser

After applying the fix, it should look like this:

#!/usr/bin/env xdg-open
[Desktop Entry]
Version=1.0
Terminal=false
Type=Application
Name=Claude
Exec=flatpak 'run' '--command=brave' 'com.brave.Browser' '--profile-directory=Default' '--app-id=fmpnliohjhemenmnlpbfagaolkdacoja'
Icon=brave-fmpnliohjhemenmnlpbfagaolkdacoja-Default
StartupWMClass=brave-fmpnliohjhemenmnlpbfagaolkdacoja-Default
X-Flatpak-Part-Of=com.brave.Browser
TryExec=/var/lib/flatpak/exports/bin/com.brave.Browser

Notice the change in the StartupWMClass line. This is the key to resolving the icon issue.

Why This Fix Works

So, why does this manual modification actually work? The StartupWMClass property in the .desktop file is crucial for window managers (like the one used in GNOME) to correctly identify and group application windows. It acts as a unique identifier for the application's window, allowing the system to apply the correct icon and other settings. When the StartupWMClass doesn't match the expected value for the PWA, the window manager can't properly associate the PWA with its intended icon, and it falls back to the default Brave icon.

By changing the StartupWMClass to match the Icon property, we're essentially providing the window manager with the correct information to link the PWA window to its specific icon. This ensures that the website's logo is displayed consistently across the system, including in the app switcher and overview. It's a bit like giving the window manager the missing piece of the puzzle, allowing it to correctly identify and display the PWA's icon.

This fix highlights the importance of accurate window class identification in desktop environments. It shows how a small misconfiguration in the .desktop file can lead to noticeable inconsistencies in the user interface. While this manual fix provides a workaround, it's important for the Brave team to address the underlying issue in how these .desktop files are generated for PWAs, ensuring a smoother and more intuitive experience for users.

Expected Result and the Bigger Picture

The expected result, of course, is that the website icon (e.g., the Claude icon in the original example) should be consistently visible instead of the Brave icon in the app switching dialog and GNOME overview. This creates a more visually coherent and user-friendly experience, making it easier to identify and switch between different PWAs.

Imagine you have multiple PWAs installed – a chat app, a music streaming service, and a project management tool. If they all show the Brave icon, it becomes challenging to quickly distinguish between them. You have to rely on the window titles, which is less efficient than simply glancing at the icons. Consistent icons are a small detail, but they contribute significantly to the overall usability and polish of the desktop environment.

Looking at the bigger picture, this issue touches on the core value proposition of PWAs – their ability to seamlessly integrate into the desktop experience like native applications. PWAs are designed to bridge the gap between web applications and traditional desktop apps, offering features like offline support, push notifications, and, importantly, proper desktop integration with icons and window management. When icons are inconsistent, it detracts from this seamless integration and makes PWAs feel less like native apps.

Therefore, resolving this icon issue is not just about fixing a visual glitch; it's about ensuring that PWAs in Brave deliver the expected level of integration and user experience. It's about making PWAs feel like first-class citizens on the desktop, with all the visual cues and consistency that users expect from native applications.

Brave Version and Reproducibility

This issue has been observed in Brave version 1.84.132 Chromium: 142.0.7444.60 (Official Build) (64-bit) on Linux (Fedora GNOME). It's easily reproducible by following the steps outlined above.

Channel Information

This issue is present in the release (stable) channel of Brave.

Reproducibility Details

The issue occurs consistently and is not affected by disabling Brave Shields or Brave Rewards. It's also worth noting that this issue is specific to Brave and doesn't occur in the latest version of Chrome, suggesting that it's related to Brave's implementation of PWA handling.

Let's Get This Fixed!

Okay, guys, so that's the scoop on this PWA icon issue. It's a bit of an annoyance, but thankfully, there's a manual fix we can use in the meantime. Hopefully, the Brave team will address this in a future update to make the PWA experience even smoother. If you're experiencing this, give the manual fix a try, and let's keep the conversation going to help get this resolved! Have you encountered this issue? What are your thoughts on PWAs in general? Let's chat in the comments!