如何在WordPress中切换标签页时动态修改Favicon

一、先解决基础Favicon修改问题 #

如果之前用WordPress自带功能没生效，试试这两种方法：

• 用WordPress自定义面板（最简单）
  进入后台 → 外观 → 自定义 → 站点标识，上传你的Favicon（建议尺寸180x180px，WordPress会自动生成适配不同场景的尺寸）。保存后按Ctrl+F5强制刷新浏览器（本地XAMPP环境容易缓存旧图标），一般就能生效。
• 手动添加代码（自带功能失效时用）
  别直接改父主题的functions.php，用子主题更安全（避免主题更新丢失修改）。在子主题的functions.php里添加这段代码：

  function custom_site_favicon() {
    // 替换成你自己的Favicon路径，比如子主题文件夹里的favicon.png
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.png';
    echo '<link rel="icon" type="image/png" href="' . $favicon_url . '" sizes="32x32">';
    // 可选：添加苹果触摸图标
    echo '<link rel="apple-touch-icon" href="' . $favicon_url . '">';
  }
  add_action('wp_head', 'custom_site_favicon');
  

  把你的favicon.png（32x32px就行）放到子主题文件夹里，刷新页面即可。

二、实现标签页切换时自动更换Favicon #

这个功能靠JS监听浏览器的标签页可见性事件实现，步骤如下：

1. 准备两张图标：一张正常显示的（比如favicon-normal.png），一张标签页隐藏时显示的（比如favicon-hidden.png）。把这两张图传到WordPress媒体库，复制它们的完整URL（在媒体库点图片，看右侧的“文件URL”）。
2. 添加JS代码到WordPress：
   新手推荐用自定义HTML模块全局添加：
   进入后台 → 外观 → 自定义 → 点击“添加自定义HTML”（在自定义面板的底部区域），粘贴以下代码，记得替换里面的图标URL：

   <script>
     // 先获取页面上的Favicon元素，没有就创建一个
     let siteFavicon = document.querySelector('link[rel="icon"]');
     if (!siteFavicon) {
       siteFavicon = document.createElement('link');
       siteFavicon.rel = 'icon';
       siteFavicon.type = 'image/png';
       document.head.appendChild(siteFavicon);
     }
   
     // 监听标签页可见性变化
     document.addEventListener('visibilitychange', function() {
       if (document.hidden) {
         // 标签页被隐藏时切换图标
         siteFavicon.href = '替换成你准备的隐藏状态图标URL';
       } else {
         // 切回标签页时换回原图标
         siteFavicon.href = '替换成你准备的正常状态图标URL';
       }
     });
   </script>
   

   保存后切换标签页测试：比如打开新标签再切回来，就能看到图标变化了。

注意事项 #

• 本地XAMPP环境下，确保图标URL是正确的绝对路径（比如http://localhost/你的wp站点/wp-content/uploads/2024/05/xxx.png）。
• 如果没生效，先清空浏览器缓存，再强制刷新页面。

内容的提问来源于stack exchange，提问作者Quang Anh Bùi