WordPress 网站添加 Favicon 完整教程：自定义器、代码方法与问题排查

Q: WordPress 可以使用 SVG favicon 吗？

WordPress 出于安全考虑，默认不支持上传 SVG 文件。你可以通过 functions.php 手动添加 SVG favicon 支持，或使用支持 SVG 上传的插件。

Q: 如何在 WordPress 中为深色和浅色模式设置不同的 favicon？

使用内嵌了 prefers-color-scheme CSS 媒体查询的 SVG favicon。由于自定义器只支持 PNG/ICO 格式，需要通过 functions.php 手动添加 SVG 文件。

在 WordPress 中添加 favicon 只需大约 30 秒：进入外观 → 自定义 → 站点身份 → 站点图标，上传一张 512x512 的 PNG 图片，点击发布即可。

但如果这个方法不管用，或者你需要更多控制权，请继续往下看。有一些细节值得了解。

快速方法：使用 WordPress 自定义器

这个方法适用于 WordPress 4.3 及以上的所有版本（4.3 发布于 2015 年）。只要你的 WordPress 不是特别老旧的版本，都可以使用。

第一步：打开自定义器

在 WordPress 后台进入 外观 → 自定义
或者在前台浏览网站时，点击管理员工具栏中的"自定义"

第二步：找到站点身份

在自定义器侧边栏中点击 站点身份（Site Identity）
向下滚动到 站点图标（Site Icon）

第三步：上传图片

点击 选择站点图标
上传一张至少 512 x 512 像素 的 PNG 图片
WordPress 会自动生成所有需要的小尺寸版本（包括 32x32、180x180 等）
如果需要裁剪，按提示操作，然后点击发布

完成了。WordPress 会处理剩下的事情——自动生成浏览器 favicon、Apple Touch Icon 甚至 Windows 磁贴图标所需的 <link> 标签。

代码方法：手动添加 Favicon

有时候自定义器的方式不够用。比如你在开发自定义主题，或者主题覆盖了默认行为。下面是用代码添加的方法。

方案 A：将文件放入主题目录

将 favicon 文件上传到主题的根目录，然后在主题的 functions.php 中添加以下代码：

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

方案 B：使用 SVG Favicon

SVG favicon 可以完美缩放，并且支持深色模式。在 functions.php 中添加以下代码：

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

PNG 回退方案是为 Safari 准备的，因为 Safari 目前仍不完全支持 SVG favicon。

使用插件（如果你喜欢的话）

有一些插件可以处理 favicon，但说实话，内置的自定义器对大多数网站来说已经够用了。插件适合以下场景：

不同的页面或文章需要不同的 favicon
对不同图标进行 A/B 测试
多站点网络中每个子站点需要独立的 favicon

常用插件包括 All in One Favicon 和 Flavor（原名 flavicon）。不过建议先试试自定义器。

WordPress 区块主题（全站编辑）

如果你使用的是区块主题，如 Twenty Twenty-Four 或 Twenty Twenty-Five，操作流程略有不同：

进入 外观 → 编辑器
点击样式（半圆形图标）
导航到网站的全局样式
站点图标设置仍在 外观 → 自定义 → 站点身份 中

区块主题仍然使用自定义器来设置 favicon。WordPress 目前还没有将这个功能迁移到站点编辑器中。

文件	尺寸	用途
`favicon.ico`	16x16, 32x32	兼容旧版浏览器
`favicon-32x32.png`	32x32	现代浏览器
`apple-touch-icon.png`	180x180	iOS 主屏幕图标
`android-chrome-192x192.png`	192x192	Android 主屏幕图标
`android-chrome-512x512.png`	512x512	Android 启动画面
`favicon.svg`	可缩放	现代浏览器、深色模式

常见问题排查：Favicon 不显示

清除所有缓存

WordPress favicon 问题几乎都和缓存有关：

浏览器缓存：使用 Ctrl+Shift+R（Windows）或 Cmd+Shift+R（Mac）强制刷新
WordPress 缓存：如果使用了 WP Super Cache、W3 Total Cache 或 LiteSpeed Cache，清除缓存
CDN 缓存：Cloudflare、Fastly 或其他 CDN，清除 favicon 相关的 URL 缓存
试试无痕模式：打开一个干净的无痕窗口，没有任何缓存文件

