question

StevePogue-5990 avatar image
0 Votes"
StevePogue-5990 asked ako answered

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

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.

69684-manageapps.png



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://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/



ms-edge
manageapps.png (14.6 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Deepak-MSFT avatar image
1 Vote"
Deepak-MSFT answered Deepak-MSFT commented

@StevePogue-5990 ,
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.

69963-250.png

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

69972-253.png

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.

70003-251.png

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.

69935-252.png



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.



250.png (14.1 KiB)
253.png (2.0 KiB)
251.png (3.6 KiB)
252.png (12.4 KiB)
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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:

70104-vspherefavicon.png


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

70072-faviconnot-used-on-taskbar.png

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

0 Votes 0 ·

@StevePogue-5990,
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.

0 Votes 0 ·

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.

0 Votes 0 ·
Show more comments
ako avatar image
0 Votes"
ako answered

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

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.