Favicon HTML: Cara Menambahkan Favicon dengan link rel=icon

Cara menambahkan favicon

Simpan ikonmu di situs dan tunjuk file itu dari tag <link rel="icon"> di dalam <head>:

<link rel="icon" href="/favicon.ico">

Hanya itu yang dibutuhkan untuk situs sederhana. href bisa menunjuk ke file .ico, .png atau .svg. Contoh di bawah memakai SVG yang ditulis langsung di href sebagai data URI, jadi tidak butuh file terpisah. Pratinjau di dalam halaman lain tidak bisa mengubah tab browser-mu, jadi script-nya menggambar ikon yang sama di tab tiruan dan dalam tiga ukuran:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

Di ukuran 16 piksel hanya ada ruang untuk satu huruf tebal atau satu bentuk sederhana, dan detail halus akan hilang. Rancang ikonnya untuk ukuran terkecil lebih dulu. Ubah fill='%232563eb' ke warna lain (%23 adalah # yang di-encode untuk URL) dan setiap salinannya ikut berubah.

File yang perlu disediakan

Browser, ponsel, dan peluncur aplikasi mencari ikon yang berbeda-beda. Sekumpulan kecil file sudah mencakup semuanya:

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

Kebanyakan browser juga meminta /favicon.ico dari root situs dengan sendirinya saat sebuah halaman tidak punya link ikon, jadi menaruh favicon.ico di sana adalah default yang berguna. Atribut sizes memberi tahu browser ukuran setiap file, supaya browser bisa memilih yang paling cocok. Pakai rel="icon"; rel="shortcut icon" yang lebih lama hanya berfungsi karena browser mengabaikan kata tambahannya.

Favicon emoji

Untuk prototipe atau halaman pribadi, emoji bisa menjadi favicon yang cepat dibuat. Taruh di dalam elemen SVG <text>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA adalah emoji kue kering, yang di-encode untuk URL. Emoji digambar oleh font emoji sistem operasi, jadi tampilannya berbeda di Windows, macOS, dan Android, dan untuk produk sungguhan ikon yang didesain adalah pilihan yang lebih baik.

Ikon yang mengikuti mode gelap

Favicon SVG bisa membawa CSS-nya sendiri, termasuk media query prefers-color-scheme, jadi ikon gelap bisa berubah menjadi terang saat browser memakai tema gelap:

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Mengubah favicon dengan JavaScript

Situs memakai favicon yang berubah untuk titik notifikasi atau warna status. Gambar ikon baru di <canvas> lalu atur href link-nya ke gambar canvas itu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

Di halaman sungguhan di Chrome atau Firefox, ikon tab berubah setiap kali href diatur, pada saat yang sama dengan gambar pratinjau yang berubah di sini.

Kesalahan umum

• Path yang salah. href="favicon.ico" relatif terhadap halaman saat ini, jadi rusak di /blog/post. Pakai path dari root: href="/favicon.ico".
• Berharap perubahan langsung terlihat. Browser menyimpan favicon di cache dengan sangat kuat. Muat ulang dengan cache yang dikosongkan, atau ubah URL-nya (/favicon.ico?v=2) saat kamu mengganti ikon.
• Logo yang detail diperkecil sampai 16 piksel. Sederhanakan: satu huruf atau satu bentuk dengan kontras yang kuat.
• Hanya SVG. Tetap sediakan ICO atau PNG untuk browser yang tidak mendukung favicon SVG, dan tambahkan apple-touch-icon untuk iOS.
• Menaruh link di <body>. Simpan di <head> bersama tag title dan metadata lainnya.