打开新标签页时图标损坏

Question

我使用 favicon png 文件。

<link rel="icon" type="image/x-icon" href="favicon.png">

它适用于我的网站，我可以在浏览器选项卡上看到我的图标。

但是当我在新页面中打开 pdf 文档时，我在浏览器选项卡上看到一个损坏的图标。下面是我如何从 Angular 应用程序打开 pdf 文档。

<a href= "{{getRegulamentoFile()}}" target="_blank" rel="noopener" style="color: var(--wb-blue-45)"> PDF Document </a>

这是左侧损坏的图标：

Answer 1

这是因为 favicon 仅由 HTML 页面定义。显示 PDF 文档时，您的浏览器不会获取有关网站图标的任何信息，只是尽力而为。

您看到的图标不是“损坏的”，但可能来自另一个网站。如果您在本地运行应用程序并通过

localhost

访问它，则该图标可能来自您工作过的另一个网站。

没有严格的规则来解决这个问题，更像是反复试验。我知道的唯一秘诀是确保除了所有其他图标图像（例如

/favicon.ico

）之外，

http://localhost:3000/favicon.ico

也可用。这是一个众所周知的约定，浏览器在这种情况下通常会遵循它。