WordPress 内置了称为站点图标(Site Icon)的 favicon 支持。对大多数网站来说,你不需要插件或任何代码——只需在定制器中上传一张正方形图片。本指南涵盖简单方式以及适用于自定义主题的手动方法。
方法 1:站点图标(推荐)
这是内置的、无代码的方式。适用于 WordPress 4.3 及更高版本。
- 首先,从你的 logo 生成一个 512×512 PNG(WordPress 推荐 512×512 起)。
- 在你的 WordPress 仪表盘中,前往 外观 → 自定义 → 站点身份。
- 在站点图标下,点击选择图片并上传你的 512×512 PNG。
- 如提示则进行裁剪(WordPress 会引导你裁剪为正方形)。
- 点击发布保存。
WordPress 会自动生成它所需的每种尺寸(favicon、Apple touch icon、应用图标),并将正确的 <link> 标签添加到你网站的 <head> 中。无需代码。
需要一张可上传的 512×512 图片? 在 Favicon.one 免费生成——ZIP 中包含 WordPress 期望的确切尺寸。
方法 2:手动 link 标签(自定义主题)
如果你正在构建自定义主题,或者站点图标无法满足你的需求,可以手动添加 favicon 文件。
- 将你的 favicon 文件(
favicon.ico、各 PNG、apple-touch-icon.png)上传到你的主题文件夹,例如/wp-content/themes/yourtheme/images/。 - 打开
header.php(或使用functions.php中的wp_headaction)并添加:
<link rel="icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon.png">
<link rel="manifest" href="<?php echo get_template_directory_uri(); ?>/images/site.webmanifest">WordPress.com 与 WordPress.org
在 WordPress.com 上,站点身份选项在某些方案中位于 设置 → 常规下,在其他方案中则位于定制器中。在自托管的 WordPress.org 上,它始终位于"外观 → 自定义 → 站点身份"。
我的 WordPress favicon 不显示
- 清除缓存。WordPress 加缓存插件(WP Rocket、W3 Total Cache)会提供过期的 HTML。清空所有缓存并在无痕窗口中检查。
- 检查你的主题。某些较旧的主题没有调用
wp_head(),因此站点图标标签永远不会渲染。确保<?php wp_head(); ?>存在于你的header.php中。 - 插件冲突。SEO 插件(Yoast、Rank Math)或缓存插件可能会覆盖你的 favicon。请检查它们的设置。
- 图片太小。WordPress 要求站点图标至少 512×512。更小的图片会被拒绝。
完整的排查清单请参阅 "Favicon 不显示?"。
WordPress favicon 的最佳图片尺寸
上传一张至少 512×512 像素的正方形 PNG。WordPress 会自动将其缩小以生成 favicon、Apple touch icon 和应用图标。更大的源图片(1024×1024)也可以;只需确保它是正方形且高对比度。
从你的 logo 生成完美的 512×512 WordPress 站点图标—— 在 Favicon.one 免费。