如何更改反应应用程序中的标题和图标？

Question

我正在制作一个 React 应用程序。但是在标题栏中，它显示 'React App' 和 React 标志。我想将其更改为我的网站名称和徽标，我该怎么做？

Answer 1

如果要更改标题，可以转到：public/index.html，然后更改<title>React App </title>

要更改徽标，请转到 public 文件夹并更改 favicon.ico。

如果您按照这些步骤操作，您的徽标和标题将会更改。

如果对您有帮助，请采纳为采纳答案。

Answer 2

在 public/index.html 中进行更改只会更改默认值（标题和网站图标），并且会为所有页面设置。有关此方法的更多信息以及官方文档中的一些（复杂）替代方法：https://create-react-app.dev/docs/title-and-meta-tags/

...或者您可以使用 React Helmet，这是官方文档中推荐的 third-party 库：https://github.com/nfl/react-helmet。它将允许您从组件本身设置页面 title/favicon/other head 元素。

使用 React Helmet 的示例代码：

import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://example.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

Answer 3

您可以在 React 项目中更改 index.html 上的标题和图标。

<head>
    ...
    ...
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <title>React App</title>
    ...
    ...
</head>

如何更改反应应用程序中的标题和图标？

how to change the title and icon in react app?

icons

titlebar

reactjs