- favicon 不是一张图,而是一套:老式的
favicon.ico、几个 PNG 尺寸,外加一张给主屏幕和 PWA 用的大图。 - 用方形的、对比强的源图生成。在 512px 好看的细节,缩到 16px 会糊成一团。
.ico仍然有用:不少爬虫、订阅器和老浏览器就是按这个名字来取的。- 留意留白。贴边的 logo 在标签页里看着像被裁掉,留几个百分点就正常了。
favicon 是站点里最小的资源,也是最显眼的:每个浏览器标签页、每条书签栏、越来越多的聊天预览里都有它。它同时也是最容易被做错的资源——丢一张 512px 的 PNG 进去改名成 favicon.ico 就算完事,结果是标签页图标发虚,而按约定来取图标的工具拿到 404。
真正需要的几档尺寸
| 资源 | 出现在哪 | 不做会怎样 |
|---|---|---|
| favicon.ico(16/32/48) | 浏览器标签页、书签、老式爬虫。 | 有些阅读器显示成通用地球图标,而不是你的标志。 |
| png 32x32 | 高分屏下的现代标签页渲染。 | 16px 图标被拉大,看起来是虚的。 |
| png 180x180 | iOS 主屏幕、部分社交预览。 | 「添加到主屏幕」会截屏当图标。 |
| png 512x512 | PWA manifest、安卓安装提示。 | 安装提示退化成占位图。 |
怎么生成这一套
从方形源图开始
长条 logo 会被补边或压扁。先裁成正方形,让标志居中。
在本地生成
在浏览器里跑生成器:缩放发生在你自己电脑上,未公开的品牌标志不会被上传。
先调留白,再看 16px 预览
判断标准是最小那一档,不是最大那一档。16px 看不清,就简化标志或去掉文字。
放好文件并引用它们
把 .ico 放到站点根目录,PNG 显式引用;生成器给的 HTML 片段已覆盖标准写法。
浏览器本地处理,保护隐私
免费 Favicon 生成器
用 logo、图标或图片在本地生成 favicon.ico 和常用 PNG 尺寸。
免费 Favicon 生成器
工具在本地浏览器里运行,不上传文件。加载后即可使用。
要测的是标签页,不是文件
最后一个验收动作不是「下载成功」,而是**正常窗口宽度下的浏览器标签页**。离屏幕两米看一眼:认不出那是什么,就说明图标细节太多了。
常见问题
能直接用 PNG 当 favicon.ico 吗?
可以把 link 指向 PNG,但按约定仍会有请求来找名为 favicon.ico 的文件。两个都给成本为零,却能消掉一类 404。
为什么 favicon 换了不生效?
浏览器缓存图标非常狠。强刷一次,或者直接打开图标地址,确认服务端已经是新文件。
生成要消耗积分吗?
不用。生成器在你的浏览器本地运行。只有用 AI 3D 生成器 生成新模型时才消耗积分。
下一步
图标弄好之后,其他资源也可以照这个「本地优先」的思路处理:用 GLB 检查器 验模型、用 GLB 转 STL 转换,或者去 图片转 3D 生成器 生成一个。格式怎么选见 GLB、STL、OBJ 对比指南。
