Coba buka 10 tab di browser. Pas tab udah banyak, judulnya kepotong, susah cari yang mana. Tapi kalo tiap tab punya ikon kecil khas (favicon Twitter, favicon YouTube, favicon Tokopedia) — kamu langsung tau yang mana cuma dari liat ikon. Itulah kekuatan favicon: brand recognition dalam 16×16 pixel. Open Graph kerja serupa tapi buat link sharing — preview cantik pas link kamu di-share di WhatsApp/Twitter/LinkedIn.

🤔 Detail kecil, dampak besar. Website tanpa favicon = tab keliatan generik kayak file system default. Website tanpa OG meta = link sharing keliatan polos kayak spam. Lima menit setup awal yang bikin web kamu "feel professional" sebelum konten pertama dilihat.

Favicon adalah ikon kecil di tab browser:

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
<link rel="apple-touch-icon" href="/apple-icon.png">

Open Graph Tags

Mengontrol tampilan saat link di-share di media sosial (WhatsApp/Facebook/LinkedIn):

<meta property="og:title" content="Judul Halaman">
<meta property="og:description" content="Deskripsi singkat">
<meta property="og:image" content="https://example.com/gambar.jpg">
<meta property="og:url" content="https://example.com/halaman">
<meta property="og:type" content="website">

Twitter Cards

Twitter punya format spesifik (mirip OG tapi pakai prefix twitter:):

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Judul">
<meta name="twitter:image" content="https://example.com/gambar.jpg">

🎭 Analogi sehari-hari

Favicon itu kayak logo kecil di pojok paspor — kelihatan kecil tapi langsung dikenali brand-nya. Open Graph itu kayak brosur lipat yang muncul pas link kamu di-share ke WhatsApp/Twitter — gambar gede menarik perhatian, judul jelas, deskripsi ngajak klik. Link tanpa OG meta = brosur polos yang gak ada yang mau klik. Link dengan OG meta lengkap = preview cantik yang naikin click-through rate berkali-kali lipat.

⚠️ Jebakan yang sering ditemui

• og:image butuh URL ABSOLUTE (https://...), tidak relative. Sosmed crawler tidak resolve dari halaman.
• og:image minimal 1200×630px untuk preview cantik (twitter:card "summary_large_image").
• Image size > 5MB sering ditolak crawler.
• Cache sosmed agresif — Twitter/Facebook cache OG meta. Pakai cache buster (?v=2) atau debug tool (opengraph.xyz) untuk refresh.
• Favicon multi-size — favicon.ico legacy (16/32px), apple-touch-icon.png (180px) untuk iOS, manifest.json untuk PWA.
• og:type matters — article, website, video.movie — beda preview di sosmed.
• twitter:card types: summary (kecil), summary_large_image (preview besar).

TL;DR: Favicon = ikon di tab browser — <link rel="icon"> (favicon.ico legacy + PNG 32px + apple-touch-icon 180px buat iOS). Open Graph = preview link saat share di sosmed (og:title/og:description/og:image/og:url/og:type). og:image WAJIB URL absolute, minimal 1200×630px. Twitter Cards: twitter:card (summary_large_image buat preview besar). 5 menit setup yang bikin web "feel professional". Cache sosmed agresif — pakai cache buster (?v=2) buat refresh.