how to change the title and icon in react app?
Question
I am making a react app. But in the title bar, it is showing 'React App' with React logo. I want to change it to my website name and logo, and how can I do that?
5 answers
solution1
1 ACCPTED 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>
To change your logo, go to the public folder and change the favicon.ico .
If you follow these steps, your logo and title will get changed.
If it helps you, please mark as accepted answer.
solution2
1 2022-05-16 07:01:07
you can change title and icon on index.html in react project.
<head>
...
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
...
...
</head>
solution3
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. More on this method and some (complex) alternatives in the official docs: 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 . It will allow you to set page title/favicon/other head elements from the components itself.
Example code using 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>
);
}
};
solution4
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;
solution5
0 2023-01-10 12:16:35
you can change the logo from./assets/index.htm and change the href.
and input your image to./assets/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.