如何更改站点名称旁图标？能否为各页面单独设置该图标？

1. 静态HTML页面直接配置 #

在每个HTML页面的<head>标签内，添加专属的<link>标签指定当前页面的图标文件：

<head>
  <!-- 替换为当前页面对应的图标路径 -->
  <link rel="icon" type="image/png" href="/page1-icon.png">
</head>

支持png、ico、svg等常见图标格式，按需选择即可。

2. 前端框架中实现（Vue/React） #

Vue项目（以Vue 3 + Vite为例）

在页面级组件的生命周期钩子中，动态修改页面的图标链接：

mounted() {
  const favicon = document.querySelector('link[rel="icon"]');
  if (favicon) {
    favicon.href = '/page2-icon.png';
  } else {
    const newIcon = document.createElement('link');
    newIcon.rel = 'icon';
    newIcon.type = 'image/png';
    newIcon.href = '/page2-icon.png';
    document.head.appendChild(newIcon);
  }
}

也可以借助vue-meta这类插件，更便捷地管理页面元信息。

React项目

在页面组件的useEffect钩子中完成图标切换，还可在组件卸载时恢复默认图标：

import { useEffect } from 'react';

function Page3() {
  useEffect(() => {
    const favicon = document.querySelector('link[rel="icon"]');
    if (favicon) {
      favicon.href = '/page3-icon.png';
    }
    // 可选：组件卸载时恢复默认图标
    return () => {
      if (favicon) favicon.href = '/default-icon.png';
    };
  }, []);

  return <div>页面3内容</div>;
}

3. 后端渲染页面（PHP/Node.js等） #

后端根据当前路由，动态输出对应页面的图标标签：

PHP示例

<?php
$pageIcon = '/default-icon.png';
if ($_SERVER['REQUEST_URI'] === '/about') {
  $pageIcon = '/about-icon.png';
}
?>
<head>
  <link rel="icon" type="image/png" href="<?= $pageIcon ?>">
</head>

内容的提问来源于stack exchange，提问作者pigs never look back