通过Cloudflare代理站点后页面favicon、title不显示问题咨询

解决方案 #

1. 优先修改父页面head配置 #

问题核心原因是：当前浏览器读取的是自定义域名指向的父页面（即包含iframe的那个页面）的<head>标签内容，而非iframe内嵌的GitHub Pages页面的对应配置，你之前写在GitHub仓库里的favicon和title仅作用于iframe内部，自然不会在外层页面生效。
直接在你部署的外层父页面的<head>标签内手动添加配置即可：

<!-- 自定义页面标题 -->
<title>填入你要展示的站点标题</title>
<!-- 自定义favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

你可以把favicon文件上传到外层父页面的同级目录，也可以直接填写GitHub Pages上的favicon完整资源路径。

2. 排查Cloudflare配置冲突 #

如果添加后还是不生效，检查Cloudflare的如下配置：

• 进入「规则」-「转换规则」，确认没有配置会改写HTML响应、删除<head>内容的规则
• 进入「速度」-「优化」，临时关闭「自动最小化」中的HTML最小化选项，测试是否是压缩逻辑误删了你的配置
• 进入「SSL/TLS」-「概述」，确认加密模式选择的是「完全」或「完全（严格）」，避免混合内容错误导致favicon加载失败

修改完配置后，进入Cloudflare后台「缓存」-「配置」，点击「清除所有缓存」，再用浏览器无痕模式访问测试即可。

3. 自动同步iframe配置（可选） #

如果你的外层页面和iframe内嵌的GitHub Pages页面属于同域，也可以通过JS自动同步iframe内的配置，避免后续修改还要改两个地方，将如下代码添加到外层父页面的<body>标签末尾即可：

const serverIframe = document.querySelector('iframe');
serverIframe.onload = function() {
  // 同步页面标题
  document.title = serverIframe.contentDocument.title;
  // 同步favicon配置
  const innerFavicon = serverIframe.contentDocument.querySelector('link[rel*="icon"]');
  if (innerFavicon) {
    // 移除父页面原有favicon配置
    document.querySelectorAll('link[rel*="icon"]').forEach(el => el.remove());
    // 插入iframe内的favicon配置
    const newFavicon = document.createElement('link');
    newFavicon.rel = innerFavicon.rel;
    newFavicon.href = innerFavicon.href;
    document.head.appendChild(newFavicon);
  }
}

注：如果外层页面和iframe不同域，JS无法读取iframe内部内容，该方案无效，只能用第一种手动配置的方式。

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