【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>
相关推荐
new出一个对象1 小时前
vue实现打印PDF文档
javascript·vue.js·pdf
汤姆Tom1 小时前
CSS 预处理器深入应用:提升开发效率的利器
前端·css·面试
练习前端两年半1 小时前
Vue3组件二次封装终极指南:动态组件+h函数的优雅实现
前端·vue.js
aricvvang2 小时前
🚀 NestJS 使用 cache-manager-redis-store 缓存无效?真相在这里!
javascript·后端·nestjs
皮皮虾我们跑2 小时前
前端HTML常用基础标
前端·javascript·html
Yeats_Liao2 小时前
Go Web 编程快速入门 01 - 环境准备与第一个 Web 应用
开发语言·前端·golang
卓码软件测评2 小时前
第三方CMA软件测试机构:页面JavaScript动态渲染生成内容对网站SEO的影响
开发语言·前端·javascript·ecmascript
Mintopia2 小时前
📚 Next.js 分页 & 模糊搜索:在无限数据海里优雅地翻页
前端·javascript·全栈
Mintopia2 小时前
⚖️ AIGC版权确权技术:Web内容的AI生成标识与法律适配
前端·javascript·aigc
周家大小姐.2 小时前
vue实现模拟deepseekAI功能
前端·javascript·vue.js