为不同页面（含自定义域名博客）设置不同favicon是否可行？

首先，针对你提到的每个博客拥有独立自定义域名的场景，其实每个域名本身就是独立的站点，你完全可以为每个站点单独配置专属的favicon，互不影响。下面分两种常见场景给你具体方案：

场景1：独立域名的不同博客站点 #

每个独立域名的博客，你只需要在对应站点的根目录放置专属的favicon.ico（或其他格式的图标文件，比如.png），然后在该站点所有页面的<head>标签里添加对应的链接标签即可：

<link rel="icon" type="image/x-icon" href="/your-custom-favicon.ico">
<!-- 如果是PNG格式，可适配不同尺寸 -->
<link rel="icon" type="image/png" sizes="32x32" href="/your-custom-favicon-32x32.png">
<link rel="icon" type="image/png" sizes="64x64" href="/your-custom-favicon-64x64.png">

因为每个域名的根目录是独立的，所以各自的favicon文件不会互相干扰，访问不同域名的博客时，浏览器会自动加载对应站点的图标。

场景2：同一域名下的不同页面（如果有这类需求） #

如果是同一域名下的不同页面需要不同favicon，也有几种简单可行的方法：

• 直接在页面HTML中指定：在每个页面的<head>里单独写入不同的<link>标签，指向对应的图标文件，比如：

  <!-- 博客A页面 -->
  <link rel="icon" href="/blog-a-favicon.ico">
  <!-- 博客B页面 -->
  <link rel="icon" href="/blog-b-favicon.ico">
  

• 服务器端动态渲染：如果你的博客是用动态框架（比如Node.js、PHP）搭建的，可以根据当前请求的页面路径，动态输出对应的favicon链接。举个PHP的简单例子：

  <?php
  $currentPage = $_SERVER['REQUEST_URI'];
  $faviconPath = '/default-favicon.ico';
  
  if (str_contains($currentPage, '/tech-blog')) {
      $faviconPath = '/tech-favicon.ico';
  } elseif (str_contains($currentPage, '/life-blog')) {
      $faviconPath = '/life-favicon.ico';
  }
  ?>
  <link rel="icon" href="<?php echo $faviconPath; ?>">
  

• 前端框架内动态切换：如果用React、Vue这类框架，可以在路由切换时动态修改页面的favicon。比如React里可以写个自定义钩子：

  function useFavicon(iconUrl) {
    useEffect(() => {
      const faviconLink = document.querySelector("link[rel='icon']") || document.createElement('link');
      faviconLink.type = 'image/x-icon';
      faviconLink.rel = 'icon';
      faviconLink.href = iconUrl;
      document.head.appendChild(faviconLink);
    }, [iconUrl]);
  }
  
  // 在对应页面组件中使用
  function TechBlogPage() {
    useFavicon('/tech-favicon.ico');
    return <div>技术博客内容</div>;
  }
  

小提醒：有些浏览器会缓存favicon，更换后可能需要强制刷新（Ctrl+F5）或者清除浏览器缓存才能看到新图标。另外，建议准备多种尺寸的图标（比如16x16、32x32），适配不同设备和浏览器的显示需求。

内容的提问来源于stack exchange，提问作者Charboter