PixRinse截图展示英文版应用。预设名称和设置项也提供应用内的本地化版本。
从这组设置开始
在 PixRinse 中选择 Favicon 全套，再按接收平台的实际要求检查以下设置。
| 网站图标 PNG | 16 / 32 / 48 px |
|---|---|
| Apple Touch 图标 PNG | 180 px |
| Web 应用程序 PNG | 192 / 512 px |
| 颜色 | sRGB |
具体操作步骤
准备正方形标志原图
使用至少与您需要的最大图标一样大的源。简化可能在 16 px 处消失的细节。
选择Favicon 全套
查看六种尺寸。该模板使用居中覆盖规则，因此可能会裁剪非方形源。
检查最小的输出
检查 16 和 32 px 文件的实际大小。自动调整大小无法取代对复杂品牌标志进行刻意的光学调整。
导出图片并在网页中引用
将 PNG 文件添加到您的网站，并在 HTML 头和 Web 应用程序清单中引用相关大小。
本教程的实际文件
这个案例的实际结果
1024 × 1024 方形标记会生成六个 PNG，而不会出现非方形源警告。每个导出的文件都包含一个 sRGB 配置文件。
- 正方形原图
- 1024 × 1024
- PNG 导出
- 6
- 色彩配置文件
- 每个输出上都有 sRGB
| 文件 | 格式 | 像素 | 字节 |
|---|---|---|---|
| android-chrome-192x192.png | PNG | 192 × 192 | 26,980 |
| android-chrome-512x512.png | PNG | 512 × 512 | 174,868 |
| apple-touch-icon.png | PNG | 180 × 180 | 23,839 |
| favicon-16x16.png | PNG | 16 × 16 | 692 |
| favicon-32x32.png | PNG | 32 × 32 | 1,751 |
| favicon-48x48.png | PNG | 48 × 48 | 3,093 |
根据所示的示例文件进行测量。您的结果取决于您的原件和设置。本演练在方形或透明样本画布上使用拥有的 PixRinse 艺术品。
常见问题
它会创建favicon.ico吗？
不会。内置预设导出六个按规则命名的 PNG 文件。
宽徽标有效吗？
建议使用正方形原图。填满画布的规则可能裁掉宽图的一部分，请仔细检查预览。