Docs/HTML/Favicon

HTML Favicon

Favicon adalah ikon kecil yang muncul di tab browser, bookmark, dan history.

Cara Menambahkan Favicon

  • Taruh file favicon.ico di root folder (otomatis terdeteksi)
  • Atau gunakan tag <link> di <head>

Format yang Didukung

  • .ico — format tradisional (wajib untuk kompatibilitas)
  • .png — modern, lebih fleksibel
  • .svg — vector, bisa berubah warna dengan dark mode

Ukuran yang Dibutuhkan

  • 16×16 — tab browser
  • 32×32 — shortcut/bookmark
  • 180×180 — Apple touch icon
  • 192×192 / 512×512 — Android/PWA
index.html
Try It →
<!DOCTYPE html>
<html>
<head>
  <!-- Favicon standar -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  
  <!-- PNG Favicon (modern) -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  
  <!-- SVG Favicon (terbaru, support dark mode) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  
  <!-- Apple Touch Icon -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  
  <!-- Android / PWA -->
  <link rel="manifest" href="/site.webmanifest">
  
  <title>My Website</title>
</head>
<body>
  <h1>Lihat tab browser — ada favicon!</h1>
  <p>Favicon bisa dibuat dengan tools online seperti favicon.io atau realfavicongenerator.net</p>
</body>
</html>
← Previous
SVG
Next →
Best Practices