Favicon 无法在托管于 Hostinger 上的 React.js 中的浏览器搜索结果中工作

问题描述 投票：0回答：1

我有一个简单的 React.js 应用程序，并且已将其托管在 Hostinger 上，但是在搜索结果中与网站标题一起显示的名为 favicon.ico 的图标无法正常工作。

enter image description here

这是我的index.html 文件。

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
    <title>Quell</title>
    <meta
      name="description"
      content="Overcome doom scrolling with Quell. Master your life with our science-based approach to digital well-being."
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

enter image description here

我对其他应用程序使用相同的过程并部署在 Vercel 和 AWS 上，它们运行良好。这里似乎有什么问题？

html reactjs hosting
1个回答
0
投票

尝试这样的操作，假设您的图标放置在公共文件夹中而不是子目录中：

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.