如何通过输入站点URL获取网站所有favicon图标，实现类似谷歌标签的展示效果

你现有的代码只能提取当前打开页面的favicon，要实现输入任意URL获取对应站点favicon的功能，需要先解决浏览器跨域限制的问题——浏览器默认不允许前端直接请求其他域名的HTML内容，目前有两种成熟的实现方案：

方案一：使用通用Favicon接口（最简实现，优先推荐） #

不用自己做HTML解析，直接通过公共服务规则拼接地址，95%以上的站点都能命中，适合快速实现效果：

• 通用拼接规则：你可以选择国内可用的favicon服务，拼接格式为https://favicon.im/[域名]，也可以用谷歌的favicon服务，拼接格式为https://www.google.com/s2/favicons?domain=[域名]&sz=[尺寸]，sz参数可自定义图标大小
• 优势：不需要额外搭建后端服务，前端直接拼接即可，性能高
• 劣势：只能拿到默认尺寸的favicon，没法获取站点配置的所有尺寸图标资源

可直接运行的前端Demo代码：

<!-- 页面结构 -->
<div>
  <input type="text" id="urlInput" placeholder="请输入站点URL，比如https://www.baidu.com">
  <button onclick="addTag()">添加标签</button>
  <div id="tagContainer" style="margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap;"></div>
</div>

<script>
// 提取域名的工具函数
function getDomain(url) {
  try {
    const urlObj = new URL(url.startsWith('http') ? url : 'https://' + url);
    return urlObj.hostname;
  } catch (e) {
    alert('请输入合法的URL');
    return null;
  }
}

// 添加标签函数
function addTag() {
  const inputVal = document.getElementById('urlInput').value.trim();
  const domain = getDomain(inputVal);
  if (!domain) return;
  
  // 拼接favicon地址，用国内服务为例，稳定性更高
  const faviconUrl = `https://favicon.im/${domain}`;
  
  // 生成标签元素
  const tag = document.createElement('div');
  tag.style = 'display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #eee; border-radius: 8px; background: #f5f5f5;';
  tag.innerHTML = `
    <img src="${faviconUrl}" alt="favicon" width="16" height="16" style="border-radius: 2px;">
    <span>${domain}</span>
  `;
  
  document.getElementById('tagContainer').appendChild(tag);
  document.getElementById('urlInput').value = '';
}
</script>

以上代码直接运行就能实现你要的输入URL生成带favicon标签的效果。

方案二：自建代理+HTML解析（精准获取所有favicon） #

如果需要拿到目标站点所有尺寸的favicon资源，就需要后端做代理中转请求：

• 执行流程：前端把用户输入的URL传给后端 → 后端请求对应站点的HTML内容 → 后端用你提供的解析逻辑提取所有link[rel*=icon]的href，补全为绝对路径后返回给前端 → 前端渲染标签时可选择不同尺寸的图标
• 优势：可以拿到站点配置的全部favicon，支持不同尺寸选择，准确率100%
• 注意点：后端返回前要把相对路径的href补全为绝对URL，比如站点根路径是https://a.com，href是/favicon.ico要补成https://a.com/favicon.ico

基于Node.js + Express的后端示例代码：

const express = require('express');
const axios = require('axios');
const { JSDOM } = require('jsdom');
const app = express();
const port = 3000;

// 配置允许前端跨域调用
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/getFavicons', async (req, res) => {
  const targetUrl = req.query.url;
  try {
    // 后端请求目标站点HTML，规避跨域
    const { data: html } = await axios.get(targetUrl, { timeout: 5000 });
    const dom = new JSDOM(html, { url: targetUrl });
    const document = dom.window.document;
    const favicons = [];
    const nodeList = document.getElementsByTagName('link');
    for (let i = 0; i < nodeList.length; i++) {
      const rel = nodeList[i].getAttribute('rel')?.toLowerCase();
      if (rel === 'icon' || rel === 'shortcut icon') {
        // 自动补全为绝对路径
        const href = new URL(nodeList[i].getAttribute('href'), targetUrl).href;
        favicons.push(href);
      }
    }
    // 兜底补充根路径默认favicon.ico，避免站点没配置link标签时拿不到图标
    favicons.push(new URL('/favicon.ico', targetUrl).href);
    // 去重后返回
    res.json({ success: true, favicons: [...new Set(favicons)] });
  } catch (e) {
    res.json({ success: false, msg: '请求站点失败' });
  }
});

app.listen(port);

前端只需要调用这个接口获取返回的favicon数组渲染即可，就能拿到目标站点所有的favicon地址。

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