站点上线,标签页上一直没有图标。翻出设计师给的 logo.png,直接把后缀改成 .ico 丢进根目录,刷了半天还是空白。
ico 不是改个名字就能用。它是容器格式,里面可以塞多个尺寸的位图,16、32、48、256 各一份,系统和浏览器按场景挑合适的那张。单张 png 硬改后缀,有的浏览器勉强能读,但缩放发虚,Windows 桌面快捷方式更是直接报格式无效。
生成一张像样的 ico
在线转换最省事,传 png 选多尺寸输出,注意看有没有保留透明通道。本地装了 ImageMagick 的话,一条命令能指定尺寸列表直接输出。写 Python 脚本用 Pillow,读入图片后缩放成几档再保存,批量处理一堆图标很快。
放哪里才生效
站点根目录放一个 favicon.ico,浏览器默认会去这个路径取,不用写标签。想用别的文件名,就在 head 里加 link 标签,rel 写 icon。改完记得强刷,或者开个无痕窗口看,浏览器对图标缓存特别顽固。
系统图标从哪来
Windows 自带的图标都打包在系统目录的图标资源库里,用资源查看类工具能导出成 ico,做本地小工具够用。要注意版权,系统图标拿去做商业产品的 Logo 是不行的。
判断真假 ico
很多下载站给的文件其实是 png 换了扩展名,拖进图标设置里就提示格式无效。看文件头最快,真正的 ico 开头是 00 00 01 00 这四个字节,用十六进制查看器一开就知道。
与其到处找下载,不如拿一张 256 像素的方图自己转一份,尺寸齐、透明对、版权也干净。