如何将 Remix 运行中的图标从默认的替换为自定义的？

Question

我无法弄清楚如何删除默认的网站图标并将其替换为 Remix 中的自定义网站图标。在网页中，默认的图标被替换了，但是当我在不同的选项卡中从我的网站打开一个媒体文件时，假设是我网站上托管的图像或 PDF 文件，在这种情况下，会出现 Remix 的默认图标。

您可以在上面的屏幕截图中看到。在普通网页中，我的自定义图标可以正常工作。我是这样实现的-

export function links() {
  return [
   {
     rel: 'apple-touch-icon',
     sizes: '180x180',
     href: '/favicon/apple-touch-icon.png',
   },
   {
     rel: 'icon',
     type: 'image/png',
     sizes: '32x32',
     href: '/favicon/favicon-32x32.png',
   },
   {
     rel: 'icon',
     type: 'image/png',
     sizes: '16x16',
     href: '/favicon/favicon-16x16.png',
   },
   {
     rel: 'icon',
     type: 'image/x-icon',
     href: '/favicon/favicon.ico',
   },
   { rel: 'manifest', href: '/favicon/site.webmanifest' },
   {
    rel: 'mask-icon',
    href: '/favicon/safari-pinned-tab.svg',
    color: '#5bbad5',
   },
 ]
}

但在托管媒体文件的情况下，这同样不起作用。任何帮助将不胜感激，谢谢:)

Answer 1

由于网页可以包含图标的<link> 标签，因此浏览器将正确显示它。但是，对于图像或 PDF 等资源的直接链接，无法指定 favicon，因此浏览器将请求/favicon.ico文件。这是位于/public文件夹。

用正确的图标替换此文件。如果您仍然看到旧图标，则需要清除缓存。默认情况下，文件在/public缓存 1 小时。