如何在 WordPress 中添加网站图标

从 WordPress 4.3 开始，核心提供了 Site Icon 功能，可以为您裁剪、调整大小和注入正确的 <link> 标签。标准站点不需要插件。使用我们的[favicon生成器]（工具：favicon-generator）、[PNG到ICO转换器]（工具：png-to-ico）、[SVG到ICO转换器]（工具：svg-to-ico）和[实时favicon测试器]（实用程序： favicon-test）来创建和验证您的图标集，并阅读[配套指南]（指南：favicon-for-wordpress）以获取简明演练。

下载的图标存储在媒体库中，并通过前端的 wp_site_icon() 引用。 WordPress 发布时会生成多个服务器端尺寸。

该功能取代了大多数博主、代理机构和 WooCommerce 商店的手动 favicon.ico 上传。

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

在 wp-admin 中，转到外观 → 自定义 → 站点标识 → Site Icon。

单击选择 Site Icon 并上传至少 512 × 512 像素的正方形 PNG。 WordPress 显示实时裁剪：将徽标置于方形安全区域的中心。

单击发布。下次加载前端页面时，Core 会生成一个 Apple-Touch 图标、不同尺寸的 PNG 和元标记。

对于每个部分的图标或子目录标记，请在子主题functions.php中过滤get_site_icon_url()。

示例用例：多站点网络，其中每个子站点需要不同的品牌但共享一个主题。根据blog_id返回不同的URL。

高级团队可以删除默认的站点元图标并在 header.php 中打印自定义 <link> 标记，但这会重复已经运行良好的工作核心。

单个博客：通过定制器上传 512 × 512 PNG。完成 - 无需 FTP，无需编辑 .ico。

WooCommerce 商店：相同的流程；检查支付和帐户页面上的图标，而不仅仅是主页上的图标。缓存插件有时会延迟 CSS，但很少会阻止图标标签。

Headless WordPress：Site Icon 标签仅出现在 PHP 渲染的页面上。您的 Next.js 前端必须在此架构中声明自己的 <link> 标记。

登台 → 生产：重新加载或迁移媒体 ID。仅当您了解 CDN 缓存失效时，才对绝对图标 URL 进行硬编码。

流行的 SEO 插件也可能会暴露 favicon 参数。避免以不同方式配置 SEO 插件并Site Icon – 选择事实来源。

缓存插件（WP Rocket、W3 Total Cache）不应阻止图标文件，但它们可以缓存 HTML 而不需要新标签，直到被清除。

Favicon 插件在 WordPress 4.3 之前就有意义。到 2026 年，除非您需要动画或计划的图标交换，否则它们将是多余的。

我应该上传什么类型的文件？ PNG最安全。 WordPress 接受 JPG，但会失去透明度。

最小尺寸？官方尺寸为 512x512；较大的来源可以很好地缩小规模。

WordPress会创建favicon.ico吗？它发出 PNG 大小和元标签。通过托管或子主题将真正的 .ico 放置在网络根目录中，浏览器仍然会受益。

多站点：每个站点在其自己的定制器中都有自己的 Site Icon。网络管理员是按站点定义的，除非主题全局过滤 URL。

浏览器将 favicon 与 HTML 分开缓存。发布到WordPress后，强制重新加载或在私人窗口中进行测试。

仅当您手动启动标签时，才将 ?ver=2 添加到图标 URL。 Site Icon URL 包含重新导入时会更改的查询参数。

如果 HTML 仍然引用旧的附件 URL，请清除 WordPress 对象缓存和任何 CDN（Cloudflare、Jetpack Boost）。

如果您已迁移域，请检查数据库中序列化选项中的旧图标 URL：某些导入程序缺少 siteicon_id。

上传后图标模糊：源图像小于 512x512 或不是正方形。从更伟大的大师那里重生自己。

Google 结果中没有图标：Google 使用自己的缓存；更新 Site Icon 后请求在 Search Console 中重新建立索引。

桌面上有图标，但 iPhone 上没有：iOS 需要 Apple-Touch 图标；确认Site Icon已发布，而不仅仅是在定制器中保存为草稿。

徽标周围的白色框：上传的 JPG 为白色背景，而不是透明PNG。

WordPress 托管主机（WP Engine、Kinsta、SiteGround）在边缘缓存HTML。更改Site Icon后，清除所有主机仪表板缓存。

Cloudflare 橙色云代理可以缓存 HTML，而不缓存图标 /wp-content/uploads/ – 一般情况下没问题，但当图标附件 URL 更改时会清除。

默认情况下，多语言插件（WPML、Polylang）不会为每种语言重复 Site Icon。图标适用于所有区域设置，除非您过滤 URL。

基本或无头配置可以移动下载。在 CDN 期望的 HTML 前端确认媒体 URL。

如果您正在进行静态导出（简单静态、WP2Static），请在图标更改后重新生成导出，以便 HTML 离线获取新的附件 ID。

只有具有自定义功能的用户（通常是标准安装的管理员和编辑者）才能修改Site Icon。作者不能在没有高权利的情况下交易商标。

在多站点上，超级管理员可以在网络范围内上传主题，但 Site Icon 保留在每个站点上，除非自定义代码共享附件 URL。

审核隐藏外观的第三方管理主题 → 自定义。您可能需要重新启用定制器或使用定制器深层链接 ?autofocus[section]=title_tagline。

将站点移交给客户时，请在自定义中实时记录 favicon 的更改，而不仅仅是在媒体库中：在此处上传 PNG 而不分配 Site Icon 不会执行任何操作。

WooCommerce 结账台使用与商店其他部分相同的主题。 Site Icon 自动出现在购物车和感谢页面上。

覆盖前端模板的会员插件应始终调用 wp_head() 来获取 Site Icon 元输出。

白标客户门户有时会删除品牌挂钩：如果客户上传自己的图标，请验证订户角色上的个性化功能是否未禁用。

电子邮件模板不使用 Site Icon。 WooCommerce 电子邮件徽标是外观 → 自定义 → WooCommerce 下的单独设置。

如果您已经通过 FTP 将 favicon.ico 上传到 Web 根目录，Site Icon 不会将其删除。浏览器可能会以不可预测的方式更喜欢一种来源而不是另一种来源。

选择一种方法：要么依赖 Site Icon PNG 输出，要么在根部保留手工制作的 ICO 并进行匹配设计。质量控制后删除重复项。

header.php 中带有硬编码 rel=icon 链接的经典主题可以对抗核心 Site Icon。启用Site Icon时删除手动标签。

迁移后，清除缓存并在隐私浏览中进行测试，看看哪个图标获胜。

在操作手册中记录您选择的方法，以便下一个开发人员不会添加第二个冲突的 favicon 插件。