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

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 小时。