Letakkan logo perusahaan di aplikasi Anda — resep siap pakai

Snippet praktis untuk bentuk umum tempat logo berakhir: tag <img>, komponen React, Next.js Image, slot avatar Tailwind, elemen <picture> yang sadar mode gelap, fallback gambar OG, dan URL yang ditandatangani server. Setiap snippet bekerja melawan endpoint publik https://api.clearlogo.dev.

Semua contoh mengasumsikan Anda memiliki kunci browser (untuk kode klien) atau kunci server (untuk kode backend). Buat kunci dari dashboard.

1. HTML biasa

Integrasi tercepat yang mungkin — tempel URL ke tag <img>.

<img
  src="https://api.clearlogo.dev/logo/github.com?size=64&content=80&token=YOUR_BROWSER_KEY"
  alt="GitHub"
  width="64"
  height="64"
/>

Atur size agar sesuai dengan dimensi yang dirender sehingga browser tidak membuang bandwidth menskalakan aset yang lebih besar.

2. Komponen React

Komponen yang dapat digunakan kembali kecil mencakup sebagian besar kebutuhan UI produk.

type CompanyLogoProps = {
  domain: string;
  size?: 32 | 48 | 64 | 96 | 128;
  alt?: string;
};

const BROWSER_KEY = process.env.NEXT_PUBLIC_CLEARLOGO_KEY!;

export function CompanyLogo({ domain, size = 64, alt }: CompanyLogoProps) {
  return (
    <img
      src={`https://api.clearlogo.dev/logo/${domain}?size=${size}&content=80&token=${BROWSER_KEY}`}
      alt={alt ?? `${domain} logo`}
      width={size}
      height={size}
      loading="lazy"
      decoding="async"
    />
  );
}

loading="lazy" dan decoding="async" menjaga daftar panjang (CRM, direktori, tabel akun) dari memblokir paint.

3. Next.js <Image>

Tambahkan host API ke next.config.js sekali, kemudian gunakan komponen <Image> yang dioptimalkan di mana-mana.

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "api.clearlogo.dev" },
    ],
  },
};

import Image from "next/image";

export function CompanyLogo({ domain, size = 64 }: { domain: string; size?: number }) {
  return (
    <Image
      src={`https://api.clearlogo.dev/logo/${domain}?size=${size * 2}&content=80&token=${process.env.NEXT_PUBLIC_CLEARLOGO_KEY}`}
      alt={`${domain} logo`}
      width={size}
      height={size}
      unoptimized
    />
  );
}

Minta size * 2 untuk ketajaman retina pada layar HiDPI. Gunakan unoptimized jika Anda ingin negosiasi WebP dari API mengalir ke klien; lepaskan jika Anda ingin Next.js menangani negosiasi format itu sendiri.

4. Slot avatar Tailwind

Lepaskan logo ke slot UI tetap yang tetap konsisten secara visual di seluruh brand.

<div className="flex items-center gap-3">
  <div className="h-10 w-10 overflow-hidden rounded-md bg-neutral-100 ring-1 ring-neutral-200">
    <img
      src={`https://api.clearlogo.dev/logo/${domain}?size=64&content=80&token=${BROWSER_KEY}`}
      alt=""
      className="h-full w-full object-contain"
    />
  </div>
  <div>
    <div className="font-medium">{name}</div>
    <div className="text-sm text-neutral-500">{domain}</div>
  </div>
</div>

object-contain ditambah ukuran slot tetap adalah bentuk paling dapat diandalkan untuk tabel dan daftar. Pasangkan dengan parameter content=80 sehingga logo tidak pernah menabrak tepi slot.

5. Logo yang menyadari mode gelap

Gunakan <picture> dengan sumber prefers-color-scheme sehingga browser menukar varian gelap pada waktu paint — tidak ada JavaScript, tanpa rerender, dan tanpa hook per-logo yang dijalankan dalam daftar 50.

<picture>
  <source
    srcset="https://api.clearlogo.dev/logo/github.com?size=64&theme=dark&token=YOUR_BROWSER_KEY"
    media="(prefers-color-scheme: dark)"
  />
  <img
    src="https://api.clearlogo.dev/logo/github.com?size=64&theme=light&token=YOUR_BROWSER_KEY"
    alt="GitHub"
    width="64"
    height="64"
  />
</picture>

Dibungkus sebagai komponen React:

