I usually use Chromium as my browser. It allows the installation of progressive web apps (PWA), which lets you use them as separate applications instead of web pages in your browser. PWAs bring several benefits, according to the Mozilla Developer Network. They work offline and in the background, and they get their own icon and UI. I like them because they open as separate applications, letting you use your OS’s application-switching keyboard shortcuts.

Web pages that can be installed as a PWA have a small icon at the right of Chromium’s address bar, like this:

Click on that and Bob’s your uncle. But sometimes, I’ve found that the app doesn’t install as a separate application, instead requiring me to first go to the website and then click the button to open it in its app. That annoyed me, so I found a solution, described below.

Properly installing the app

To install the app, what I needed to do was go to chrome://apps, right-click the app in question, then click “Create shortcut.” This created a .desktop file for the app on my desktop. (Learn more about the desktop entry standard on the Arch Linux wiki.) They look something like this:

#!/usr/bin/env xdg-open
[Desktop Entry]
Version=1.0
Terminal=false
Type=Application
Name=infopédia
Exec=/usr/bin/chromium --profile-directory=Default --app-id=dcllehhlbocgkfkfjjbikmegbbklmgmm
Icon=chrome-dcllehhlbocgkfkfjjbikmegbbklmgmm-Default
StartupWMClass=crx_dcllehhlbocgkfkfjjbikmegbbklmgmm

For the system to use this file, it goes in the folder ~/.local/share/applications. After it’s there, my desktop environment (GNOME) sees a new application and I can open it like any other application. Problem solved! But…

The icon didn’t get installed correctly. Sigh…

Fixing the icon

After installing the app, I found that Chromium still hadn’t installed the icon properly. I had to find out where applications look for their icons. On Linux, they’re usually stored in one of two places: for the whole system, they’re stored in /usr/share/icons, and for each user, they’re stored in $XDG_DATA_HOME/icons (usually ~/.local/share/icons). Learn more about the XDG Base Directory standards on the Arch Linux wiki. (Seriously, ArchWiki is an excellent place for learning more about Linux.)

Then, I just needed to find an icon for the app. As per a comment on this answer on Stack Exchange, you can find information about installed PWAs at chrome://app-service-internals, including an icon. To update the icon, here’s what I did:

1. I right-clicked → “Save image as…,”
2. generated a few different sizes with ImageMagick,
3. moved them into the right folders in ~/.local/share/icons, and then
4. updated the .desktop file with the right icon name.

Steps 2 and 3 above could be done in one step (and probably more reliably) with the following command: xdg-icon-resource install --size 128 my-icon.png. (Again, thanks ArchWiki!)

Now everything is as it should be. It took 10 or 15 minutes to learn what I learned today, and an hour to write about it. I hope it helps somebody in the future—maybe that somebody will be me!

Update: I missed a step. The .desktop file requires a StartupWMClass=... to tell the desktop environment to differentiate it from Chromium. Otherwise, every time you launch it from its icon, it starts a new window instead of opening the one that’s already open.