When working with Logo Link, implementing proper fallback handling ensures a smooth user experience. While we provide built-in fallback options, here’s how to implement custom fallback handling for 404s and loading states in React.

​
Enhanced Fallback Mechanism

Our React approach combines the basic fallback structure with error handling and loading states:

const LogoLink = ({ domain, clientId, fallbackText = "N / A" }) => {
  const [isLoading, setLoading] = useState(true);
  const [isError, setError] = useState(false);

  // Transparent 1x1 pixel PNG used as initial placeholder
  const transparent = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=`;

  // Construct the logo URL with domain and client ID
  const logoLink = `https://cdn.brandfetch.io/${domain}/fallback/404/icon?c=${clientId}`;

  // Determine which source to use based on component state
  // - During loading: show transparent placeholder
  // - After loading, no error: show actual logo
  // - On error: transparent placeholder remains while fallback UI shows
  const src = !isLoading && !isError ? logoLink : transparent;

  return (
    <div className="wrapper">
      <img
        onLoad={() => setLoading(false)}
        onError={() => setError(true)}
        alt="Logo by Brandfetch"
        className="icon"
        src={src}
      />

      {/* Fallback UI shown only when there's an error loading the logo */}
      {isError && (
        <div className="fallback">
          <p>{fallbackText}</p>
        </div>
      )}
    </div>
  );
};

Style your fallback mechanism with this CSS:

.wrapper {
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
  height: 128px;
  width: 128px;
}

.fallback {
  background-color: #eaeaea;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  height: 100%;
  width: 100%;
}

.fallback p {
  font-weight: bold;
  font-size: 24px;
  color: #666;
}

.icon {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

​
How It Works

  1. Initial render: Shows transparent placeholder image
  2. After initial load: Attempts to load actual logo
  3. Success: Displays logo
  4. Error: Shows fallback UI with provided text

The key benefits of using a transparent placeholder is that users never see the default browser “broken image” icon.

The LogoLink component can be easily integrated into your React application. Here’s how to use it:

<LogoLink domain="github.com" clientId="client-id" fallbackText="G" />

The component automatically handles loading states and errors, providing a smooth experience for your users.

OverviewHow to find the best logo for your use case