Inconsistent Favicon Fetching

[uiuc-kys2]

I'm using node-vibrant in a web extension where one of the functions is to get the Vibrant color from a tab's favicon.

While it works well for many sites, a lot of sites, such as Google, Amazon, and Squarespace throw the error Error: Fail to load image: [url of favicon] at HTMLImageElement.e.complete.e.onerror ([filename].js:[line]), yet when I click on the link in the error message, I always see the favicon without any issues.

My best guess is that the constructor isn't waiting long enough for the HTTP request for the favicon URL to resolve. Is there any workaround for this?

Code:

browser.tabs.onUpdated.addListener((tabId, changeInfo, tabInfo) => {
	if (changeInfo.favIconUrl) {
		Vibrant.from(changeInfo.favIconUrl)
			.quality(1)
			.getPalette()
			.then(palette => {
				console.log(palette);
			})
			.catch(err => {
				console.log(err);
			});
	}
});

Edit: I tried waiting for a tab to be completely loaded to see if I could take advantage of browser caching but it didn't change anything.

browser.tabs.onUpdated.addListener((tabId, changeInfo, tabInfo) => {
	if (changeInfo.status === "complete") {
		if (tabInfo.favIconUrl) {
			Vibrant.from(tabInfo.favIconUrl)
				.quality(1)
				.getPalette()
				.then(palette => {
					console.log(palette);
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
});

[uiuc-kys2]

Delete. Found out it was a silent CORS issue when debugging with XMLHttpRequest.