faviconikonheadMenengah3 mnt baca

Favicon: Ikon Tab Browser

Pasang ikon kecil di tab browser dengan link rel icon: format ICO/PNG/SVG, berbagai ukuran, dan cara mengatasi cache favicon.

Apa Itu Favicon?

Perhatikan tab browser: di sebelah judul ada ikon kecil. Itulah favicon. Situs tanpa favicon tampil dengan ikon dokumen generik yang terlihat belum jadi. Detail kecil, tapi berpengaruh ke kesan profesional.

Cara Memasang

Taruh file ikon di folder situsmu, lalu daftarkan di <head>:

html
<head>
  <link rel="icon" type="image/png" href="/favicon.png">
</head>

Atribut type memberi tahu browser format file-nya. Browser modern mendukung PNG dan SVG, bukan cuma ICO seperti zaman dulu.

Format dan Ukuran

  • PNG 32x32 atau 48x48: aman dan didukung semua browser modern.
  • SVG: vektor, tajam di semua ukuran, ukuran file kecil. Dukungan bagus kecuali browser sangat lama.
  • ICO: format klasik dengan banyak ukuran dalam satu file. Masih berguna sebagai fallback.

Pola yang praktis untuk situs modern:

html
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Baris terakhir khusus iOS: ikon saat pengguna "Add to Home Screen" di iPhone. Ukurannya 180x180.

Membuat Favicon

Kamu tidak butuh desainer untuk favicon sederhana:

  1. Bikin logo sederhana di Figma atau Canva, export PNG 512x512.
  2. Resize ke 32x32 dan 180x180 (bisa pakai tool online gratis).
  3. Untuk SVG, gambar ulang sebagai vektor sederhana atau export SVG dari Figma.

Favicon tampil sangat kecil, jadi desainnya harus super sederhana: satu huruf, satu bentuk, kontras tinggi. Logo detail akan jadi bubur tak terbaca di ukuran 16 piksel.

Catatan teknis: Favicon di-cache browser dengan agresif. Kalau sudah pasang tapi ikon tidak berubah, lakukan hard refresh (Ctrl+Shift+R) atau buka di tab incognito. Trik lain: tambahkan query string versi, misalnya href="/favicon.png?v=2", untuk memaksa browser mengunduh ulang.

Lokasi File

Secara historis browser mencari /favicon.ico di root domain secara otomatis. Tapi jangan mengandalkan itu: daftarkan eksplisit dengan <link> supaya kamu kontrol file mana yang dipakai dan browser tidak menebak-nebak.

Contoh Lengkap

html
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Situsku</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>
<body>
  <h1>Halo!</h1>
</body>
</html>

Modul kecil tapi hasilnya langsung terlihat di setiap tab browser pengunjungmu.