如何更改反应应用程序中的标题和图标？
[英]how to change the title and icon in react app?
问题描述
I am making a react app.
我正在制作一个反应应用程序。 But in the title bar, it is showing 'React App' with React logo.但是在标题栏中，它显示带有 React 徽标的“React App”。 I want to change it to my website name and logo, and how can I do that?我想将其更改为我的网站名称和徽标，我该怎么做？
5 个解决方案
解决方案1
1 已采纳 2022-05-16 06:32:55
If you want to change the title, you can go to: public/index.html , and then change the <title>React App </title>如果要改标题，可以去： public/index.html ，然后改<title>React App </title>
To change your logo, go to the public folder and change the favicon.ico .要更改您的徽标，请转到公共文件夹并更改favicon.ico 。
If you follow these steps, your logo and title will get changed.如果您按照这些步骤操作，您的徽标和标题将会更改。
If it helps you, please mark as accepted answer.如果对您有帮助，请标记为已接受的答案。
解决方案2
1 2022-05-16 07:01:07
you can change title and icon on index.html in react project.您可以在 react 项目中更改index.html上的标题和图标。
<head>
...
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
...
...
</head>
解决方案3
0 2022-05-16 06:55:44
Making changes in public/index.html would only change the default values (title and favicon), and it will be set for all pages.在public/index.html中进行更改只会更改默认值（标题和网站图标），并且将为所有页面设置。 More on this method and some (complex) alternatives in the official docs: https://create-react-app.dev/docs/title-and-meta-tags/更多关于此方法和官方文档中的一些（复杂）替代方案： https ://create-react-app.dev/docs/title-and-meta-tags/
...or you can use React Helmet, a third-party library recommended in the official docs as well: https://github.com/nfl/react-helmet . ...或者您也可以使用官方文档中推荐的第三方库 React Helmet： https ://github.com/nfl/react-helmet。 It will allow you to set page title/favicon/other head elements from the components itself.它将允许您从组件本身设置页面标题/网站图标/其他head元素。
Example code using React Helmet:使用 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>
);
}
};
解决方案4
0 2022-09-28 12:34:38
You can change your page title by doing something like this.您可以通过执行以下操作来更改页面标题。
const pageTitle = `${title}`;
Then:然后：
document.title = pageTitle;
解决方案5
0 2023-01-10 12:16:35
you can change the logo from./assets/index.htm and change the href.您可以从 ./assets/index.htm 更改徽标并更改 href。
and input your image to./assets/并将您的图像输入./assets/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.