把 PNG 转成 ICO 以获得清晰的 favicon
favicon 是赋予网站视觉标识的那张小小的图片。你会在浏览器标签页中页面标题旁看到它，在你的书签列表里，在浏览历史的地址栏下拉菜单中，有时还会在搜索结果旁。它虽小，却做了很多事：一个可辨认的 favicon 能帮助用户在十几个标签页中找到你的那一个，并示意一个网站是完成的、被用心打理的。那个小图标的经典格式是 ICO，而制作它最简单的方法，就是从一张干净的方形 PNG 开始并进行转换。
本工具接受一张 PNG 图片，并在你的浏览器内部把它变成一个 ICO favicon。转换使用你自己的设备在本地运行，所以你选的图片绝不会被上传到服务器。当你的图标是一个标志或品牌资源、宁愿不交给第三方时，这一点很重要。文件准备好后，你只需下载即可。
ICO 格式是什么，以及它为什么能容纳多个尺寸
ICO 是一种源自微软 Windows 的图标容器格式，在 Windows 中它存储用于程序、快捷方式和文件夹的图标。它的标志性特点，也是它成为网页 favicon 标准的原因，是单个 ICO 文件可以一次性容纳同一张图片的多个分辨率。文件不是只有一张固定的位图，而是打包了一小组方形图像，让浏览器或操作系统挑选最适合它需要绘制图标之处的那个尺寸。
这确实有用。浏览器标签页需要一个很小的图标，书签栏可能用一个稍大一点的，而桌面上一个固定的快捷方式可以要求一个更大的。有了多尺寸的 ICO，每种场景都抓取适合它的版本，所以你的图标保持锐利，而不是从一张小位图放大上去、变得模糊。ICO 还保留透明度，这能让圆形或不规则标志的边角在任何标签页颜色下都保持干净。
推荐的 favicon 尺寸
对于一个网站 favicon，值得包含的三个尺寸是 16x16、32x32 和 48x48 像素。16 像素的版本是大多数浏览器在标签页和地址栏中显示的那个。32 像素的版本用于更高分辨率的显示屏，以及某些书签和历史视图中，所以它在现代屏幕上保持清晰。48 像素的版本覆盖更大的场景，比如 Windows 网站快捷方式。因为它们全都存在于同一个 ICO 文件里，你只需交付单一资源，让每个界面选取它所需要的。
从一张方形 PNG 开始，这样就不会有东西被拉伸。如果你的源图片是矩形或过大的，请先用我们的图片调整尺寸工具把它裁剪或缩放成一个干净的正方形，然后再运行转换。一个简洁、高对比度的设计在 16 像素下比一张细致的插画好认得多，所以要偏好醒目的形状而非细小的文字。
如何把 favicon 添加到你的网站
有了 ICO 文件之后，把它上传到你的网站，传统上放在站点根目录下命名为 favicon.ico。许多浏览器会自动在那里找到它，但最佳实践是在你 HTML 的 head 中明确声明它，这样就不会有猜测的余地。添加一个这样的 link 标签：
<link rel="icon" type="image/x-icon" href="/favicon.ico">
把那一行放在你页面的 <head> 部分内。rel="icon" 属性告诉浏览器这个资源是页面图标，而 href 指向你存放文件的位置。如果你使用上面那样的根相对路径，同一条声明就能在你网站的每个页面上生效。部署之后，你可能需要做一次强制刷新或清除缓存，新图标才会出现，因为浏览器会顽固地缓存 favicon。
在你的浏览器中私密转换
一切都发生在你的设备上。你选择的 PNG 在本地被读取、解码并重新编码为 ICO，整个过程中没有任何内容离开你的机器。没有账户，没有排队，也没有服务器端存储，这使得它即便对于未发布的标志或受协议约束的客户工作也很方便。要了解更多准备和整理图形的方法，请浏览我们全套的图片工具。
常见问题
我的图片会被上传到某个地方吗？
不会。PNG 完全在你自己设备上的浏览器中被转换成 ICO。没有任何内容被发送到服务器，也没有任何内容被存储，所以你的图片保持私密。
我的 favicon 应该包含哪些尺寸？
最有用的尺寸是 16x16、32x32 和 48x48 像素。16 像素的图像显示在浏览器标签页中，而较大的那些则让图标在高分辨率显示屏和桌面快捷方式上保持清晰。
为什么用 ICO 而不只是用一张 PNG？
ICO 是长期沿用的 favicon 格式，它可以在一个文件中存储多个尺寸。浏览器和操作系统会挑选适合每种场景的分辨率，所以图标保持清晰，而不是从单张位图缩放而来。
ICO 会保留我 PNG 中的透明度吗？
会。ICO 格式支持透明度，所以你 PNG 中透明的区域会被保留，图标能与任何标签页或背景颜色干净地融合。
我该如何把 favicon 添加到我的网站？
把 ICO 文件上传到你的网站，通常作为根目录下的 favicon.ico，并在你 HTML 的 head 中添加一个 link 标签，例如 link rel icon type image x-icon href 斜杠 favicon.ico。然后清除你的浏览器缓存以看到它。
我的源图片不是正方形。我该怎么办？
先把它裁剪或缩放成正方形，这样它就不会被拉伸。你可以用我们的图片调整尺寸工具制作一个干净的正方形，然后把它转成 ICO，以得到最好看的 favicon。