如何从网站提取非favicon图标？以Modrinth为例求助

单图标手动提取 #

• 打开目标页面，按F12唤起浏览器开发者工具
• 点击Elements标签页左上角的选择工具，选中你需要的图标
• 在右侧面板找到图标对应的图片链接：如果是img标签，复制src属性；如果是背景图，从background-image样式里提取链接
• 复制链接到新标签页，右键保存图片即可

批量提取图标 #

浏览器控制台脚本法 #

• 打开页面后按F12切换到Console标签页
• 粘贴以下代码并执行（可根据页面实际元素类名调整选择器）：

// 适配Modrinth mods页面的图标选择器，可根据实际情况修改
const iconElements = document.querySelectorAll('.project-card__icon img');
const iconUrls = [];

iconElements.forEach(el => {
  const url = el.src;
  if (url) iconUrls.push(url);
});

// 打印所有图标链接
console.log(iconUrls);

// 自动下载所有图标（可选，需允许浏览器弹窗）
iconUrls.forEach((url, idx) => {
  const link = document.createElement('a');
  link.href = url;
  link.download = `mod-icon-${idx + 1}.png`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

• 执行后，控制台会输出所有图标链接，脚本也会自动触发下载（若浏览器阻止，需允许该站点的下载权限）

API调用法 #

Modrinth提供公开API，可通过接口批量获取mod图标链接：

• 调用mod列表接口，返回的每个mod数据中icon_url字段即为对应图标链接，可批量获取后下载

注意事项 #

• 提取前请确认Modrinth的版权许可条款，确保个人项目使用这些图标符合要求
• 若页面图标是懒加载模式，需滚动页面加载全部mod内容后再执行提取操作

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