2026 favicon 最佳尺寸 — 多尺寸 ICO + apple-touch-icon + SVG 现代栈
Tomoda Hinata工具作者与维护者发布于 2026年4月26日约 3 分钟阅读
以前根目录放一个 16×16 的 favicon.ico 就够了，现在的浏览器栈期待多尺寸 ICO（16/32/48）、iOS 主屏的 apple-touch-icon、任何尺寸都清晰的 SVG favicon，以及（可选）PWA 安装的 manifest 图标。
本指南使用的工具
现代标签页实际用的尺寸
Chrome/Edge 16 或 32，Firefox 16/32，Safari 16/32，Windows 任务栏固定 48。ICO 包含 16/32/48 即可覆盖桌面。
apple-touch-icon 不可省
iOS 找不到时会用页面缩略图（左上角低质截图）。180×180 PNG 是精确目标尺寸。
SVG favicon — 矢量 + 免费暗色
Firefox 41+/Chrome 80+/Safari 9+/Edge 80+ 支持。SVG 内 `<style>` 加 `prefers-color-scheme` 即随系统切换。
PWA manifest 图标
192×192 + 512×512 PNG，由 manifest.webmanifest 引用。
最小现代写法
head：SVG → ICO → apple-touch-icon → manifest（PWA）。
操作步骤
约 1 分钟拖入 512×512 正方形母版
正方形必需。
生成多尺寸 ICO
16/32/48 合一。
生成 apple-touch-icon
180×180 PNG，圆角由 iOS 自动加。
放进站点根目录
并按上面写法在 head 中引用。
| 资源 | 大小 | 用途 |
|---|---|---|
| favicon.ico (16+32+48) | 5–8 KB | 标签/收藏/固定 |
| favicon.svg | 1–4 KB | 矢量 + 暗色 |
| apple-touch-icon.png | 8–15 KB | iOS 主屏 |
| icon-192.png | 10–18 KB | PWA Android |
| icon-512.png | 25–60 KB | PWA 启动屏 |
常见问题
有了 favicon.svg 还要 ICO 吗？
要。旧浏览器和一些链接预览仍期待 /favicon.ico。
为什么是 180×180 而不是 192？
iPhone 高分辨率主屏的原生目标。
要不要在 ICO 里加 64？
看 IE 占比；一般可省。
SVG 暗色模式怎么写？
在 SVG 中加 `@media (prefers-color-scheme: dark)`。
ICO 支持透明？
现代 ICO 支持 alpha。
会上传吗？
不会。
立即试用
Turn any image into a multi-size ICO file
ICO / Favicon Maker本文包含 AI 翻译，如发现错误欢迎告知。