Favicon 工坊：一个纯前端的网站图标提取工具

在 Web 开发中，我们经常需要获取其他网站的 Favicon（网站图标），用于书签展示、链接预览、网站目录等场景。但现有的在线工具要么需要注册登录，要么会收集用户数据，使用体验并不理想。

为了解决这个痛点，我开发了 Favicon 工坊 —— 一个纯前端、隐私安全的在线工具，可以快速从任意网站提取并下载 Favicon。

在线体验：https://favicon.shiguang666.eu.org/

GitHub: https://github.com/Shiguang-coding/favicon-tool

🎯 项目背景

开发这个工具的初衷很简单：

1. 隐私安全：所有处理都在浏览器本地完成，不上传任何用户数据
2. 使用便捷：打开网页就能用，无需注册、无需安装
3. 功能全面：支持多种数据源、多种尺寸、多种导出格式
4. 视觉美观：提供 8 套精心设计的主题，满足不同审美需求

✨ 核心功能

多源智能获取

Favicon 工坊内置了多个图标获取服务：

服务	说明
icon.horse	高质量图标服务，默认首选
favicon.so	备选图标服务
favicon.ico	直接请求目标网站的 /favicon.ico

工具会自动轮询这些服务，确保高成功率。如果对当前结果不满意，还可以一键手动换源，透明显示当前数据源及进度。

灵活的尺寸调整

支持 16px 到 512px 的自由缩放，同时提供常用尺寸的快捷预设：

• 16×16（浏览器标签页）
• 32×32（任务栏图标）
• 48×48（桌面图标）
• 64×64（中等尺寸）
• 128×128（较大尺寸）
• 180×180（Apple Touch Icon）
• 192×192（Android PWA）
• 256×256（Windows 磁贴）
• 512×512（高分辨率）

多格式导出

支持四种主流图片格式：

• PNG：无损压缩，质量最佳
• JPG：有损压缩，文件更小
• WebP：现代格式，兼顾质量和大小
• ICO：传统图标格式，兼容性最好

丰富的主题系统

内置 8 套精心设计的主题，满足不同场景和审美需求：

1. 经典街机 - 复古游戏风格
2. 暗夜霓虹 - 赛博朋克风格
3. 复古街机 - 怀旧像素风
4. 日式侘寂 - 简约日式风格
5. 赛博终端 - 黑客帝国风格
6. 极光渐变 - 自然色彩渐变
7. 瑞士极简 - 包豪斯设计风格
8. 温暖工坊 - 温馨手工风格

🛠️ 技术实现

纯前端架构

整个工具只有一个 index.html 文件，无需服务器、无需数据库、无需后端 API。这意味着：

• 零依赖：不需要 Node.js、Python 或其他运行环境
• 即时部署：可以放在任何静态托管服务上
• 离线使用：下载后可以直接在浏览器中打开
• 隐私保护：所有数据处理都在本地完成

现代 CSS 特性

项目充分利用了现代 CSS 特性，实现了优雅的视觉效果：

/* CSS 变量实现主题切换 */
:root {
    --bg: #1a1147;
    --surface: #221658;
    --text: #e0e0ff;
    --accent: #00f0ff;
}

/* 毛玻璃效果 */
backdrop-filter: blur(12px);

/* 平滑过渡动画 */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

响应式设计

完美适配从手机到桌面的各种屏幕尺寸：

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 16px;
    }
}

📖 使用指南

使用 Favicon 工坊非常简单：

1. 输入网址：在输入框中输入目标网站地址（支持 github.com 或 https://apple.com 格式）
2. 点击提取：工具会自动从最优源获取图标
3. 预览调整：查看图标效果，调整尺寸或切换数据源
4. 选择格式：根据需要选择 PNG、JPG、WebP 或 ICO 格式
5. 一键下载：点击下载按钮保存图标

🚀 部署方式

在线体验

访问：https://favicontool.shiguang666.eu.org

本地运行

# 直接双击 index.html 打开
# 或使用本地服务器
npx serve .

一键部署

支持一键部署到 Vercel：

📝 开源协议

项目采用 MIT 协议开源，你可以自由使用、修改和分发。

• GitHub 仓库：shiguang-coding/favicon-tool
• 问题反馈：GitHub Issues

💡 总结

Favicon 工坊是一个小而美的工具项目，它解决了 Web 开发中的一个常见痛点，同时在用户体验和视觉设计上下了不少功夫。如果你也有类似的需求，不妨试试这个工具。

如果你觉得这个项目对你有帮助，欢迎给个 Star ⭐ 支持一下！