Customizing your own Logo Link fallbacks

When working with Logo Link, it’s crucial to have a fallback strategy in place. This ensures a smooth user experience even when the primary logo image fails to load. While we already provide several built-in fallback options, here’s how to implement a custom fallback system using HTML and CSS for more specific needs.

​

The Fallback Mechanism

Our approach uses a combination of a fallback div and an image element. The fallback div contains custom text or a placeholder, while the image element attempts to load the actual logo.

<div class="wrapper">
  <div class="fallback">
    <p>Custom</p>
  </div>

  <img
    class="icon"
    src="https://cdn.brandfetch.io/<DOMAIN>/fallback/transparent/icon"
    alt="Logo by Brandfetch"
  />
</div>

Use this CSS to style your fallback mechanism:

.wrapper {
  margin-right: 20px;
  display: inline-flex;
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
  height: 125px;
  width: 125px;
}

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

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

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

​

How It Works

1. The .wrapper div creates a circular container for the logo.
2. The .fallback div is positioned absolutely within the wrapper, displaying custom text.
3. The .icon image is layered on top of the fallback div.
4. If the image loads successfully, it covers the fallback div.
5. If the image fails to load, the fallback div remains visible, showing the custom text.

Visualize our live example on jsFiddle.