How to Change the Icon of a PWA Application Using Microsoft Edge

By João Ferreira Feb 24, 2024 Windows 0 Comments

In this blog post, I will show you how to change the icon of a Progressive Web App (PWA) using Microsoft Edge. But first, let me explain what a PWA is and how to install it using Microsoft Edge.

What is a PWA Application?

A PWA is a website that can be installed and run on any device, from one codebase, using web technologies such as HTML, CSS, and JavaScript. A PWA provides native-like experiences to users, such as having its own app icon, running offline, supporting push notifications, and accessing hardware features. A PWA can also run in web browsers, like a website, and can be indexed by search engines, shared by a web link, and adapted to different screen sizes and input methods.

How to Install a PWA Application Using Microsoft Edge?

To install a PWA using Microsoft Edge, you need to visit the website that is an installable PWA. You can tell if a website is a PWA by looking for the App available icon in the address bar. Click the App available icon and then click Install to complete the installation and run the PWA in Windows.

Even if the site is not available as a PWA you will be able to install it as an application by clicking in the … to open the browser menu and then under Apps select Install this site as an App.

Why Change the Icon of a PWA Application?

Changing the icon of a PWA can help you customize your app experience and make it easier to identify and access your apps on your device. For example, if you have several Microsoft 365 applications from different tenants installed as PWAs, you may want to change the icon of each app to include some visual reference related to the tenant where the app belongs to, such as a color, a letter, or a logo. This way, you can quickly distinguish between different apps and avoid confusion or mistakes when using them.

How to Change the Icon of a PWA Application Using Microsoft Edge?

To change the icon of a PWA application when using Microsoft Edge you should do the following:

1. In the install this site as an app you have the possibility to change the name of the application and also the logo
   

   

2. Click the Edit button under the default logo
3. Upload your image that will be used as a custom logo
4. Click Install

The app will now be available next to all your other applications on Windows and you will be able to easily tell by the name and the custom logo which one is what, as you can see in the following image, I have two different instances of Microsoft Lists Installed.