我参与过的每个 React 项目最终都会添加一个网站图标生成依赖。favicons 库本身会引入 sharp，而 sharp 又会引入原生二进制文件，这会在某位同事的 M1 Mac 电脑上出错，并消耗你下午的 15 分钟。我对此感到厌倦，于是仅使用 Canvas API 构建了一个零依赖的网站图标生成器。它在不到 50 行代码中就能提供现代 Web 应用所需的全部六种尺寸。
2026 年你真正需要的内容
最小网站图标集合已经扩大。以下是涵盖所有主流浏览器和平台的内容：
| 文件 | 尺寸 | 用途 |
|---|---|---|
favicon.ico |
32×32 | 旧版浏览器后备方案 |
favicon-16.png |
16×16 | 浏览器标签页（小屏幕） |
favicon-32.png |
32×32 | 浏览器标签页（标准） |
apple-touch-icon.png |
180×180 | iOS 主屏幕、Safari 浏览器 |
icon-192.png |
192×192 | Android 渐进式 Web 应用、Chrome 安装 |
icon-512.png |
512×512 | 渐进式 Web 应用启动画面 |
总共六个文件。大多数生成器会创建 15 个以上的文件——包括 manifest.json、browserconfig.xml 以及不再使用的尺寸。你不需要这些冗余内容。
Canvas API 方法
诀窍在于 Canvas 可以渲染 SVG 路径（通过 Path2D），然后以任意分辨率导出为 PNG 格式。无需文档对象模型、无需字体、无需外部库。
核心代码如下：
function generateFaviconSet(svgPathData, color = '#1e293b') {
const sizes = [
{ name: 'favicon-16.png', w: 16 },
{ name: 'favicon-32.png', w: 32 },
{ name: 'apple-touch-icon.png', w: 180 },
{ name: 'icon-192.png', w: 192 },
{ name: 'icon-512.png', w: 512 },
];
const canvas 免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
