How to Remove Chrome Logo from PWA App Home Screen Link (Android O Preview)

Viewed 32419

I just updated to Android O Preview and installed a few PWAs. On the home screen a miniature Chrome logo is placed by the icon. This wasn't there before the OS update.

Ideally, I would like the PWA to look like a regular app on the home screen considering it has service workers enabled.

Is it possible to remove this with some settings in the app.yaml or manifest.json?

6 Answers

Note that if the phone doesn’t have a google play account enabled then all pwa will be installed as a bookmark only. This happened to us using a new phone to test our pwa

This is simple security measure as the PWA is literary opening the browser window and small icon signalizes which browser is used:

Starting with Android Oreo, every shortcut added from Chrome (and potentially other browsers as well, but they are not working now) will have a Chrome badge at the lower right corner of the icon.

Anyway, PWA seems to be abandoned as the new WebAPK feature is significantly more powerful and actually, supports normal icons

With WebAPK enabled, icons are back to normal as we were used in Android before Oreo

Source for quotes: https://medium.com/@firt/android-oreo-takes-a-bite-out-of-progressive-web-apps-30b7e854648f

Sometime we just miss one of the following, which stops us adding it as PWA to mobile:

  1. Use https instead of http (easily get ignored).
  2. One or more service worker.
  3. A manifest file.

In 2021, this was happening to me on Android 11 and Chrome 92, so I looked around, generated a Lighthouse audit report and got told that the following two things need to be green:

  • Does not provide a valid apple-touch-icon

For ideal appearance on iOS when users add a progressive web app to the home screen, define an apple-touch-icon. It must point to a non-transparent 192px (or 180px) square PNG. Learn More.

  • Manifest has a maskable icon

A maskable icon ensures that the image fills the entire shape without being letterboxed when installing the app on a device. Learn more..

There was also one more point about the HTTP not automatically redirecting to HTTPS, but after fixing the two points above, everything magically came alive and my Chrome as well as Edge properly show the app install prompt as well as the icon sans the Chrome/Edge icon.

FYI, the maskable icon link suggests using the following app: https://maskable.app/editor

Addition to other answers. User also need enough space on their device or else it will be installed as bookmark. This happened to me.

Related