MiServe DevTools

我的贴纸

把工具固定在这里，会保存在此浏览器中。

Favicon 与应用图标生成器

用一张图片生成整套网站图标：favicon.ico、PNG 图标、Apple touch icon、Android 图标和 maskable 图标、Web 应用清单，以及引用它们的 HTML 代码。

选项
适配方式
背景
0%
0%

用于填充 Apple touch icon 和 maskable 图标，这两种图标不能透明。

写入清单文件和 theme-color 标签。有些浏览器会用它给自己的界面着色。

显示在主屏幕的图标下方，那里大约能放下 12 个字符。

通过 WebAssembly 在浏览器中运行。粘贴的内容不会被上传。

关于此工具

各平台使用哪个文件

桌面浏览器从 <link rel="icon"> 获取标签页和书签的图标：普通屏幕上通常是 16 像素的 PNG，高分辨率屏幕上是 32 像素的 PNG。页面没有指定图标时，浏览器会改为请求 /favicon.ico。

用户把网站添加到主屏幕时，iPhone 和 iPad 使用 180 像素的 apple-touch-icon.png。Android 和已安装的 Web 应用读取 Web 应用清单中的 icons 列表：192 像素用于主屏幕，512 像素用于启动画面，启动器自行处理图标形状时则使用 maskable 图标。mstile-150x150.png 用于旧版 Windows 的磁贴，出于完整性一并提供。

为什么仍然需要 favicon.ico

对于没有 HTML head 可以指定图标的内容，比如在标签页中打开的 PDF、图片或 JSON 响应，浏览器会自行请求 /favicon.ico。RSS 阅读器、爬虫和其他工具也常常去这个位置查找。ICO 格式可以在一个文件中存放多种尺寸，这里生成的文件包含 16、32 和 48 像素三种，每种都以 PNG 数据存储；Windows 从 Vista 起就能读取这种格式，所有现行浏览器也都支持。

maskable 图标与安全区

Android 启动器会把应用图标裁成圆形、圆角方形或其他形状。普通图标为了不被裁坏，通常会被缩小并放在一块白色底板上。maskable 图标则用不透明的背景铺满整个正方形，并把所有重要内容放在安全区内：一个居中的圆，直径为图标宽度的 80%。圆以外的部分都可能被裁掉。

此工具用应用背景色填充 maskable 图标，并在你的图案四周各留出至少 14% 的边距。请查看圆形预览，如果图案的某个角被裁掉，就加大内边距。

Apple 会忽略透明

iOS 不会保留主屏幕图标中的透明像素，而是把它们涂成黑色，并且会自己处理圆角。因此这里生成的 Apple touch icon 始终是不透明的正方形，用应用背景色填充，边距至少 8%，并且不应用你设置的圆角。

运行方式

图标由编译成 WebAssembly 的 Go 图像库在浏览器的后台线程中绘制，使用 Catmull-Rom 重采样。非常大的原图会先在页面中缩小，这样每次修改都能很快重绘。你的图片不会被上传。

常见问题

原图应该多大？

512 × 512 像素或更大的正方形图片，最好是透明背景的 PNG。这套图标中最大的是 512 像素，原图更小的话就得放大，看起来会发虚。

还需要 favicon.ico 文件吗？

需要。页面或文件没有指定图标时，浏览器都会回退到 /favicon.ico，一些爬虫和 RSS 阅读器也会查找这个文件。即使你同时引用了 PNG 图标，也要把它保留在网站根目录。

这些文件放在哪里？

把它们解压到网站根目录，再把 HTML 代码片段粘贴到每个页面的 head 中。代码片段和清单使用从根目录开始的路径，例如 /favicon.ico；如果文件放在别处，请修改这些路径。

为什么浏览器还显示旧的 favicon？

浏览器会把 favicon 缓存很长时间。直接打开图标的地址（例如 /favicon.ico）并刷新，或者清除该网站的缓存。在无痕窗口中可以看到新访客看到的效果。

我的图片会被上传吗？

不会。图片由你的浏览器读取，所有图标都通过 WebAssembly 在你的设备上生成。此工具不会用这张图片发出任何网络请求。

图形分类的其他工具