Favicon 生成器

为什么仍然需要一整套 favicon

网站图标早已不只是浏览器标签上的小图。它出现在搜索结果中域名旁边、收藏夹里、iOS 用户把网站添加到主屏幕时的图标位、Android 的 PWA 安装卡片上。每个场景需要的尺寸不同，少数场景还要求略不同的格式。只放一个 favicon.ico 在视网膜屏和可安装 PWA 上会留下肉眼可见的毛刺。

本工具一键产出整套现代图标：兼容旧浏览器的 ICO、对应现代 <link rel=“icon”> 栈的多尺寸 PNG、iOS 用的 apple-touch-icon，以及写明站点名称、start_url、display 与 192、512 图标的 webmanifest，这些正是 Chrome 提示安装网站前检查的字段。

HTML 片段说明

生成的代码片段约 7 行，覆盖每个现代场景：

• <link rel=“icon” type=“image/x-icon” href=“/favicon.ico”> — 老浏览器和仍优先解析 favicon.ico 的收藏夹的兜底。
• <link rel=“icon” type=“image/png” sizes=”…”> 16/32/48 三档 — HTML 标准把选择权交给浏览器。2026-10-02 实测，2× 屏上的 Chromium 152 在有 ICO 链接时只请求 favicon.ico，只有 PNG 链接时请求 favicon-32.png。
• <link rel=“apple-touch-icon”> 180×180 — iOS Safari 在「添加到主屏幕」时使用。
• <link rel=“manifest”> — Android Chrome 和 PWA 安装器读取 site.webmanifest，里面写着「站点名称」栏的名称、“start_url”: ”/”、“display”: “standalone”，并用 purpose: “any” 声明 192 与 512 PNG。「站点名称」留空时不写 name 与 short_name，Chrome 不会提示安装网站。
• <meta name=“theme-color”> — 控制移动端浏览器地址栏与已安装 PWA 标题栏的颜色。

图标包是怎么生成的

渲染器对每个目标尺寸单独建立 canvas，应用所选的背景与形状蒙版，按 padding 偏移把素材居中绘制，再调用 canvas.toBlob(‘image/png’) 取得紧凑的 PNG 数据。16/32/48 三个 PNG 通过 PNG 压缩条目格式打包成单一 favicon.ico——三段 PNG 数据接在 ICONDIR 头和三条 16 字节 ICONDIRENTRY 之后。

ZIP 写入器使用 STORED 方法（不做 DEFLATE）：PNG 本身已经是压缩格式，再做 DEFLATE 收益不足 1%，却要多带 5 KB 代码。文件名在通用位标志中标记 UTF-8，确保未来你给文件改名时非 ASCII 名称也不会乱码。

隐私与离线

• 页面从不上传你的文件。打开浏览器网络面板观察——点击 Generate 时不会发出任何请求。
• 页面缓存后可离线工作。Canvas API、ZIP 与 ICO 写入器全部内联在页面包里。
• 只统计使用量。与其他工具页一样，本页加载 Google Analytics；工具只记录一次 generate 和一次 download 事件，事件只含工具名和操作，不含你的图片。

常见坑

• SVG 含外链图片。 当 SVG 引用 <image href=“https://…”> 时浏览器拒绝把 canvas 读回为 blob（跨域污染）。粘贴前先把外链图片转成 Data URI 内联。
• Linux 工作机上 emoji 显示空框。 某些 IT 管控的 Linux 发行版未预装彩色 emoji 字体。预览会显示空框，切到 Text 或 Image 标签即可绕过。
• 16 px 上的细节会消失。 线宽小于 1.5 px 在 16×16 上会消失。如果 32 上清晰、16 上没了，把设计简化或用背景色提供分割。