网站图标（favicon）是浏览器标签页中页面标题旁边的小图像。完整的文字标识缩到这么小时，往往会变成难以辨认的一团。本教程会带你制作一个简单的字母图标、下载可用文件、从两种方式中选择一种完成安装，并检查实际结果。
完成后你将得到：一个已解压的图标文件夹，以及你自己网站上显示的图标。如果网站由其他人维护，你将得到正确的文件和一份明确的安装请求。
你需要：浏览器、更新网站的权限，以及 WordPress 管理员权限，或者一位能更新网站 HTML 和资源文件的维护人员。使用 Favicon.io 制作这些文件是免费的，但这不包含网站托管服务。
研究状态：官方文档已于 2026 年 10 月 22 日核对。编写此草稿时，尚未实际使用生成器、操作 WordPress 设置或核验浏览器中的最终显示结果。以下步骤经过资料研究，但不表示已经完成端到端安装测试。
1. 制作一个缩小后仍清晰的图标
打开 Favicon.io 文字图标生成器。先试用下面的练习设计：
- 文字：F
- 背景：圆角
- 文字颜色：#FFFFFF
- 背景颜色：#153E4E
- 字体：选择一种简单、粗体、容易看清的字体
如果你愿意，也可以使用自己企业名称的首字母。调整字号，让字母四周留有空间。第一次尝试时，用一个清晰的字母通常比把完整企业名称硬塞进方形画布更合适。这些只是示例设计，并不是指定的品牌颜色。
请查看最小的预览，不要只看大图。字母还能分辨吗？有没有碰到边缘？如果不够清楚，先简化设计再下载。生成器支持文字、背景形状、字体设置和 HEX 颜色值。查看生成器说明
已经有标志了吗？可以将简洁的方形版本放入图像转换器。不要上传没有裁剪的标志照片，也不要使用细长的横向文字标识。请确认你有权使用该图像。
2. 下载并解压文件
在生成器中选择 Download。在浏览器的下载列表中找到 ZIP 文件，然后使用电脑自带的 ZIP 功能打开或解压。请保留解压后的文件夹，不要只保留 ZIP。
根据 Favicon.io 当前文档，下载包包含：
favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest这些文件适用于不同尺寸和场景。例如，Apple 触控图标为 180 × 180 像素；最后一个 PNG 为 512 × 512 像素。完成浏览器标签页图标这项基本任务，不需要安装所有文件。查看下载包内容
用图像查看器打开 android-chrome-512x512.png。确认它是你刚才想要的图标，而不是以前下载的版本。如果第二次下载的 ZIP 文件名带有编号，请检查里面的内容，不要直接假定它就是正确版本。
3. 选择一种安装方式
方式 A：使用 WordPress 内置的 Site Icon 设置
请选择这种方式，不要直接修改主题文件。
- 在 WordPress 中，将解压后的
android-chrome-512x512.png上传到媒体库。Favicon.io 特别推荐将此文件作为 WordPress 的源图像。不要把 ZIP 文件直接当作图标上传。 - 在 WordPress 6.5 或更高版本中，打开 Settings → General（设置 → 常规），找到 Site Icon（站点图标）。
- 选择刚上传的图像。完成可能出现的选择或裁剪步骤，然后在常规设置页点击 Save Changes（保存更改）。保存常规设置
- 在新标签页中打开公开网站。
WordPress 要求使用至少 512 × 512 像素的正方形图像。在 4.3 到 6.4 版本中，文档所示路径是 Appearance → Customize → Site Identity（外观 → 自定义 → 站点标识）。如果你的账户看不到这些控件，请把文件发给网站管理员。不要为了绕过权限不足而安装插件或更换主题。WordPress Site Icon 说明
如果你使用的其他建站工具提供 favicon 或站点图标上传控件，请按照该工具当前的官方文档操作。WordPress 的菜单路径并不适用于所有平台。
方式 B：你负责维护 HTML 和公开文件的网站
请在你通常使用的预览和审核流程中完成这项更改。保留原来的图标和标记，以便需要时恢复。
- 把
favicon.ico放到网站的公开根目录，使它最终可以通过https://你的域名/favicon.ico访问。 - 在各页面共用的 HTML
<head>中加入下面这一行：
<link rel="icon" href="/favicon.ico">- 如果现有图标标签指向其他位置，请更新原本应该使用的那一行，不要不断添加相互冲突的版本。
- 通过网站现有的发布流程发布已经批准的更改。
开头的斜杠表示域名根目录。某个框架的源代码文件夹可能叫作 public，也可能使用其他名称；源代码中的文件夹路径并不一定等于公开 URL。如果网站部署在子目录中，请向维护人员确认最终路径。MDN 页面元数据说明
如果还要明确提供 PNG 和 Apple 触控图标，可以上传对应文件并使用：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">只为你确实安装过的文件添加链接。安装浏览器标签页图标并不要求覆盖现有的 site.webmanifest。该文件可能已经包含 Web 应用名称、图标或启动设置。除非你同时负责维护这些配置，否则请保持不变。Favicon 实现参考
4. 证明它确实生效
请按顺序完成以下检查：
- 文件检查（方式 B）：打开实际的
/favicon.ico地址。你应该能看到或下载图标，而不是遇到 404、登录页面或普通网页。 - 页面检查：在一个新的无痕或隐私窗口中打开网站，查看浏览器标签页。隐私窗口有助于检查缓存，但不能保证绕过所有缓存。
- 小尺寸检查：新建一个书签，在浏览器显示书签图标的位置查看它。确认设计在这个尺寸下仍能识别。
- 第二页面检查：访问另一个页面。图标不应该只有在首页才出现。
如果图标 URL 无法访问，请先修正文件位置或链接，再考虑修改设计。如果文件正确但标签页仍显示旧图标，请关闭旧标签页并在新会话中重试；favicon 缓存可能不会因为普通刷新而立即清除。ICO 安装与故障排查
这些步骤不能保证搜索引擎何时显示该图标，也不能保证每种设备的显示方式完全相同。
完成标准：正确的图像文件可以打开；在新的访问会话中能看到预期图标；你也保留了源文件。如果需要维护人员安装，请发送：“请通过网站内置的站点图标设置使用这个 512 × 512 PNG，或者安装随附的 ICO，并在新的浏览器会话中核验。”