【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>
相关推荐
Cachel wood7 分钟前
Vue.js前端框架教程5:Vue数据拷贝和数组函数
linux·前端·vue.js·python·阿里云·前端框架·云计算
匹马夕阳13 分钟前
防抖(Debounce)和节流(Throttle)的区别和应用场景
开发语言·前端·javascript
快乐点吧1 小时前
【前端面试】list转树、拍平, 指标,
前端·面试·list
今晚哒老虎1 小时前
ElementPlus Table 表格实现可编辑单元格
javascript·vue.js·elementui
Domain-zhuo1 小时前
uniapp跨端适配—条件编译
前端·javascript·vue.js·uni-app·vue
Cachel wood1 小时前
Vue.js前端框架教程1:Vue应用启动和Vue组件
大数据·前端·vue.js·git·elasticsearch·前端框架·ssh
范文杰1 小时前
2024年AI 编程现在可以做到什么程度?
前端
tester Jeffky1 小时前
Vue简介:构建现代Web应用的前端框架
前端·vue.js·前端框架
Cachel wood1 小时前
Vue.js前端框架教程2:Vue路由和状态管理库Pinia
java·linux·服务器·前端·vue.js·前端框架·github
XYu123012 小时前
element左侧导航栏
javascript·vue.js·elementui