API for changing the folder icon for Favorites / Bookmarks

[cburkitt]

I'd like to change the icon used for folders in Favorites. The yellow folder icon has recently been replaced by a minimalist outline, which I don't like at all. I looked through the Bookmarks API documentation but there is nothing there about the icons. Please can someone tell me if this is possible? Thank you.

[ManikanthMSFT]

Hi @cburkitt, thank you for your feedback. We’ve forwarded your comments to our team and will get in touch with you once we have an update.

Also, could you please confirm whether you are building an extension or would you like this to be changed in the edge settings/ platform API's?

[cburkitt]

Thank you, @ManikanthMSFT. I was assuming that this would be best tackled via an extension, so I am intending to build one. However, when I investigated which Edge properties an extension is able to modify, I couldn't see an available property for the folder icon, hence my question.

[ManikanthMSFT]

Hi @cburkitt, we appriciete your patience.We got an update from our team and unfortunately, as of now, Microsoft Edge does not provide a built-in feature or an API to directly change the icons of folders in the Favorites bar. This limitation means that even through an extension, modifying the folder icons is not currently possible.

However, there is a workaround you might find useful. You can use emojis in the folder names to give them a more personalized look. Here's how you can do it:

1. Right-click on the folder in the Favorites bar.
2. Select "Rename."
3. Use the Windows emoji picker (Win + .) to add an emoji to the folder name.

While this doesn't change the icon itself, it can help make your folders more visually distinctive.

Additionally, if you're interested in customizing favicons for individual bookmarks, you can use the Favicon API in a Chrome or Edge extension. Here's a brief overview of how you can do this:

• Update the Manifest: Request the "favicon" permission in your extension's manifest file.

{
"name": "Favicon API Example",
"manifest_version": 3,
"permissions": ["favicon"],
"web_accessible_resources": [
{
"resources": ["_favicon/*"],
"matches": ["<all_urls>"]
}
]
}

• Construct the URL: Use runtime.getURL() to create a URL pointing to the "_favicon/" folder, and set the necessary query parameters.

function faviconURL(u) {
const url = new URL(chrome.runtime.getURL("/_favicon/"));
url.searchParams.set("pageUrl", u);
url.searchParams.set("size", "32");
return url.toString();
}

const img = document.createElement('img');
img.src = faviconURL("https://www.example.com");
document.body.appendChild(img);

This method allows you to fetch and display favicons for different websites.

I hope this helps! If you have any further questions or need additional assistance, please feel free to ask.

[cburkitt]

Thank you for your help, @ManikanthMSFT.
It's disappointing that the folder icons can't be changed. It would be a good customization option to have.
Nevertheless, thanks very much for your full response.

[ManikanthMSFT]

Hi @cburkitt, we will take this as feedback and will forward this to our team for further consideration.