How to add favicon to the Helmet component in React?

Sometimes, we want to add favicon to the Helmet component in React.

In this article, we’ll look at how to add favicon to the Helmet component in React.

How to add favicon to the Helmet component in React?

To add favicon to the Helmet component in React, we can add the link tag with the favicon inside Helmet.

For instance, we write:

import React from "react";
import Helmet from "react-helmet";

export default function App() {
  return (
    <>
      <Helmet>
        <title>ABC</title>
        <link
          rel="icon"
          type="image/png"
          href="https://icons.duckduckgo.com/ip3/www.google.com.ico"
          sizes="16x16"
        />
      </Helmet>
    </>
  );
}

to add the link tag to add the favicon into our app inside the Helmet component.

Now we should see the favicon displayed

Conclusion

To add favicon to the Helmet component in React, we can add the link tag with the favicon inside Helmet.