# 怎么做一个到十六像素还看得清的网站图标

网站图标不是把 logo 缩小的一张图。它是一组固定尺寸的图，装在一个多数人从没打开过的容器里，而其中最小的那一张，才是所有人真正看到的。这一页讲你需要哪些尺寸、旁边还得放哪些文件，以及 logo 缩下去撑不住时该怎么办。

[打开图片转 ICO](https://abox.tools/zh/image-to-ico/): 进去一张图，出来的是浏览器、Windows 和 Mac 各自要的每一个尺寸。

最后更新 2026年8月26日

## 先说结论

打开[图片转 ICO](https://abox.tools/zh/image-to-ico/)，丢一张至少 256 像素的方图进去，预设保持*网站图标*，下载 `favicon.ico`。把它放在站点根目录，让 `https://yoursite.com/favicon.ico` 这个地址能应答。不管你的 HTML 里提没提它，每个浏览器都会去要这个地址，所以严格来说，别的什么都不用做。

下面讲的，是“技术上有这个图标”和“这个图标看得清”之间的差距：里面该装哪些尺寸、iPhone 和安卓另外要什么，以及你的 logo 缩到十六像素宽撑不住时该怎么办。

## 为什么是一组尺寸，而不是一张图

`.ico` 是个容器。里面装着同一样东西在不同尺寸下的好几张完整的图，读它的那个东西挑离自己需要最近的那一张。

听着像冗余，其实不是。一个要按十六像素画你图标的浏览器有两条路：读一张你亲手画的十六像素版本，或者当场把一张更大的缩下去。第二条更差，而且差得看得见，一个细节丰富的 logo 自动缩小之后就是一团糊，而一张你亲眼看过的十六像素版本，你至少有机会把它简化。这个格式装好几个尺寸的全部意义，就是给你这个机会。

网站的惯例是三个尺寸，每个都有来由：

- **⁦16×16⁩**，浏览器标签页、地址栏、书签菜单。这是人们真正看到的那一个。四个里你只保得住一个，就保它。
- **⁦32×32⁩**，书签栏、指向你网站的 Windows 桌面快捷方式，以及高分屏上的多数浏览器，它们是拿 32 缩下去画标签页图标的。
- **⁦48×48⁩**，Google 在搜索结果里读站点图标用的尺寸，也是 Windows 的中等图标视图。

比这更大的，该以 PNG 的形式放在 `.ico` 旁边，而不是塞进它里面，为什么，下面讲手机那几个文件时会说。

![预设列表和每个预设包含的尺寸：网站图标是十六、三十二和四十八像素，下面是文件里将放进什么的摘要。](https://abox.tools/screens/make-a-favicon/preset.webp)

一个 .ico 是个容器，这就是里面装什么的清单。预设不过是通往浏览器真正会索取的那一组的近路。

## 十六像素这道坎

这一段没人会提前告诉你。十六像素在普通屏幕上大约四毫米，一共 256 个点，比这句话里的字还少。凡是为招牌、名片或者网站页头设计的东西，缩到这个尺寸几乎没有能活下来的。

按先后顺序，消失的是这些：

- **文字。**一个文字标塞进方块里，高度大约三个像素。它不会变成小字，它会变成一道灰杠。所以几乎每个既有符号又有名字的公司，网站图标都只用那个符号；而没有符号的，就用单独一个字母。
- **细线。**一个 512 像素 logo 上的一像素描边，到十六像素时是三十二分之一个像素。它会渲染成边上一层淡淡的灰雾，或者干脆消失。
- **渐变和阴影。**根本没有过渡的余地。一层柔和的投影会变成一圈脏边。
- **细节里的细节。**一个“写着字的文档”图标，会变成一个方框加一团污渍。

解决办法不是某个设置，是另画一张：一个简化的标记，一两个形状，高对比，除了单个字符不要文字。有意识地按 32 或者 48 像素去画这一版，拿它当源图。

工具能做的，是在你发布之前把问题摆给你看。[图片转 ICO](https://abox.tools/zh/image-to-ico/) 里的预览，每个尺寸都按屏幕上的真实大小画出来，而这是判断这件事唯一的办法。一个十六像素的图标显示成六十四像素，看着都挺好，什么都说明不了。

![一条预览条，同一个标志分别画在十六、三十二、四十八、六十四和一百二十八像素上。](https://abox.tools/screens/make-a-favicon/sizes.webp)

十六像素的版本，就摆在你设计的那一版旁边。标志需不需要简化，由这张图说了算。

## logo 不是方的，该留白还是该裁？

图标永远是方的，而多数 logo 不是，所以总得动点手脚。三种答案，好坏不等。

**留白**把整张图留住，上下垫空。这是稳妥的默认选项，对一个横长的文字标却是错的：一个宽是高三倍的东西放进方块里，只占到三分之一的高度，在十六像素下，就是五个像素的 logo 加十一个像素的空。

**裁中间**取正中最大的那个方块。对一个组合标，也就是符号旁边跟着公司名的那种，这一刀往往两边都切着。更好的办法是自己先把源图裁到只剩那个符号，再拿去转。

**拉伸**把画面挤成方的。几乎没有哪种情况下它是对的，之所以还提供，主要是为了让工具不至于一声不吭就替你这么干。

横长 logo 的通用答案是：别拿整个 logo 去转。拿它身上单独拎出来也立得住的那一块去转。

## 透明还是纯色底？

网站图标一般该用透明。浏览器标签栏因浏览器和主题不同，可能是灰的、白的或者近黑的，而一个透明图标在哪一种上都待得住。一个把白底画进去的图标，在深色标签栏里就是一个白方块。

有两个例外值得知道：

- **纯深色、别的什么都没有的 logo**，在深色模式下会消失。你的标记本来就是白底黑图的话，给它配个彩色底，而不是透明底，或者加一圈浅色描边。
- **Apple touch icon 必须不透明。**iOS 会把它画在自己那个圆角磁贴上，透明会被渲染成黑色。凡是能生成这个文件的工具，都该替你把它压平，这里的这个会，默认压到白色上。

## 一个网站需要的、.ico 之外的那些文件

`favicon.ico` 管得了浏览器和 Windows，管不了手机，而多数自己动手做的图标套件，就停在这儿了。另外三个平台各要各的文件，各有各的名字，而且它们谁都不会去看 `.ico` 里面：

- **iOS** 在有人把你的站添加到主屏时，读 ⁦180×180⁩ 的 `apple-touch-icon.png`。没有它，iOS 就拿页面截图顶上，看着像出了什么岔子。
- **安卓和各种安装提示**读的是 Web 应用 manifest，也就是 `site.webmanifest`，它指向 192 和 512 像素的 PNG。那个 512 也是 Web 应用启动画面上显示的那张。
- **Windows 开始菜单磁贴**读 `browserconfig.xml`，它指向一张 ⁦150×150⁩ 的 PNG。三者里最不要紧的一个，也就四行 XML。

还有一个特别容易做错：安卓的启动器会把自适应图标裁成手机喜欢的形状，圆形、方圆形、圆角方形都有可能，而只有画面中间那 80% 是保证留得住的。一张画得顶到边的图标会被削掉四角。所谓 *maskable* 图标就是这么回事：同一张图，有意识地在方块里画小一圈，并在 manifest 里单独声明。

在[图片转 ICO](https://abox.tools/zh/image-to-ico/) 里勾上网站套件，这些、manifest，还有指向它们的那段 HTML，全都给你。那段 HTML 里有一样是故意不写的：`favicon.ico` 的 `<link>`。浏览器本来就会自己去要那个地址，再写一遍，等于同一个文件被取两次。

## Windows 应用图标是另一套尺寸

图标要是给程序用而不是给网站用，尺寸就变了。Visual Studio 自带那个默认 `app.ico` 里装的是 16、32、48 和 256，也就是三个外壳尺寸，加上开始菜单和资源管理器超大图标视图要用的那个大的。

高分屏下 Windows 还会要 20、24、40、64 和 96，缺了就拿最接近的尺寸重采样。这要不要紧，取决于你的图标：形状扁平的挺得过重采样，细节多的挺不过。把它们加上，文件大约翻一倍，而对一个应用来说这根本不算什么。这笔账跟网站图标完全是两回事，网站图标是每个访客都要取一次的。

关于体积还有一点：字节都压在那个 256 的条目上。不压缩存，它自己就 264 KB；在图标里按 PNG 存，通常不到 30。PNG 条目从 Windows Vista 起就读得了，所以不用它的唯一理由，是软件真的比那还老，或者是某个自己解析图标的安装程序、嵌入式工具。

## Mac 读的完全是另一个文件

图标要是给 Mac 应用而不是 Windows 应用用的，上面那些一条都不适用：macOS 根本不读 `.ico`。它读 `.icns`，换了个壳的同一个思路，一个容器里装好几个尺寸，有三点不同值得知道。

- **尺寸是定死的。**苹果公开的就是十个槽位，没什么可挑：16、32、64、128、256、512 和 1024 像素，其中 32、256 和 512 各出现两次，因为它们既是自己那一档，又是下一档的 Retina 版本。
- **它一直做到 1024。**`.ico` 到 256 就封顶了，所以一个 Mac 图标文件动辄几百 KB，而一个网站图标只有十几 KB。对一个只发布一次的应用，这不算什么；只有网站图标才是每个访客都要取的。
- **1024 像素是你的图稿必须扛得住的尺寸。**这两个问题是同一张图的两端：网站图标得在极小时还能用，Mac 图标得在极大时还立得住。一个按 512 导出、再吹到 1024 的 logo，在 Retina 屏上发糊，App Store 也不收。

怎么用：应用包把它放在 `YourApp.app/Contents/Resources/`，并在 `Info.plist` 里写上名字。给文件夹或者磁盘映像换图标，就在访达里选中那个 `.icns`，按 Command-C，然后对着要换的东西“显示简介”，点左上角那个小图标，按 Command-V。

在[图片转 ICO](https://abox.tools/zh/image-to-ico/) 里勾上 *macOS 图标*就能出一个，旁边要不要 Windows 那个文件随你。两个平台都发的东西，两个文件都要，而且它们是同一趟里、从同一张图画出来的。

## 检查它到底生效了没有

浏览器缓存网站图标的劲头比缓存别的什么都大，所以“我传上去了，可什么都没变”，通常是缓存的事，不是你做错了。重新去改文件之前，先试两件事：

- 直接打开 `https://yoursite.com/favicon.ico`。文件能下下来，说明它在那儿，你看到的是缓存。要是 404，那就是没放在根目录。
- 用无痕窗口打开你的站，那里通常有自己独立的图标缓存。

在 Windows 上，把 `.ico` 放进一个文件夹，然后在资源管理器里切换视图大小：小、中、大、超大分别从同一个文件里取不同的条目来画，于是每一张你都能按系统实际显示的样子看到。

在 Mac 上，`.icns` 用预览打开，侧边会把每个槽位都列出来。访达里也有同样的招：把它丢进一个文件夹，拖动视图选项里那个尺寸滑块，就能看着它在里面那几张图之间切换。

## 这些事一样都不用上传

缩放一张图，浏览器干了很多年了；而一个 `.ico` 无非是六个字节的文件头、每张图十六个字节的条目，然后就是那些图。做它的过程里没有哪一步需要服务器，这里的工具也确实没用：页面的 `Content-Security-Policy` 把它可能联的地址全列了出来，没有一个是本站的。

这件事在这儿比在别处更值得在意。交给免费网站图标生成器的那个 logo，相当多的时候属于还没发布的品牌，图标往往是最早做出来的东西之一，也是最晚公布的东西之一。与其听我们说，不如把页面打开，拔掉网线，照做一个试试。[把文件传给在线转换器安全吗？](https://abox.tools/zh/guides/is-it-safe-to-upload-files/)里还有另外三个检查，用在任何工具上都管用。