Chromium Edge - Install this Site as an App - Modify Icon

Question

Chromium Edge - Install this Site as an App - Modify Icon

Steve Pogue 71

Using Chromium Edge 88.0.705.74
Using builtin feature "Install this site as an App". Have been using this feature in Chrome and Chromium edge for a while
For sites that do not have a Favicon.ico, a black icon is substituted for the app.

Is there a method to update the Icon used by the app after creation?
You can see the icons with the User \AppData\Local\Microsoft\Edge\User Data\Profile 3\Web Applications and
\AppData\Local\Microsoft\Edge\User Data\Profile 3\Extensions\pljnpeboemcnaepgpabbgcanocamhghn\2021.2.11.40391_0\icons

Changing these icons does not update the app after creation.
Have reviewed the following documentation looking for clues with no luck: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/

Answer 1

Deepak-MSFT 2,076 Microsoft Vendor

@Steve Pogue ,
I did not get any officially documented way to modify the icon of the app after creation that is added using the Install this Site as an App.

I found a workaround that can help you to add the icon to the app while creating the app using the Install this Site as an App option.

You can refer to the steps below.

1- If the site is already installed as an app then first uninstall it.
2- Visit the desired site that you want to install as an app (which does not contain the favicon) in the Edge browser.
3- Open the developer tools by pressing the F12 key in the Edge browser window.
4- Go to the Elements tab and right-click on the <head> tag. Click on the Edit as HTML option.

5- Add the line of code below in the <head> section.

Note: You need to modify the type and href value in code above. You need to pass the favicon file location to the href.

It should look like below.

6- After finish editing the code, click outside the editing area. You will notice that the favicon is applied to the site.
7- You can go to the Settings and more (Alt+F)-> Apps and click on the Install this Site as an App option.
8- You can notice that the site is installed with the favicon that you had added in the developer tools.

If you refresh the site in the Edge browser then you can see that the changes you have made will be flushed but the app will keep using the favicon.

----------

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Steve Pogue 71 Reputation points

2021-02-19T14:00:41.72+00:00

I followed the instructions and it mostly works.
The FavIcon is now attached to the application in the app manager.
vSphere has the icon as follows:

But when you try and Pin the app to the Windows 10 Taskbar as follows it does not use the Icon. It uses a Black W

This functionality has changed in Version 88 of MSedge.
In version 87 of MS Edge it would pin the app to the taskbar with the Icon.
Still works in Chrome 88
Deepak-MSFT 2,076 Reputation points Microsoft Vendor

2021-02-23T08:07:16.187+00:00

@Steve Pogue ,
I try to search but I did not get any way to modify the icon for the pinned app to the taskbar.

Thanks for your understanding.
Steve Pogue 71 Reputation points

2021-02-23T13:25:39.683+00:00

Thanks for your assistance. I have moved this question over the the MS Edge Insiders Tech Community.
Another solution that works, but uses a bit more over head, is to create a profile for each app, create a custom windows shortcut for the profile including the icon of choice for the profile and then pin the Profile shortcut to the task bar. Sort of defeats the purpose of the Manage Apps functionality.
Deepak-MSFT 2,076 Reputation points Microsoft Vendor

2021-02-24T09:19:18.15+00:00
@Steve Pogue ,
If you can place the app on the desktop instead of pin it to the taskbar then you can change the icon for it by referring to the step below.

Pinned the app to the taskbar.

Press the Shift key and along with that right-click on the app.

Select the Create Shortcut option. Click yes on the popup to create a shortcut on the desktop.

Right-click the app shortcut and select the Properties option.

On the Shortcut tab, click on the Change icon button to change the icon.

Note: When you launch the app by double-clicking the shortcut then it will still show the black icon in the taskbar.

If you think there should be a proper way to modify the icon for the apps that do not contain any favicon then I suggest you press the ALT + SHIFT + I key in the Edge browser window and try to provide your feedback to Microsoft regarding this issue.

Thanks for your understanding.

Answer 2

I have a comment to this thread. I don't know if it is too old, but I think I faced something of a similar problem.

I wanted to change the icon of an Edge app on the task bar.

If you open Edge and browse to edge://apps, then you will see a list of installed apps (with their icons). Click on the app with the right mouse-button and select "Create desktop shortcut".

The desktop shortcut that is now created is different from the shortcut created through the start menu. You can now actually modify the target, and see that it starts the application "C:\Program Files (x86)\Microsoft\Edge\Application\msedge_proxy.exe"

If you change the icon of this shortcut, it will be reflected on the Task Bar (at least that was my experience). But it only works if you start the app through the desktop shurtcut (or pins that app).

But changing the icon of this shortcut does not reflect back to the Start Menu shortcut if you also need to change that.

I hope this may still be of relevance to you.

Regards
Anders

Chromium Edge - Install this Site as an App - Modify Icon

2 answers

Activity