生成Favicon网站图标

一个图标为什么变成了九个文件

整套中的每个文件都有明确的读取方，而且各自只读自己那一个。favicon.ico内含16、32和48三个尺寸，至今仍是浏览器默认在网站根目录查找的文件，也是大量旧软件首先检查的文件。favicon-16x16.png和favicon-32x32.png是当前浏览器更偏好的标签页图标，因为尺寸精确的PNG胜过缩放。180像素的apple-touch-icon.png是iOS放到主屏幕上的图标——它不支持透明，所以会被合成到纯色背景上，而不是带着黑色边角出现。android-chrome-192x192.png和512x512.png是已安装的渐进式Web应用（PWA）用作启动器图标和启动画面的图片，在site.webmanifest中声明。

所有地方都只用一张大PNG，是最常见的偷懒做法，结果处处都不理想。浏览器为了画16个像素下载半MB的文件，iOS不理会透明规则、把您的Logo放在黑色方块上，启动器图标又被平台套用的遮罩裁掉。整套文件之所以繁琐，正是因为每个使用方都有自己的讲究。

HTML代码片段和图片同样重要。浏览器大多不会自己找到这些文件——只有根目录下的favicon.ico是按惯例被发现的——所以要靠link标签把它们关联起来，manifest也需要单独一个标签。代码片段使用相对于根目录的路径，只要文件放在网站根目录就无需改动；如果放进子文件夹，代码片段和manifest中的路径都需要相应调整。

先按16像素来设计。在这个尺寸下，只容得下一个形状，最多两种颜色——不能有文字、渐变或细节，更不能放完整的文字Logo。至少512像素的正方形、醒目、高对比度原图，或者一个SVG，能生成最干净的整套图标；预览会如实而不是美化地展示16px效果，因为日后最让您失望的就是这个尺寸。非正方形原图会用透明区域补成正方形，而不会被裁剪或拉伸。

如果您需要的是别的

这里生成的是实用的现代核心套装。如果您需要完整的长尾部分——Windows磁贴图片、Safari固定标签页的遮罩图标、Microsoft browserconfig、旧版Apple尺寸——RealFaviconGenerator全都涵盖，还能在之后检查您的线上网站，这确实是本工具做不到的有用功能。

对于构建流程来说，手动生成图标根本就是错误的工作方式。favicons、pwa-asset-generator以及基于sharp的各种框架插件，每次部署都会从同一个源文件生成整套图标，这样Logo更换时图标也不会过时——而在实际中，图标过时几乎总会发生。