HTML Favicon

HTML Dasar: Favicon

Apa Itu Favicon?

Favicon (singkatan dari favorite icon) adalah ikon kecil yang muncul di tab browser, bookmark, dan history saat seseorang mengunjungi situs web kamu. Favicon membantu memperkuat identitas visual dari website.

Format Favicon yang Umum

Format	Keterangan
`.ico`	Format klasik dan paling kompatibel
`.png`	Resolusi lebih tinggi, modern
`.svg`	Ikon vektor, ringan dan scalable

Cara Menambahkan Favicon di HTML

Tambahkan kode berikut di dalam tag <head> pada file HTML:

<link rel="icon" type="image/x-icon" href="favicon.ico" />

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Website Saya</title>
  <link rel="icon" type="image/png" href="favicon.png" />
</head>
<body>
  <h1>Selamat Datang di Website Saya!</h1>
</body>
</html>

Letak File Favicon

Biasanya favicon diletakkan di folder utama (root) bersama file index.html. Contoh struktur:

/project-folder
├── index.html
├── favicon.ico

Namun, kamu juga bisa menempatkan favicon dalam folder tertentu:

<link rel="icon" href="assets/images/favicon.png" />

Tips Penting

Pastikan favicon berukuran 16x16, 32x32, atau 64x64 piksel.
Gunakan favicon yang relevan dengan tema website kamu.
Simpan favicon dengan nama yang jelas, misalnya favicon.ico atau favicon.png.

Alternatif: Apple Touch Icon dan Android Favicon

Untuk dukungan perangkat mobile:

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

Kesimpulan

Favicon adalah ikon kecil yang mewakili website kamu di browser.
Gunakan tag <link rel="icon" ...> di dalam <head>.
Gunakan format .ico atau .png untuk kompatibilitas terbaik.
Letakkan favicon di root folder atau folder gambar.