如何在不借助API的情况下用JavaScript获取网站图标？

当然可以不依赖Google这类第三方API实现，核心逻辑是抓取目标网站的HTML源码，解析其中定义的Favicon相关标签，下面是具体实现步骤和代码：

核心思路 #

网站的Favicon通常会通过HTML的<link>标签声明，常见的标签格式包括：

• <link rel="icon" href="xxx.ico">
• <link rel="shortcut icon" href="xxx.png">
• <link rel="apple-touch-icon" href="xxx.png">
  如果没有找到任何声明标签，再 fallback 到传统的/favicon.ico路径。

具体实现代码 #

1. 获取目标网站的HTML内容 #

注意：浏览器前端直接请求第三方网站会触发同源策略限制，必须通过后端代理转发请求（比如用Node.js/PHP写个简单的代理接口）。

async function getWebsiteHTML(url) {
  // 这里的 /proxy 是你自己搭建的后端代理接口，负责转发请求并返回HTML
  const response = await fetch(`/proxy?url=${encodeURIComponent(url)}`);
  if (!response.ok) throw new Error('无法加载目标网站内容');
  return await response.text();
}

2. 解析HTML提取Favicon路径 #

用浏览器原生的DOMParser解析HTML，找出所有和图标相关的<link>标签：

function extractFaviconPaths(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  // 匹配所有rel属性包含"icon"的link标签
  const iconLinks = doc.querySelectorAll('link[rel*="icon"]');
  
  const paths = [];
  iconLinks.forEach(link => {
    const href = link.getAttribute('href');
    if (href) paths.push(href);
  });
  
  // 没有找到任何声明时， fallback 到默认路径
  if (paths.length === 0) paths.push('/favicon.ico');
  return paths;
}

3. 把相对路径转为绝对URL #

提取到的路径可能是相对路径，需要用URL对象转为绝对地址：

function resolveAbsoluteUrl(baseUrl, relativePath) {
  try {
    return new URL(relativePath, baseUrl).href;
  } catch (err) {
    // 解析失败时，直接返回默认的favicon路径
    return new URL('/favicon.ico', baseUrl).href;
  }
}

4. 整合完整函数 #

async function getFaviconUrls(targetUrl) {
  try {
    const html = await getWebsiteHTML(targetUrl);
    const relativePaths = extractFaviconPaths(html);
    // 把所有相对路径转为绝对URL
    return relativePaths.map(path => resolveAbsoluteUrl(targetUrl, path));
  } catch (error) {
    console.error('获取Favicon失败:', error);
    // 最终兜底方案
    return [new URL('/favicon.ico', targetUrl).href];
  }
}

注意事项 #

• 跨域问题：前端无法直接请求非同源网站的HTML，必须依赖后端代理。如果是做浏览器扩展或本地应用，可以绕过同源限制。
• 图标优先级：可以根据<link>标签的rel属性或size属性排序，优先选择高分辨率的图标（比如带size="192x192"的）。
• 特殊情况：部分网站会在manifest.json里定义图标，你可以额外解析这个文件获取更多图标路径。

内容的提问来源于stack exchange，提问作者Nurvy Gamedev