如何在不看到 CORS 错误的情况下从网站 URL 获取图标？

Question

Does anyone know how to get a favicon from a website URL without seeing a CORS error?

I'm implementing a simple chrome extension that shows a list of my bookmarks. As I wanted to display a bookmark favicon in my extension popup, I wrote a code below.

const httpRequest = new XMLHttpRequest();
httpRequest.open(
  "GET",
  "http://www.google.com/s2/favicons?domain=stackoverflow.com",
  false
);
httpRequest.send();

But I got a CORS error:

popup.js:55 Access to XMLHttpRequest at 'https://www.google.com/s2/favicons?
domain=stackoverflow.com' (redirected from 'http://www.google.com/s2/favicons?
domain=stackoverflow.com') from origin 'chrome-extension://jompmceilagkakejfedancdallnhmfog' has 
been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested 
resource.

Answer 1

Thanks to @AD7six who gave me a comment, my issue is resolved!

Based on the comment, I changed to "https", and used the tag as below.

const img = $("<img>");
img.attr("src", `https://www.google.com/s2/favicons?domain=stackoverflow.com`);

Now my extension can show the favicons! Thank you so much.

Screenshot of the extension