MulaiCode
HTML

HTML Favicon

Pelajari cara menambahkan favicon (ikon kecil di tab browser) ke halaman web menggunakan HTML.

HTML Favicon

Favicon adalah ikon kecil yang muncul di tab browser, di sebelah judul halaman. Favicon membantu pengguna mengidentifikasi dan mengenali halaman web dengan cepat, bahkan jika mereka memiliki beberapa tab yang terbuka.


Cara Menambahkan Favicon di HTML

Untuk menambahkan favicon ke halaman web, kamu perlu menggunakan tag <link> di dalam elemen <head>. Biasanya, favicon berupa file gambar dengan ekstensi .ico, .png, atau .jpg.

Berikut adalah contoh cara menambahkan favicon:

<!DOCTYPE html>
<html>
<head>
  <title>Halaman Web dengan Favicon</title>
  <!-- Menambahkan favicon -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <h1>Selamat datang di halaman web kami!</h1>
</body>
</html>

Jenis Favicon yang Dapat Digunakan

  1. ICO: Format yang paling umum digunakan untuk favicon.
  2. PNG: Format gambar yang lebih modern dan mendukung transparansi.
  3. JPG: Digunakan jika ingin menggunakan gambar berwarna penuh, namun tidak mendukung transparansi.

Tips Menggunakan Favicon

  • Pastikan favicon memiliki ukuran yang sesuai, yaitu 16x16 piksel atau 32x32 piksel.
  • Kamu bisa menyediakan favicon dalam beberapa ukuran untuk mendukung berbagai perangkat dan resolusi.
  • Pastikan favicon mudah dikenali, menggunakan gambar yang sederhana dan jelas.

Dengan menambahkan favicon, halaman web kamu akan lebih profesional dan memudahkan pengguna dalam mengenali tab browser kamu.

On this page