export function CompanyLogo({ domain, size = 64 }: { domain: string; size?: number }) {
  const base = `https://api.clearlogo.dev/logo/${domain}?size=${size}&content=80&token=${BROWSER_KEY}`;
  return (
    <picture>
      <source srcSet={`${base}&theme=dark`} media="(prefers-color-scheme: dark)" />
      <img src={`${base}&theme=light`} alt={`${domain} logo`} width={size} height={size} />
    </picture>
  );
}

API kembali ke varian terang ketika tidak ada versi gelap, jadi selalu aman untuk meminta theme=dark. Untuk switch tema tingkat aplikasi (bukan tingkat OS), kendarai URL sumber dari status tema Anda sebagai ganti prefers-color-scheme.

6. Rendering daftar dengan placeholder

Untuk daftar panjang, render placeholder segera sehingga slot kosong tidak berkedip.

function LogoCell({ domain }: { domain: string }) {
  const [loaded, setLoaded] = useState(false);
  return (
    <div className="relative h-10 w-10 rounded-md bg-neutral-100">
      <img
        src={`https://api.clearlogo.dev/logo/${domain}?size=64&content=80&token=${BROWSER_KEY}`}
        alt=""
        loading="lazy"
        onLoad={() => setLoaded(true)}
        className={`h-full w-full object-contain transition-opacity ${
          loaded ? "opacity-100" : "opacity-0"
        }`}
      />
    </div>
  );
}

Latar belakang netral mengisi slot secara instan, dan logo memudar setelah didecode.

7. Fallback kesalahan dengan huruf pertama

Jika API tidak dapat menemukan logo untuk domain, render avatar huruf deterministik sebagai gantinya.

function LogoOrFallback({ domain, name }: { domain: string; name: string }) {
  const [errored, setErrored] = useState(false);

  if (errored) {
    return (
      <div className="flex h-10 w-10 items-center justify-center rounded-md bg-neutral-200 font-medium text-neutral-600">
        {name[0]?.toUpperCase() ?? "?"}
      </div>
    );
  }

  return (
    <img
      src={`https://api.clearlogo.dev/logo/${domain}?size=64&content=80&token=${BROWSER_KEY}`}
      alt={`${name} logo`}
      width={40}
      height={40}
      className="rounded-md"
      onError={() => setErrored(true)}
    />
  );
}

Fallback tidak pernah network-request, jadi bahkan baris dingin tetap cepat.

8. Fallback gambar Open Graph

Gunakan fetch sisi server untuk menanamkan logo ke dalam kartu OG yang dihasilkan secara dinamis Anda sendiri.

// app/og/route.ts (Next.js, Edge runtime)
import { ImageResponse } from "next/og";

export const runtime = "edge";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const domain = searchParams.get("domain") ?? "example.com";

  const logoUrl = `https://api.clearlogo.dev/logo/${domain}?size=256&content=80&token=YOUR_SERVER_KEY`;

  return new ImageResponse(
    (
      <div style={{ display: "flex", alignItems: "center", padding: 64 }}>
        <img src={logoUrl} width={128} height={128} alt="" />
        <span style={{ marginLeft: 32, fontSize: 64 }}>{domain}</span>
      </div>
    ),
    { width: 1200, height: 630 },
  );
}

Gunakan kunci server di sini, bukan kunci browser — Edge function adalah sisi server, dan kunci server adalah yang bertahan di atas header origin yang tidak terbatas.

9. Penandatanganan backend untuk UI sensitif

Ketika Anda tidak ingin URL publik (misalnya alat admin internal), proxy melalui backend Anda.

// app/api/logo/[domain]/route.ts (Next.js)
export async function GET(
  request: Request,
  { params }: { params: { domain: string } },
) {
  const upstream = await fetch(
    `https://api.clearlogo.dev/logo/${params.domain}?size=128&content=80`,
    { headers: { Authorization: `Bearer ${process.env.CLEARLOGO_SERVER_KEY}` } },
  );
  return new Response(upstream.body, {
    headers: {
      "Content-Type": upstream.headers.get("Content-Type") ?? "image/png",
      "Cache-Control": "public, max-age=86400, s-maxage=86400",
    },
  });
}

Sekarang frontend Anda menggunakan /api/logo/{domain} — tidak ada API key dalam sumber halaman, dan Anda mengontrol caching di CDN Anda sendiri.

10. Helper TypeScript

Helper tunggal membuat konstruksi URL konsisten di seluruh codebase.

