如何让浏览器为PDF文件显示适配明暗模式的SVG favicon？

核心原因 #

浏览器在新标签页打开PDF时，不会读取原网页的<link rel="icon">声明，而是直接抓取网站根目录的favicon.ico，哪怕它本身支持SVG格式的favicon。

可行解决方案 #

• 让PDF内嵌打开而非新标签页
  在服务器端给PDF文件设置Content-Disposition响应头，强制浏览器在原页面内嵌展示PDF：

  Content-Disposition: inline; filename="your-document.pdf"
  

  这种方式下，PDF会在原页面的上下文里打开，继承原网页的favicon设置，就能正常加载适配深浅模式的SVG图标了。

• 给PDF文件内嵌适配双模式的图标
  如果必须让PDF在新标签页打开，你可以用PDF编辑工具（比如Adobe Acrobat）给PDF本身添加支持深浅模式的图标。或者生成一个包含深色、浅色版本的多尺寸ICO文件替换根目录的favicon.ico——这样即使浏览器加载ICO，也能在对应模式下显示正确颜色。

• 调整PDF的访问路径关联favicon
  把PDF放在某个子目录下，同时在该子目录放置一份favicon.svg和对应的降级ICO。不过这个方法兼容性不稳定，部分浏览器还是会优先抓取根目录的ICO，仅作为备选方案。

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