question

StevePogue-5990 avatar image
0 Votes"
StevePogue-5990 asked ·

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)
10 |1000 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.

1 Answer

Deepak-MSFT avatar image
0 Votes"
Deepak-MSFT answered ·

@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 · Share
10 |1000 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 ·
Deepak-MSFT avatar image Deepak-MSFT StevePogue-5990 ·

@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