如何用 PNG Logo 制作 favicon.ico
favicon 是显示在浏览器标签页、书签和搜索结果中网站名称旁边的小图标。如果没有它,浏览器会显示一个通用的空白页面图标,让网站看起来像是还没做完。
本文介绍如何把 PNG 或 JPG 格式的 Logo 转换为规范的 favicon.ico,并添加到任意网站。
favicon 需要哪些尺寸?
浏览器会以不同尺寸显示 favicon:标签页中为 16×16 像素,高分辨率屏幕和部分书签中为 32×32,Windows 中为 48×48,快捷方式则使用更大的尺寸。
一个 ICO 文件可以包含多种尺寸,由浏览器挑选最合适的那个。PixShift 生成的 ICO 文件会自动包含 16、32、48 和 256 像素四种版本。
准备图片
- 使用正方形图片。如果 Logo 不是正方形,会被居中放置,四周以透明区域填充。
- 原图至少为 256×256 像素,这样大尺寸也能保持清晰。
- 尽量简洁。细小的文字和细线在 16 像素下会消失,因此单个字母或符号往往效果最好。
- 如果希望图标在浅色和深色浏览器标签页中都显得自然,请使用透明背景的 PNG。
将 PNG 转换为 ICO
- 打开 PixShift 的 PNG 转 ICO 转换器。
- 把 Logo 拖入方框,浏览器会立即生成 ICO 文件。
- 下载文件,并将其重命名为 favicon.ico。
把 favicon 添加到网站
- 将 favicon.ico 上传到网站根目录,使其可以通过 https://your-site.com/favicon.ico 访问。
- 在页面的 <head> 部分中加入下面这行代码。
- 刷新网站。如果仍显示旧图标,请清除浏览器缓存或在无痕窗口中打开网站;浏览器对 favicon 的缓存非常顽固。
<link rel="icon" href="/favicon.ico" sizes="any">现代浏览器还需要 ICO 吗?
现代浏览器也支持 PNG 和 SVG 格式的 favicon。不过,放在网站根目录的 favicon.ico 仍然是兼容性最好的选择:一些工具、RSS 阅读器和旧版浏览器会专门查找这个文件。许多网站会同时提供 ICO 和 SVG 或 PNG 版本。