type LogoOptions = {
  size?: 16 | 32 | 48 | 64 | 96 | 128 | 192 | 256 | 512 | 1024;
  content?: number; // 50–100, step 5
  theme?: "light" | "dark";
  format?: "png" | "webp" | "jpeg";
};

export function logoUrl(domain: string, opts: LogoOptions = {}): string {
  const params = new URLSearchParams({
    size: String(opts.size ?? 64),
    content: String(opts.content ?? 80),
    token: process.env.NEXT_PUBLIC_CLEARLOGO_KEY!,
  });
  if (opts.theme) params.set("theme", opts.theme);
  if (opts.format) params.set("format", opts.format);
  return `https://api.clearlogo.dev/logo/${encodeURIComponent(domain)}?${params}`;
}

encodeURIComponent melindungi dari karakter yang tidak biasa dalam domain dan membuat helper aman untuk dipanggil dengan input yang tidak dipercaya.

11. Preconnect untuk menghangat koneksi lebih awal

Untuk dashboard yang merender puluhan logo di atas garis, isyaratkan browser untuk mulai mengambil lebih awal.

<link rel="preconnect" href="https://api.clearlogo.dev" crossorigin />
<link rel="dns-prefetch" href="https://api.clearlogo.dev" />

// Next.js
import Head from "next/head";

export function ClearLogoPreconnect() {
  return (
    <Head>
      <link rel="preconnect" href="https://api.clearlogo.dev" crossOrigin="" />
      <link rel="dns-prefetch" href="https://api.clearlogo.dev" />
    </Head>
  );
}

preconnect menyelesaikan DNS dan membuka handshake TCP/TLS secara instan; dns-prefetch adalah fallback murah untuk browser yang mengabaikan preconnect. Dua petunjuk total, terlepas dari berapa banyak logo yang dirender halaman. Lebih suka ini daripada <link rel="preload" as="image"> per logo — preload berat, menghitung terhadap anggaran bandwidth, dan tidak membantu jika URL yang dirender berakhir sedikit berbeda (ukuran, tema, token) dari yang dimuat sebelumnya.

FAQ

Resep mana yang harus saya mulai?

Jika Anda merender logo tunggal, resep <img> biasa sudah cukup. Untuk daftar dan tabel, langsung ke slot avatar Tailwind dan pola lazy-load.

Apakah saya memerlukan kunci untuk pengujian?

Tidak. Endpoint berfungsi secara anonim untuk browsing volume rendah. Tambahkan kunci browser sebelum Anda meluncurkan ke produksi sehingga permintaan benar-benar diatribusikan dan dihitung terhadap rencana Anda.

Ukuran apa yang harus saya minta?

Cocokkan ukuran yang dirender dalam CSS, kemudian minta 2x itu untuk ketajaman retina. Jangan minta 1024 untuk slot 32-piksel — itu menghabiskan bandwidth dan tidak terlihat lebih baik.

Bagaimana cara menangani mode gelap tanpa JavaScript?

Gunakan elemen <picture> dengan <source> yang dibatasi oleh media="(prefers-color-scheme: dark)". Browser memilih URL yang tepat pada waktu paint — tidak ada React hook, tidak ada rerender per logo, tidak ada per-row overhead bahkan dalam daftar panjang.

Bagaimana cara membuat daftar logo dimuat lebih cepat?

Tambahkan single <link rel="preconnect" href="https://api.clearlogo.dev"> di kepala dokumen Anda. Itu membuka DNS/TCP/TLS sekali untuk setiap logo di halaman, yang lebih murah daripada <link rel="preload"> per URL.

Bagaimana cara menampilkan fallback ketika API mengembalikan tidak ada logo?

Dengarkan onError pada <img> dan tukar ke avatar huruf atau ikon generik. Resep fallback kesalahan di atas adalah bentuk produksi.

Bisakah saya menggunakan kunci browser dari render sisi server?

Anda dapat — tetapi kunci server adalah yang cocok lebih baik karena mengirim permintaan via Authorization: Bearer … daripada mengandalkan pemeriksaan asal. Untuk Next.js Server Components, rute OG, atau backend proxy, gunakan kunci server.

Bagaimana cara cache logo di CDN saya sendiri?

Gunakan resep penandatanganan backend di atas. Respons upstream mencakup Cache-Control yang tahan lama, jadi Anda dapat mengatur header yang sama pada proxy Anda dan biarkan CDN Anda melakukan sisanya.