Chip de link com favicon

.card-055 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  padding: 8px 12px 8px 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  font-family: system-ui,sans-serif;
  transition: background .15s,border-color .15s
}
.card-055:hover {
  background: #f9fafb;
  border-color: #9ca3af
}
.card-055__fav {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 800
}
.card-055__text {
  display: flex;
  flex-direction: column;
  min-width: 0
}
.card-055 b {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.card-055 small {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.card-055 svg {
  flex: none;
  color: #9ca3af
}
.card-055:hover svg {
  color: #111827
}
.card-055 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

<a class="card-055" href="#">
  <span class="card-055__fav">D</span>
  <span class="card-055__text"><b>Container queries in practice</b><small>designforai.dev/guides/container-queries</small></span>
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M9 7h8v8"/></svg>
</a>