【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>
相关推荐
木子啊13 分钟前
前端组件化:模板继承拯救发际线
前端
三十_A15 分钟前
零基础通过 Vue 3 实现前端视频录制 —— 从原理到实战
前端·vue.js·音视频
前端小菜袅16 分钟前
PC端原样显示移动端页面方案
开发语言·前端·javascript·postcss·px-to-viewport·移动端适配pc端
Highcharts.js17 分钟前
如何使用Highcharts SVG渲染器?
开发语言·javascript·python·svg·highcharts·渲染器
We་ct17 分钟前
LeetCode 228. 汇总区间:解题思路+代码详解
前端·算法·leetcode·typescript
爱问问题的小李32 分钟前
ue 动态 Key 导致组件无限重置与 API 重复提交
前端·javascript·vue.js
码云数智-大飞36 分钟前
从回调地狱到Promise:JavaScript异步编程的演进之路
开发语言·javascript·ecmascript
子兮曰40 分钟前
深入Vue 3响应式系统:为什么嵌套对象修改后界面不更新?
前端·javascript·vue.js
CHU72903543 分钟前
直播商城APP前端功能全景解析:打造沉浸式互动购物新体验
java·前端·小程序
枫叶丹444 分钟前
【Qt开发】Qt界面优化(一)-> Qt样式表(QSS) 背景介绍
开发语言·前端·qt·系统架构