【HTML】根据不同域名设置不同的网站图标(替换 link 中 href 地址)

文章目录

  • 代码实现
html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <!-- 网站logo设置 -->
    <link rel="icon" href="/logo_two.svg" type="image/svg+xml" />
    <title>网站名称</title>
    <script>
      function setFavicon(href) {
        var link = document.querySelector("link[rel~='icon']");
        link.href = href;
      }
      // 根据不同的域名设置不同的favicon
      if (window.location.hostname.startsWith('one')) {
        setFavicon('/logo_one.png');
      } else {
        setFavicon('/logo_two.svg');
      }
    </script>
  </head>

  <body>
    <div id="app-container"></div>
  </body>
</html>
相关推荐
妙码生花1 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(五十八):后台系统配置管理实现
前端·后端·go
用户9385156350719 分钟前
React 受控/非受控组件与 React.memo 性能优化——从本质到实战
前端·javascript·react.js
IT_陈寒31 分钟前
Java并行流把我坑惨了:原来不是线程安全的!
前端·人工智能·后端
计科土狗1 小时前
GESP六级专题之类与对象
java·前端·数据库
anOnion1 小时前
构建无障碍组件之Listbox Pattern
前端·html·交互设计
凌涘1 小时前
前端路由(三):鉴权、拦截与重定向
前端
其美杰布-富贵-李1 小时前
第 8 篇:Three.js 材质系统
javascript·three.js·js
To_OC1 小时前
LC 3 无重复字符的最长子串:从入门滑动窗口到优化写法,再也不怕面试官追问
javascript·算法·leetcode
半个落月2 小时前
从零梳理 React Router:路由、懒加载、嵌套页面与登录鉴权
前端·react.js
tedcloud1232 小时前
Impeccable 部署指南:开源前端设计工具 Linux 环境搭建实践
linux·运维·服务器·前端·人工智能·开源