Share via

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

Steve Pogue 71 Reputation points
2021-02-18T16:57:04.45+00:00

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

Microsoft Edge
Microsoft Edge
A Microsoft cross-platform web browser that provides privacy, learning, and accessibility tools.
2,297 questions
0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Deepak-MSFT 2,196 Reputation points Microsoft Vendor
    2021-02-19T07:36:47.033+00:00

    @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.

    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.

    4 people found this answer helpful.
  2. Anders Kåre Olsen 1 Reputation point
    2021-08-10T13:36:11.733+00:00

    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

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.