仅显示索引路由的图标

Question

我是运行一个 React / webpack 应用程序，当加载我的应用程序的任何路径时，除了索引（“/”）之外，favicon 不显示。

/public/app-bundle.js --> react/webpack bundle

/public/favicon --> 包含图标资产的目录

/public/index.html --> 见下文

  <link
  rel="apple-touch-icon"
  sizes="180x180"
  href="./favicon/apple-touch-icon.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="./favicon/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="./favicon/favicon-16x16.png"
/>
<link rel="manifest" href="./favicon/site.webmanifest" />
<link
  rel="mask-icon"
  href="./favicon/safari-pinned-tab.svg"
  color="#5bbad5"
/>
<link rel="icon" href="./favicon/favicon.ico" />

Answer 1

请考虑页面将从服务器而不是文件系统请求页面

所以去掉“.”在 hrefs 之前。

<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/favicon/apple-touch-icon.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="/favicon/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="/favicon/site.webmanifest" />
<link
  rel="mask-icon"
  href="/favicon/safari-pinned-tab.svg"
  color="#5bbad5"
/>
<link rel="icon" href="/favicon/favicon.ico" />

请记住，如果以斜杠 (“/”) 开头，则表示从服务器根目录获取，如果不是相对的，baseUrl 所在的位置。

仅显示索引路由的图标

Favicon only showing for index route

html

favicon

google-chrome

hyperlink

reactjs