OK, for now I’ve found a workaround. I’ve asked chatGPT to create an extension to overwrite the favicon of the current webpage with a custom icon. And when I export this webpage as App, the custom icon is used instead of the original Microsoft one. Now I will start looking into how to export this app for deployment on other laptops 
Quick guide on how to create the extension:
-
Create a folder named “favicon-changer”
-
Inside the favicon-changer folder, create a file named manifest.json with the following content:
{
"manifest_version": 3,
"name": "Favicon Changer",
"version": "1.0",
"description": "Change the favicon of any webpage easily.",
"permissions": [
"activeTab",
"scripting"
],
"action": {
"default_popup": "popup.html",
"default_title": "Change Favicon"
}
}
- Create a popup.html file with the following content:
<!DOCTYPE html>
<html>
<head>
<title>Change Favicon</title>
<style>
body { width: 200px; font-family: Arial, sans-serif; padding: 10px; }
input { width: 100%; margin-bottom: 10px; }
button { width: 100%; padding: 5px; }
</style>
</head>
<body>
<h3>Change Favicon</h3>
<input type="text" id="faviconUrl" placeholder="Enter favicon URL" />
<button id="changeFavicon">Change Favicon</button>
<script src="popup.js"></script>
</body>
</html>
- Create a
popup.js file with the following content:
document.getElementById("changeFavicon").addEventListener("click", () => {
const faviconUrl = document.getElementById("faviconUrl").value;
if (faviconUrl) {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tabId = tabs[0].id;
chrome.scripting.executeScript({
target: { tabId: tabId },
function: changeFavicon,
args: [faviconUrl]
});
});
}
});
function changeFavicon(newFaviconUrl) {
// Change the 'icon' favicon
let iconLink = document.querySelector("link[rel~='icon']");
if (!iconLink) {
iconLink = document.createElement('link');
iconLink.rel = 'icon';
document.getElementsByTagName('head')[0].appendChild(iconLink);
}
iconLink.href = newFaviconUrl;
// Change the 'shortcut icon' favicon
let shortcutLink = document.querySelector("link[rel~='shortcut icon']");
if (!shortcutLink) {
shortcutLink = document.createElement('link');
shortcutLink.rel = 'shortcut icon';
document.getElementsByTagName('head')[0].appendChild(shortcutLink);
}
shortcutLink.href = newFaviconUrl;
}
- Open Chrome or Brave and navigate to
chrome://extensions/.
- Enable Developer mode in the top right corner.
- Click Load unpacked and select the
favicon-changer folder you just created.
The extension will now appear in the extensions list and will be ready to use to replace the favicon for every webpage with a custom one.
After changing the icon, you can install the page with the new custom icon as APP as described from @erebus :
Brave has Web App Universal Install disabled by default.
So the option “Install Webpage as App” is shown only in websites that offer a PWA.
The website you mentioned doesn’t offer a PWA.
So to have this option “Install Webpage as App” shown to all websites, you need to go to brave://flags/#web-app-universal-install
and enable the option.
When you enable it, restart your browser and the option “Install Webpage as App” will be available in all websites like it is in Chrome and Edge.
Not sure if Brave Developes will consider to add the change icon option to the export functionality. But at least this seems to resolve the topic.
