How to Get Fav Icon from Domain

The FavIconSample component dynamically fetches and displays the favicon of a specified domain using Google's favicon service. It includes an input field for users to enter a domain name and instantly updates the displayed favicon.

[Demo]

Features

• Dynamically display the favicon of a domain.
• Input field to specify the desired domain.

function FavIconSample() {
  const [domain, setDomain] = useState("youtube.com");

  const renderInfo = () => {
    return (
      <>
        <Input
          placeholder="Enter Domain"
          style={{ width: 250 }}
          value={domain}
          onChange={(e) => setDomain(e.target.value)}
        />
      </>
    );
  };

  const renderDemo = () => {
    return (
      <div>
        <img
          src={`https://www.google.com/s2/favicons?domain=${domain}&sz=32`}
          alt="favicon"
        />
      </div>
    );
  };

  return (
    <Flex gap={16}>
      {renderDemo()}
      {renderInfo()}
    </Flex>
  );
}

export default FavIconSample;