检查插件冲突

一些 SEO 插件和主题框架会注入自己的 favicon 标签。如果你在页面源代码中发现了重复的 <link rel="icon"> 标签：

查看页面源代码（Ctrl+U）
搜索"icon"或"favicon"
如果有重复，检查是哪个插件添加的
禁用该插件的 favicon 功能，或删除你手动添加的代码

主题覆盖问题

部分主题（尤其是付费主题）有自己的 favicon 设置，会覆盖自定义器的配置。检查以下位置：

主题选项 面板中是否有 favicon 设置
主题的 header.php 中是否有硬编码的 <link rel="icon"> 标签
查阅主题文档中关于 favicon 的说明

常见问题排查：Google 显示错误的 Favicon

Google 更新搜索结果中的 favicon 可能需要数天到数周。以下是加速更新的方法：

Google 的 Favicon 要求

Google 对搜索结果中显示的 favicon 有特定规则：

必须是 48px 的倍数（48x48、96x96、144x144）
必须是正方形
不能包含不当或 NSFW 内容
必须代表网站本身（不能是通用图标）

加速更新

确认你的 favicon 已上线并可以访问
打开 Google Search Console
使用 网址检查 工具检查你的首页
点击 请求编入索引
耐心等待——通常需要 1-2 周

常见问题排查：桌面端显示但移动端不显示

移动端浏览器对 favicon 格式要求更严格：

iOS Safari：需要 apple-touch-icon（180x180）——普通 favicon 不会显示在主屏幕上
Android Chrome：通过 manifest.json 中的图标引用来显示主屏幕图标
PWA：需要在 Web App Manifest 中定义 192x192 和 512x512 两种尺寸的图标

如果你的 WordPress 网站有 Web App Manifest（某些主题和插件会自动添加），确保其中的图标路径是正确的。

多站点注意事项

使用 WordPress 多站点？每个子站点都需要单独设置 favicon。

自定义器是按站点独立的，每个子站点可以设置自己的图标
网络级设置中没有默认 favicon 选项
如果需要全网络统一的默认 favicon，可以通过 must-use 插件（wp-content/mu-plugins/）在 functions.php 中添加

最佳实践

从大尺寸开始：上传至少 512x512 的图片——WordPress 只能缩小，不能放大
使用 PNG 格式：透明背景比 JPEG 效果更好
保持简洁：favicon 非常小，复杂的 logo 在 16x16 下会看不清
跨浏览器测试：使用 Favicon.im 来验证你的配置
版本化 favicon：更新时在 URL 后添加 ?v=2 来强制刷新缓存

常见问题

如何在 WordPress 中添加 favicon？

进入外观 → 自定义 → 站点身份 → 站点图标，上传一张 512x512 的 PNG 图片，然后点击发布。WordPress 会自动生成所有需要的尺寸。

WordPress favicon 应该用多大的尺寸？

建议上传至少 512 x 512 像素的图片。WordPress 会自动生成 32x32、180x180 等尺寸。如果要在 Google 搜索结果中显示，请使用 48px 的倍数。

为什么我的 WordPress favicon 不显示？

通常是缓存问题。清除浏览器缓存、WordPress 缓存插件和 CDN 缓存，然后在无痕窗口中查看。同时检查是否有插件冲突导致了重复的 favicon 标签。

WordPress 可以使用 SVG favicon 吗？

WordPress 出于安全考虑，默认不支持上传 SVG 文件。你可以通过 functions.php 手动添加 SVG favicon 支持，或使用支持 SVG 上传的插件。

如何在 WordPress 中为深色和浅色模式设置不同的 favicon？

使用内嵌了 prefers-color-scheme CSS 媒体查询的 SVG favicon。由于自定义器只支持 PNG/ICO 格式，需要通过 functions.php 手动添加 SVG 文件。

参考资料

Site Icon - WordPress Developer Resources - WordPress 官方文档
Define a favicon to show in search results - Google Search Central
Favicon.im - Favicon 检测和验证工具