在浏览器里生成多尺寸 ICO 网站图标

ICO 里通常该有什么

经典 favicon.ico 内嵌多种分辨率，好在高分屏标签、收藏和桌面快捷方式上保持清晰。只塞一张被放大的 16×16，看起来会发糊、过时。

WebP.Best 提供 Favicon（16/32/48）、标准（加 64）、完整（最高 256）等套餐，覆盖常见浏览器与 Windows 场景，不必手动画每一档。

• 浏览器标签 → Favicon 套餐里的小尺寸
• 快捷方式 / 部分系统表面 → 标准或完整套餐
• 源文件 → 尽量用清晰的方形标或图形符号

准备源图

从方形或接近方形、边缘干净的母版开始。透明 PNG/WebP 很合适。信息很满的照片当 16px 图标通常很弱——先简化或裁到主图形。

若只有横向字标，强制变方时会出现留边或裁切。转换前先想清楚：图标要符号，还是缩写字母标。

在 WebP.Best 上的步骤

打开首页转换器，加入 Logo 文件（透明 PNG 或 WebP 最合适）。输出格式选 ICO。

选尺寸套餐：Favicon（16/32/48）应付浏览器标签；标准套餐多 64 px，适合快捷方式；完整套餐最高 256 px，Windows 图标更清晰。不必自己导出每一档，套餐会打进一个 .ico。

选正方形如何填充：「完整显示（留边）」保住整标，源图不是方形时会有空白边；「铺满裁切」放大填满方框，可能切掉边缘——简单符号比长文字更适合裁切。

转换后下载 .ico，在浏览器标签里看最小尺寸是否还认得。全程在本机完成。

完整显示和铺满裁切，怎么选

可以把图标想成固定大小的方框。「完整显示」把 Logo 缩小到能完整放进框里——不会切掉内容，但宽 Logo 可能上下留空、高 Logo 可能左右留空。

「铺满裁切」先放大到铺满方框，再把多出来的边切掉。圆形符号、单字母标通常好看；字很多的长条 Logo 在 16 px 时可能被切掉笔画。

打包前必须先做成严格方形？展开「高级选项」，选「指定宽高」（例如 512×512），再选铺满裁切或等比放入，先转成 PNG，再用这张方图做 ICO。若默认套餐已经够用，可跳过这步。

• 只有横向字标 → 优先完整显示，或先做方形符号版
• 偏 App 图形的圆标 → 铺满裁切往往更饱满
• 拿不准 → 先试完整显示；只有留边很丑时再换铺满裁切

放到网站上

把 favicon.ico 放在站点根目录，或在 HTML head 里正确链接。很多静态托管也接受 PNG favicon；ICO 对旧收藏夹和部分桌面场景仍有用。

部署后请强制刷新或用无痕窗口验证：浏览器缓存图标非常凶。「上传了还是旧图标」多半是缓存，不一定是 ICO 坏了。

做不到的事

这条路径做静态图标。它不帮你做品牌设计、不自动抠图、也不生成 SVG。极细的线条在 16px 可能消失——务必看最小尺寸。

打包在本地完成，套餐尺寸写清楚。若还要做手机「添加到主屏幕」图标，有时需另外准备 PNG，单靠一个 ICO 未必够用。