网站图标（favicon）尺寸指南：需要哪些文件、多少像素

为什么 favicon 有这么多种

Favicon 是网站的小图标，出现在浏览器标签页、收藏夹、搜索结果和手机主屏幕上。它是网站的门面，缺了它总显得不够完整。

麻烦在于，每个显示位置要求的尺寸和格式都不同。所以 favicon 不是一个文件，而是一整套不同尺寸的文件。

需要准备的一套文件

• •favicon.ico — 把 16、32、48px 装进一个文件。用于地址栏、标签页和收藏夹，是最古老的标准，至今仍是必备
• •PNG 16px、32px — 现代浏览器在标签页上使用的高清版本
• •apple-touch-icon 180px — 在 iPhone、iPad 上添加到主屏幕时使用
• •PNG 192px、512px — 用于安卓主屏幕和 PWA 安装，注册在 site.webmanifest 里

源图怎么准备

正确做法是从大的正方形图片（512px 以上）往下缩。把小图放大只会变模糊。

图标在 16px 下也要能认出来，所以越简单越好。一个符号胜过一堆文字的标志；边缘留一点空白，缩小后不显得拥挤；背景保持透明，浅色深色主题都自然。

怎么写进 HTML

把生成的文件上传到网站根目录，在 HTML 的 head 里用 link 标签指向它们：rel="icon" 指向 ICO 和 PNG，rel="apple-touch-icon" 指向 180px 图标，rel="manifest" 指向 site.webmanifest。

另外，把 favicon.ico 放在网站根目录，即使不写标签，大多数浏览器也能自动找到。但要让各尺寸 PNG 和主屏图标都正常工作，还是写上标签更稳妥。

别一个个手工做

逐个缩放图片再打包成 ICO 很费事。把一张图片放进 Image Converter NOW 的 favicon 生成器，就能一次得到 favicon.ico、各尺寸 PNG、site.webmanifest 和可直接粘贴的 HTML 标签，全部打包成一个 ZIP。

所有处理都在浏览器内完成，您的标志文件不会上传到服务器。