如何使用CSS或JS隐藏HTML页面的title与link标签

CSS完全无法实现这个需求，不用在CSS写法上继续排查问题。
<title>和<link rel="shortcut icon">都属于<head>内的元数据标签，本身不会渲染到页面可视区域：

• <title>的内容展示在浏览器标签栏、收藏夹、历史记录这些浏览器原生UI区域，不属于页面DOM渲染树的可控范围，CSS根本管不到浏览器外壳的展示逻辑
• favicon对应的link标签只是给浏览器传递图标资源地址，不会在页面内生成任何可被CSS控制的可视元素
  不管你给这两个标签写display: none还是其他隐藏属性，都不会有任何效果。

你没法通过前端技术真的“隐藏”浏览器层面的这两个UI元素，但是可以通过修改/移除节点的方式，达到不显示原有内容的效果：

处理title标签 #

// 直接清空title内容即可让标签栏标题为空
document.title = '';

// 针对Streamlit这类会自动动态更新title的框架，加监听防止内容被框架覆盖
const titleNode = document.querySelector('title');
if (titleNode) {
  new MutationObserver(() => {
    if (document.title) document.title = '';
  }).observe(titleNode, { childList: true, subtree: true });
}

如果你直接移除title节点，大部分浏览器会回退显示当前页面的URL作为标签标题，效果不如直接清空内容。

处理favicon的link标签 #

// 移除所有和favicon相关的link标签
document.querySelectorAll('link[rel~="shortcut icon"], link[rel~="icon"]').forEach(node => node.remove());

// 可选：注入一个透明的空图标，避免部分浏览器显示默认的空白页图标
const emptyIcon = document.createElement('link');
emptyIcon.rel = 'icon';
emptyIcon.href = 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=';
document.head.append(emptyIcon);

注意：favicon通常有强缓存，修改后如果没看到效果，强制刷新页面（Ctrl+F5 / Cmd+Shift+R）清掉缓存即可。

内容的提问来源于stack exchange，提问作者Muzammil Dafedar