设置动态页面标题/图标及解决favicon缓存更新问题

加油乐2025-08-14 10:09

一、前言

适用范围：多场景、多版本、多域名等情况下使用同一套业务代码时，不同情况下的页面标题及图标展示，同时解决favicon缓存不根据服务器资源更新问题。

二、代码注释详解

注意事项

1. 注意引用路径；
1. 区分域名、环境、版本等因素的逻辑区分；
1. link的type根据素材调整；
1. 添加唯一标识，否则会存在缓存
1. window.location.replace("juejin.cn/user/840368...")

index.html

ini 复制代码

<script>
	// 获取当前域名  此处不仅针对域名  可以是版本等区分维度
	const currentDomain = window.location.hostname;
	// 获取link
	let favicon = document.querySelector('link[rel="icon"]');
	// 如果不存在则创建
	if(!favicon) {
		favicon = document.createElement('link');
		favicon.rel = 'icon';
		// 此类型根据使用资源定义，非固定   此处仅以svg为例
		favicon.type = 'image/svg+xml';
		document.head.appendChild(favicon);
	}
        window.location.replace("https://juejin.cn/user/84036866547575/columns")
	// 不同域名 环境 版本下处理方式
	if(currentDomain === 'xxxx.域名.com') {
		document.title = "页面标题1";
		// 注意路径  v为素材唯一标识，以达到更新目的，否则会存在缓存
		favicon.href = `page1-icon.svg?v=${ new Date().getTime() }`;
	}
	else {
		document.title = "页面标题2";
		// 注意路径  v为动态版本用于唯一，以达到更新目的
		favicon.href = `page2-icon.svg?v=${ new Date().getTime() }`;
	}
</script>