how to change the title and icon in react app?

C

7

17

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 ?

Cupule answered 16/5, 2022 at 6:30 Comment(0)

T

32

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.

Thorley answered 16/5, 2022 at 6:32 Comment(0)

Y

15

you can change title and icon on public/index.html in react project.

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

Yahrzeit answered 16/5, 2022 at 7:1 Comment(0)

L

7

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>
    );
  }
};

Labarbera answered 16/5, 2022 at 6:55 Comment(1)

ok, but it's not like I want different logos for other pages . I am ok with changing in index.html as it was simple, – Cupule 16/5, 2022 at 7:8

C

2

You can change your page title by doing something like this.

 const pageTitle = `${title}`;

Then:

 document.title = pageTitle;

Chewink answered 28/9, 2022 at 12:34 Comment(0)

E

1

To change page Title and Icon of the page use following steps

Inside your projects public folder open index.html
Update the title to your project name <title>Project Name</title>
To change icon
Duplicate and rename your app logo to favicon.ico and replace in public folder
Replace your logos.png to your logos
Save and reload the application

Effulgence answered 17/10, 2023 at 15:20 Comment(0)

U

0

you can change the logo from ./assets/index.htm and change the href.

and input your image to ./assets/

Urano answered 10/1, 2023 at 12:16 Comment(1)

Your answer is not very specific. Adding a code snippet or describing individual steps in greater detail would help! – Gettings 10/1, 2023 at 19:10

B

0

I just had the same issue. I have build a generic website and the URL to the favicon is also stored in the DB. So no chance to set it already in the HTML file.

function App(): React.JSX.Element {
  const [config, setConfig] = useState<types.ProjectConfig | null>(null)

  useEffect(() => {
    getProjectConfig().then((config: types.ProjectConfig) => {
      const favicon = document.querySelector("link[rel~='icon']") as HTMLLinkElement
      if (favicon) {
        favicon.href = config.faviconURL // In your case just replace this with the URL in string format
      }
      document.title = config.pageTitle
      setConfig(config)
    })
  }, [])

This works for me :)

Benton answered 25/11, 2023 at 20:35 Comment(0)

Recommended topics

Hot tags