【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>
相关推荐
绝世唐门三哥4 分钟前
使用Intersection Observer js实现超出视口固定底部按钮
开发语言·前端·javascript
南山安9 分钟前
Vue学习:ref响应式数据、v-指令、computed
javascript·vue.js·面试
思茂信息13 分钟前
CST电动车EMC仿真——电机控制器MCU滤波仿真
javascript·单片机·嵌入式硬件·cst·电磁仿真
鲸落落丶21 分钟前
Vue Router路由
前端·javascript·vue.js
阿呜的边城25 分钟前
终于还是吃上了react-i18next的细糠
前端·前端框架
米方33 分钟前
ElementPlus 穿梭框支持批量穿梭
前端·javascript·vue.js
InkHeart34 分钟前
uni-app开发路上的坑
前端·vue.js
用户40993225021234 分钟前
Vue3中v-bind:class与v-bind:style如何实现条件样式、组件样式合并与深层响应式管理?
前端·ai编程·trae
还算善良_40 分钟前
【Vue】表格实现表头多彩
javascript·vue.js·ecmascript
我是天龙_绍42 分钟前
如何在前端开发中高效运用AI:从提效到避坑
前端