Favicon

Favicon adalah ikon kecil yang mewakili halaman: ikon ini tampil pada tab browser, daftar bookmark, riwayat, layar utama ponsel, hingga samping sebagian hasil pencarian. Ukurannya kecil, tetapi kemunculannya luas, sehingga ketiadaannya mudah terlihat. Berbeda dari metadata sebelumnya, favicon dinyatakan dengan elemen link, bukan elemen meta. Pada Chapter ini kita memasang favicon modern berformat SVG, menyediakan cadangan ICO, dan mengetahui konvensi yang bekerja tanpa markup sekalipun.

Elemen link rel icon #

Favicon dihubungkan lewat elemen link dengan rel="icon": atribut href menunjuk file ikon dan atribut type memberi petunjuk jenis MIME-nya, misalnya image/svg+xml untuk SVG dan image/x-icon untuk ICO. Satu halaman boleh memuat beberapa link icon dengan format berbeda; browser memilih yang paling didukungnya. Atribut sizes dapat menambahkan informasi ukuran bagi ikon bitmap, misalnya sizes="32x32".

Format ICO, PNG, dan SVG #

SVG menjadi pilihan modern karena skalanya bebas: file yang sama terlihat baik pada favicon 16 piksel maupun ikon layar utama. ICO tetap relevan sebagai cadangan bagi browser dan alat yang tidak membaca SVG. PNG lazim dipakai bila platform menuntut ukuran pasti, seperti ikon 180x180 piksel untuk iOS.

Konvensi favicon.ico di Akar Situs #

Browser yang tidak menemukan link icon masih mencoba mengambil file bernama favicon.ico di akar situs, misalnya pada alamat www.example.com/favicon.ico. Konvensi ini bekerja tanpa markup apa pun, sehingga menyediakan file tersebut mencegah permintaan gagal yang terekam di log server. Satu catatan dari situs lama: rel shortcut icon sering dijumpai, padahal MDN menandai shortcut sebagai link type yang tidak konform dan diabaikan; cukup tulis rel="icon".

apple-touch-icon dan Manifest #

Perangkat iOS memakai link type non-standar apple-touch-icon untuk ikon saat halaman disimpan ke layar utama; Safari di iOS mengabaikan atribut sizes, sehingga satu PNG 180x180 piksel menjadi pilihan praktis. Untuk aplikasi web yang lebih utuh, standar menyediakan elemen link dengan rel manifest yang menunjuk file manifest PWA: ikon, nama, dan warna aplikasi dihimpun di sana dalam satu tempat. Keduanya cukup ditulis sebagai satu baris link di head yang sama.

Contoh Head dengan Favicon SVG dan ICO #

File berikut memasang favicon SVG dengan cadangan ICO, ditambah apple-touch-icon untuk perangkat iOS. File favicon.ico dan apple-touch-icon.png tidak disertakan di bundle; sediakan sendiri bila ingin menguji penuh, karena validator tidak memeriksa keberadaan file:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Toko Budi</title>
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
  <h1>Profil Toko Budi</h1>
  <p>Favicon tampil pada tab, bookmark, riwayat, dan layar utama ponsel.</p>
</body>
</html>

Isi file favicon SVG-nya sederhana:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect width="64" height="64" rx="12" fill="#1a6b54"/>
  <text x="32" y="45" font-family="Arial, sans-serif" font-size="38" font-weight="bold" fill="#ffffff" text-anchor="middle">B</text>
</svg>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Ikon huruf B berlatar hijau pada tab browser
  - Ikon yang sama pada bookmark dan riwayat
  - Bila halaman disimpan ke layar utama iOS: ikon PNG 180x180 piksel

Mari kita telaah peran setiap baris penting di atas:

1. Baris 7 (icon SVG): format utama; vektor yang tetap tajam pada ukuran mana pun.
2. Baris 8 (icon ICO): cadangan bagi browser dan alat lama yang tidak mendukung SVG.
3. Baris 9 (apple-touch-icon): ikon PNG untuk layar utama perangkat iOS.
4. File favicon.svg: ikon huruf B berlatar hijau; kotak membulat lewat rx, teks dipusatkan lewat text-anchor.

Identitas visual kini lengkap dari tab hingga layar utama. Chapter berikutnya memperluas metadata ke konten yang dibagikan: kartu pratinjau tautan di media sosial lewat protokol Open Graph.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen link
• MDN Web Docs — Atribut rel (icon)
• WHATWG — HTML Living Standard: Link types

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Toko Budi</title>
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
  <h1>Profil Toko Budi</h1>
  <p>Favicon tampil pada tab, bookmark, riwayat, dan layar utama ponsel.</p>
</body>
</html>