如何使用JS 获取网站的图标

要获取网站的图标，可以使用以下两种方法：

1. 通过网站的favicon图标

每个网站都可以设置自己的favicon图标，浏览器会在加载网站时自动请求该图标。因此我们可以使用JS从DOM中获取该图标的链接，然后通过HTTP请求获取该图标的二进制数据。

以下是一个实现例子：

function getFavicon(url) {
  return new Promise(function(resolve, reject) {
    const link = document.querySelector(`link[rel='icon'][href='${url}/favicon.ico']`) ||
                 document.querySelector(`link[rel='shortcut icon'][href='${url}/favicon.ico']`);

    if (!link) {
      reject(new Error(`Favicon not found for ${url}`));
      return;
    }

    const xhr = new XMLHttpRequest();
    xhr.open('GET', link.href, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(`Failed to load favicon for ${url}`));
      }
    };
    xhr.onerror = function() {
      reject(new Error(`Failed to load favicon for ${url}`));
    };
    xhr.send();
  });
}

2. 通过预定义的图标链接

一些网站会设置一个特定的图标链接，用于提供网站的图标。例如，Google的图标链接为https://www.google.com/s2/favicons?domain=example.com，其中example.com为网站域名。我们可以直接使用该链接获取网站的图标。

以下是一个实现例子：

function getIcon(url) {
  return new Promise(function(resolve, reject) {
    const link = `https://www.google.com/s2/favicons?domain=${url}`;

    const xhr = new XMLHttpRequest();
    xhr.open('GET', link, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(`Failed to load icon for ${url}`));
      }
    };
    xhr.onerror = function() {
      reject(new Error(`Failed to load icon for ${url}`));
    };
    xhr.send();
  });
}

以上两种方法都可以获取网站的图标，但第二种方法更简单易用，而且更可靠。