Cara Memakai File Brand Kit (Panduan Lengkap)

Cara memakai file brand kit itu sederhana: setiap folder di dalam ZIP punya satu tujuan yang jelas, dan kamu tinggal mengambil file yang tepat untuk setiap tempat. Untuk website pakai logo SVG (atau WebP), untuk ikon tab browser pasang isi folder favicon, untuk media sosial pakai avatar dan cover yang sudah sesuai ukuran tiap platform, dan untuk percetakan kirim PDF dari folder print — bukan PNG. Sisanya — kartu nama, kop surat, tanda tangan email, dan pedoman brand — sudah dirakit siap pakai.

Brand kit dari EmblemKit datang sebagai satu file ZIP. Ekstrak dulu (klik kanan to Extract All di Windows, atau dobel klik di Mac), lalu kamu akan melihat folder logo, favicon, social, stationery, print, dan documents, ditambah tiga berkas penting di akar: README.txt, LICENSE.txt, dan brand-tokens.json. Panduan ini membongkar isi tiap folder dan menunjukkan persis file mana untuk keperluan apa, jadi tidak ada lagi pertanyaan "aku sudah unduh kit-ku, sekarang apa?".

Kalau kamu masih bingung soal format file secara umum, baca dulu memahami file logo dan logo vektor vs raster supaya pilihan di bawah ini lebih masuk akal.

Mulai dari README.txt (baca ini lebih dulu)

Di akar ZIP ada README.txt. Ini peta jalan kit-mu: ringkasan isi tiap folder, kode warna brand, nama huruf yang dipakai, dan catatan singkat cara penggunaannya. Buka dengan Notepad atau editor teks apa pun. Lima menit membacanya menghemat banyak tebak-tebakan.

Di sebelahnya ada LICENSE.txt. Berkas ini menegaskan bahwa ikon dan huruf di logomu boleh dipakai secara komersial — penting kalau ada klien, marketplace, atau percetakan yang bertanya soal hak pakai. Simpan baik-baik bersama file aslimu.

Folder logo/ — fondasi semua materi

Folder logo/ berisi logo utamamu dalam banyak format dan varian. Aturan dasarnya:

• SVG — file master. Vektor murni, tajam di ukuran berapa pun. Pakai untuk website, dan simpan sebagai sumber kebenaran logomu.
• PNG — latar transparan, untuk layar: presentasi, marketplace, dokumen.
• WebP & AVIF — versi modern jauh lebih ringan dari PNG; pakai di website agar cepat.
• JPG — latar putih solid, untuk platform yang menolak transparansi (banyak form pendaftaran dan marketplace).

Setiap format hadir dalam beberapa varian: horizontal (logo + nama berjajar, untuk header website dan kop surat), stacked (bertumpuk, untuk ruang yang lebih persegi), icon (ikon saja, untuk avatar dan favicon), serta mono-black dan mono-white.

Kapan pakai mono? mono-black dipakai di atas latar terang (kertas putih, stempel, faktur, fotokopi). mono-white dipakai di atas latar gelap atau foto (footer gelap, kaos hitam, banner berfoto). Versi satu warna ini menjaga logomu tetap terbaca saat warna penuh tidak mungkin — misalnya cap karet hanya punya satu warna tinta, dan logo di atas foto ramai butuh kontras tegas agar tidak hilang.

Untuk pemakaian sehari-hari: pakai varian horizontal di header website dan kop surat, varian stacked untuk badge atau watermark, dan varian icon di mana ruangnya sempit dan bulat (avatar, favicon, tombol aplikasi). Satu logo, banyak bentuk, semuanya sudah disiapkan supaya kamu tidak perlu memotong atau mengubah ukuran sendiri.

Folder favicon/ — pasang ikon di tab browser

Folder favicon/ membuat logomu muncul sebagai ikon kecil di tab browser dan saat situs disimpan ke layar HP. Isinya: favicon.ico, beberapa app icon (untuk Android dan iOS), safari-pinned-tab.svg, site.webmanifest, browserconfig.xml, dan head-snippet.html.

Cara memasangnya:

1. Unggah semua file favicon ke folder akar website-mu (root, sejajar dengan index).
2. Buka head-snippet.html, salin isinya, lalu tempel ke dalam bagian HEAD di tiap halaman situsmu.

Pakai WordPress? Lebih mudah lewat menu Appearance → Customize → Site Identity → Site Icon, lalu unggah PNG persegi 512×512 dari folder ini. Tapi memasang head-snippet tetap memberi cakupan paling lengkap (Android, iOS, Safari pinned tab, ubin Windows). Pelajari lebih dalam di apa itu favicon.

Folder social/ — media sosial tanpa terpotong

Folder social/ berisi semua yang kamu butuhkan untuk akun media sosial, sudah dipotong sesuai ukuran tiap platform:

• og-image — gambar yang muncul saat link situsmu dibagikan di WhatsApp, Facebook, atau X. Pasang lewat tag meta (sudah dirujuk di head-snippet) supaya tautanmu tampil rapi, bukan kosong.
• avatar/ — foto profil ukuran tepat per platform. Unggah sebagai foto profil Instagram, Facebook Page, X, LinkedIn, TikTok, dan WhatsApp Business. Karena ditampilkan bulat, elemen penting sudah diletakkan di tengah.
• cover/ — gambar header/sampul untuk Facebook, X, LinkedIn, dan YouTube, masing-masing pada rasio yang benar.
• template/ — kerangka post siap edit untuk konten feed dan promo.

