如果你曾把昂贵的公司Logo直接传到网站上，却发现Safari标签页里只剩下一团模糊的马赛克——你不是一个人。浏览器在把图片缩小到16x16像素时是非常残酷的。你不能指望随便塞一张高清PNG，浏览器就能奇迹般地把它处理好。

看看支付宝。他们的完整Logo包含“支付宝”三个字。但在浏览器标签页里？只有一个清爽的“支”字。他们很清楚，文字在16像素下会变成微观垃圾。你必须做减法。

我强烈建议不要用Photoshop等桌面软件来做这件事。要导出包含多分辨率的ICO文件，你需要装一堆冷门的插件，而且导出的文件通常大得离谱。相反，我们将演示如何使用Mzu favicondl create favicon online step by step（分步在线制作Favicon）。

准备工作：处理你的源图片

在打开浏览器之前，你需要准备好正确的文件。如果你丢给生成器一张糟糕的图，出来的也只会是垃圾。你需要满足以下条件：

如何分步在线制作Favicon

我们开发Mzu favicondl就是为了解决图标生成中那些烦人的琐事。以下是我在每个新项目中都会使用的标准工作流。

第一步：上传与裁剪

将准备好的SVG或PNG拖入Mzu favicondl的上传区。工具会立即解析图片。如果你的图片不是正方形，UI会提供一个裁剪工具。永远把你的图标居中，但千万别让它紧贴画布的边缘。

第二步：调整内边距（Padding）

这是大多数开发者会跳过的一步。iOS和Android经常会用圆角或圆形来遮罩你的图标。如果你的Logo一直延伸到图片边缘，操作系统就会把它的角切掉。在中心图形周围留出大约10%到15%的透明内边距。

第三步：配置暗黑模式

如果你的Logo是纯黑色的，它在暗色主题的标签页上会完全消失。Mzu favicondl允许你指定背景色，或者专门为暗黑主题生成反色的SVG。我通常会选择透明背景，并给深色Logo加一圈白色的描边。

第四步：生成与下载

点击生成按钮。工具不会给你塞30个没用的旧版尺寸，而是打包好你真正需要的现代配置：一个可缩放的SVG、一个180x180的Apple Touch Icon、一个供Android使用的Web Manifest，以及一个兼容旧版浏览器的多尺寸ICO文件。

部署生成的代码

下载文件只完成了一半。现在你需要把它们接入到HTML中。解压下载的ZIP文件，把内容移动到你Web服务器的根目录（通常是public或dist文件夹）。

必须的HTML代码片段

打开你的index.html（或框架的基础模板），把下面的代码粘贴到<head>标签里：

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>
<link rel='manifest' href='/site.webmanifest'>

注意，我们没有使用古老的rel='shortcut icon'属性。那是IE5时代的遗物，现代浏览器完全无视它。老老实实用标准的icon就行了。

需要避免的常见坑

缓存噩梦

你上传了新文件，刷新了页面，结果旧图标还在。别慌。浏览器为了节省带宽，对Favicon的缓存极其激进。你可以阅读我们的强制清除Favicon缓存指南，但在开发阶段最快的解决办法是在HTML链接后面加个查询字符串，比如href='/favicon.svg?v=2'。

使用完整的Logo

我经常在初级开发者的个人主页上看到这个问题。他们试图把自己的全名塞进一个16x16像素的方块里。看起来就像个条形码。如果你需要关于简化图形的更多建议，可以看看我们关于如何从图片制作Favicon的指南。

别再把浏览器标签页的视觉体验当成儿戏了。一个清晰、内边距合理的图标能立刻建立用户的信任。拿起你的Logo，删掉文字，用生成器跑一遍，这花不了你五分钟。