← 全部指南

如何用 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

  1. 打开 PixShift 的 PNG 转 ICO 转换器。
  2. 把 Logo 拖入方框,浏览器会立即生成 ICO 文件。
  3. 下载文件,并将其重命名为 favicon.ico。

把 favicon 添加到网站

  1. 将 favicon.ico 上传到网站根目录,使其可以通过 https://your-site.com/favicon.ico 访问。
  2. 在页面的 <head> 部分中加入下面这行代码。
  3. 刷新网站。如果仍显示旧图标,请清除浏览器缓存或在无痕窗口中打开网站;浏览器对 favicon 的缓存非常顽固。
<link rel="icon" href="/favicon.ico" sizes="any">

现代浏览器还需要 ICO 吗?

现代浏览器也支持 PNG 和 SVG 格式的 favicon。不过,放在网站根目录的 favicon.ico 仍然是兼容性最好的选择:一些工具、RSS 阅读器和旧版浏览器会专门查找这个文件。许多网站会同时提供 ICO 和 SVG 或 PNG 版本。

用 PNG 制作 favicon →

相关指南

如何在 Windows 10 和 11 上打开 HEIC 文件在 Windows 10 和 11 上打开 iPhone HEIC 照片或将其转换为 JPG 的 3 种简单方法。阅读指南 →如何让 iPhone 照片保存为 JPG 而不是 HEIC把 iPhone 相机设置为拍摄 JPG,并将已拍摄的 HEIC 照片转换为 JPG。阅读指南 →WEBP 文件是什么?如何转换?为什么下载的图片是 WEBP 格式、哪些软件能打开,以及如何转换为 JPG/PNG。阅读指南 →