Aturan emasnya: jangan meregangkan satu gambar ke semua platform — pasti terpotong. Pakai file yang sudah disiapkan per platform. Untuk daftar ukuran lengkap dan area aman, lihat ukuran logo media sosial.

Folder print/ — kirim ini ke percetakan

Folder print/ berisi PDF siap cetak dengan bleed (kelebihan area potong 3mm) dan crop marks (tanda potong). Inilah file yang kamu kirim ke percetakan — bukan PNG dari folder lain.

Kenapa penting? PDF ini vektor: percetakan bisa menskalakan ke ukuran apa pun tanpa pecah, warnanya akurat, teksnya sudah di-outline (jadi percetakan tidak butuh font-mu), dan bleed plus crop marks memastikan hasil terpotong rapi sampai ke tepi. PNG akan terlihat buram saat dicetak dan tidak punya area bleed.

Aturan praktis: kalau urusannya tinta dan kertas, ambil dari folder print/. Kalau urusannya layar, ambil dari logo/ atau social/.

Folder stationery/ — kartu nama dan kop surat

Folder stationery/ berisi pratinjau PNG dari materi resmi bisnismu: kartu nama, kop surat (letterhead), amplop, ID card, dan pratinjau stempel. PNG ini untuk melihat tampilan akhir dan berbagi mock-up — misalnya menunjukkan ke tim atau klien sebelum mencetak.

Untuk dicetak sungguhan, pasangan vektornya ada di folder print/. Jadi alurnya: pakai PNG stationery untuk pratinjau dan persetujuan, lalu kirim PDF print ke percetakan.

Folder documents/ — Word, pedoman, dan filosofi

Folder documents/ berisi berkas kerja sehari-hari dan dokumen brand:

• letterhead-editable.docx — kop surat yang bisa kamu edit langsung di Microsoft Word. Pakai untuk surat resmi, penawaran, dan invoice. Logonya sudah tertanam; kamu tinggal mengetik isi surat.
• brand-guidelines.pdf — pedoman brand: aturan jarak aman, ukuran minimum, larangan distorsi, dan sistem warna. Bagikan ke siapa pun yang memakai logomu (desainer, percetakan, tim) supaya brand tampil konsisten.
• logo-philosophy.pdf — cerita di balik logomu: makna bentuk dan warna. Berguna untuk halaman "Tentang Kami" dan deck investor.
• email-signature.html dan logo-email.png — tanda tangan email, dibahas di bawah.

Untuk dokumen Office (Word, Google Docs, Excel), pakai logo PNG dari folder logo/ — bukan SVG, karena Office menangani PNG paling mulus.

Cara memasang tanda tangan email

Buka email-signature.html dengan browser untuk melihat tampilannya. Untuk memakainya:

1. Gmail: buka Settings → See all settings → General → Signature. Buka file HTML di browser, blok seluruh tanda tangan, salin (Ctrl+C), lalu tempel ke kotak signature.
2. Outlook: masuk ke pengaturan Signature dan tempel dengan cara yang sama.

Logo di tanda tangan memakai logo-email.png — sebuah PNG kecil teroptimasi agar muncul rapi di email. Jika logonya tidak tampil, unggah logo-email.png ke hosting gambar (atau server-mu) dan ganti alamatnya di HTML. Sentuhan kecil ini membuat email pertamamu terlihat mapan.

brand-tokens.json — untuk developer dan Tailwind

Berkas brand-tokens.json di akar ZIP adalah hadiah untuk developer. Isinya nilai brand-mu dalam format mesin yang bisa dibaca program: kode warna (HEX), nama huruf, dan radius sudut — siap disalin langsung ke kode tanpa perlu menebak atau menyalin manual dari PDF.

Kalau kamu (atau tim devmu) membangun website, impor token ini ke konfigurasi Tailwind CSS atau jadikan CSS variables. Hasilnya: warna dan huruf di website persis sama dengan logomu, tanpa salah ketik kode warna. Desainer membaca brand-guidelines.pdf; developer membaca brand-tokens.json.

Pertanyaan singkat (FAQ)

File mana untuk logo website? SVG dari folder logo/ (paling tajam dan ringan). Tidak bisa pakai SVG? Gunakan WebP, dengan PNG sebagai cadangan.

File mana yang dikirim ke percetakan? PDF dari folder print/. Jangan pernah mengirim PNG — hasilnya buram dan tanpa bleed.

Bagaimana memasang favicon? Unggah semua file folder favicon/ ke akar situs, lalu tempel isi head-snippet.html ke bagian HEAD. Di WordPress bisa lewat Site Icon.

Kapan pakai mono-black vs mono-white? mono-black di atas latar terang; mono-white di atas latar gelap atau foto.

Kapan pakai JPG? Hanya saat platform menolak PNG transparan (sebagian form dan marketplace). JPG punya latar putih solid.

Mulai sekarang

Sekarang kamu tahu persis file mana untuk setiap kebutuhan. Simpan ZIP aslinya sebagai arsip, lalu pakai panduan ini sebagai rujukan setiap kali butuh aset baru. Belum punya brand kit, atau ingin versi yang lebih lengkap? Rakit logomu di EmblemKit Studio — gratis dicoba — dan lihat pilihan paket di halaman harga.

Buat brand kit-mu di EmblemKit Studio →