网站需要哪些 favicon 图标文件，各尺寸是多少
网站只需要一小组图标文件，而且大部分决定都与尺寸有关。在网站根目录放一个 favicon.ico，里面包含 16、32 和 48 像素的图像，用于浏览器标签页和 Windows。再添加一个 180 像素的 Apple 触摸图标，供 iPhone 和 iPad 主屏幕使用，并在网页应用清单中列出 192 和 512 像素的 PNG 图标。Favicon 图标生成器可以用一张标志一次生成所有这些文件，并写出要粘贴到页面中的 HTML 代码。
Favicon 图标生成器网站需要 favicon 图标免费使用文件及其尺寸
| 文件 | 尺寸 | 用途 |
|---|---|---|
| favicon.ico | 16、32 和 48 像素，合并在一个文件中 | 浏览器标签页和 Windows |
| favicon-32x32.png | 32 像素 | HTML 中链接的 32 像素图标 |
| favicon-16x16.png | 16 像素 | 包含在 ZIP 中，但不在 HTML 中链接 |
| apple-touch-icon.png | 180 像素 | iPhone 和 iPad 主屏幕 |
| android-chrome-192x192.png | 192 像素 | 在清单中列出 |
| android-chrome-512x512.png | 512 像素 | 在清单中列出 |
| site.webmanifest | 文本文件 | 记录 192 和 512 像素图标的信息 |
生成器下载的 ZIP 包含全部七个文件。favicon.ico 由三张 PNG 图像组成，尺寸分别为 16、32 和 48 像素，并存放在同一个文件中。每个图标都是同一张标志的缩小版。生成器先根据你的图片制作一个 512 像素的版本，再从它生成各个尺寸。
HTML 代码
生成器会写出四行代码，放在页面的 head 部分：
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">第一行指向 favicon.ico，并声明其尺寸为 48×48。第二行指向 32 像素的 PNG。第三行指定 Apple 触摸图标，第四行指向清单文件，其中列出了 192 和 512 像素的图标。16 像素的 PNG 在 ZIP 中，但不在这几行代码里。浏览器还会自动查找 /favicon.ico，因此即使缺少第一行，文件通常也能被找到。除非你的文件存放在其他位置，否则请保持路径不变。
为什么小尺寸要用简单的图形
在 16×16 像素下，图标总共只有 256 个像素。48 像素的图标有 2,304 个像素，512 像素的源图有 262,144 个像素。缩小到 16 像素时，标志中的大部分细节都会丢失，细线条或小字会变成一团模糊。因此，请使用简洁的标志，或者使用一到两个对比度强的字母。
字母模式可输入一到两个字符，并将其放大绘制在图标中央，如果太宽则会自动缩小。形状可选方形、圆角方形和圆形。预览会并排显示 16、32、48、180 和 512 像素的效果，并提供浅色与深色两种标签页，让你在下载前就能判断小尺寸的效果。调整形状、留白或背景时，预览会实时更新，方便先逐一试看。
留白、背景与 Apple 图标
留白有三个选项：无留白、小和大。“小”会在图标四周各留出 10% 的空白，“大”则留出 20%。在图片模式下，选择“无留白”会将图片裁切为中心的正方形，因此宽幅标志的两端会被裁掉。选择带留白的选项则会把整张图片完整地放进正方形中。
背景选项有透明、白色和自定义，默认为透明。Apple 触摸图标始终是不透明的。在图片模式下，它的透明区域会使用所选背景色；如果背景为透明，则使用白色。在字母模式下，它们使用字母的背景颜色。Apple 触摸图标中的透明区域在 iPhone 和 iPad 上可能显示为黑色，因此生成器会将其填充。其他尺寸则保留你选择的透明效果。透明 PNG 为什么变成黑色解释了其中的原因。
favicon 是正方形的，因此宽幅标志需要先加上正方形边框。照片转正方形可以把整张图片放进 1:1 的画框中，边框可选模糊、白色、黑色或自定义，确保不会切掉任何内容。调整图片尺寸可以设置精确的像素值。开启“保持比例”并同时填写宽和高后，图片会在框内完整显示，且不会变形。照片常见的宽高比介绍了常见的比例。
需要时间才能生效的更改
浏览器会缓存 favicon。同一地址下文件更改后，旧图标可能会继续显示一段时间，因此普通刷新往往不够。可以直接打开图标地址，确认服务器上已是新文件，然后绕过缓存刷新页面。如果旧图标仍然显示，可以为新文件换一个名字，并更新链接指向它。
在 fixmint 中操作
- 选择图片，把标志拖到方框中；或选择字母，输入一到两个字符。
- 将留白设为无留白、小或大，将背景设为透明、白色或自定义颜色。
- 在浅色和深色标签页中检查 16、32 和 48 像素的图标，以及 180 和 512 像素的预览。
- 点击下载 ZIP获取全部七个文件，或点击下载 favicon.ico只获取该文件。
- 点击复制 HTML，并将页面 head 的 HTML 中的代码粘贴到每个页面的 head 部分。
特殊情况
- 你的图片只保存在你的设备上。 生成器在浏览器中制作图标，不会上传任何内容。
- 两个字符的字母。 可以输入两个字符，但会缩小绘制以便都能放下，因此在 16 像素下比单个字母更难辨认。
- 文件名。 请保留 HTML 中使用的文件名，因为链接指向的就是这些名字。
- 无法读取的文件。 如果图片无法制作成图标，生成器会显示提示“无法用此输入制作图标，请尝试其他图片。”并清空输出结果。请换一个文件，或以常见格式重新保存该图片。
由 AI 辅助翻译自英文原文。
评论
还没有评论。快来抢沙发。
