Favicon dan Ikon

Ikon kecil di samping judul tab, di daftar bookmark, dan pada layar utama ponsel berasal dari metadata head, dan bukan dari konten halaman. Topik ini membahas link rel=“icon” beserta format berkas ikonnya, rel=“apple-touch-icon” untuk perangkat iOS, dan meta theme-color yang mewarnai antarmuka browser. Setelah mengikuti topik ini, satu set ikon lengkap dapat dipasang pada halaman dengan penempatan berkas yang benar.

Berkas ikon dan link rel=“icon”#

Browser meminta ikon situs pada alamat /favicon.ico di akar domain tanpa perlu diberi tahu, sebuah kebiasaan yang dibawa sejak era awal web. Apabila berkas itu tidak ada, permintaannya berakhir dengan error 404 pada log server dan browser menampilkan ikon kosong bawaannya. Deklarasi lewat elemen link memberi cara yang lebih fleksibel, yaitu menunjuk berkas ikon mana pun beserta formatnya.

Penulisan yang paling ringkas menggunakan rel=“icon” dengan href dan type. Nilai type menyatakan format berkasnya, misalnya image/svg+xml untuk SVG, image/png untuk PNG, dan image/x-icon untuk ICO. Browser modern mendukung SVG sebagai favicon, sedangkan ICO tetap disertakan demi kompatibilitas dengan alat lama yang belum membaca SVG. Tiga format tersebut dibandingkan pada tabel berikut.

Beberapa ukuran dapat dideklarasikan sekaligus dengan menuliskan beberapa link yang menyebut atribut sizes, dan browser memilih ukuran yang paling sesuai dengan kebutuhannya. Praktik ini umum digunakan untuk PNG yang disiapkan per ukuran, misalnya 32 kali 32 piksel dan 180 kali 180 piksel. Untuk SVG, satu berkas saja sudah cukup karena bentuknya dihitung ulang pada ukuran tampil apa pun.

apple-touch-icon untuk layar utama iOS#

Saat halaman disimpan ke layar utama perangkat iOS, sistem meminta ikonnya dari link beratribut rel=“apple-touch-icon”. Format yang diminta adalah PNG berukuran 180 kali 180 piksel, ukuran yang lazim saat ini. Atribut type tidak diperlukan karena sistem iOS sudah menganggap berkas yang dirujuk berformat PNG. Tanpa deklarasi ini, layar utama menampilkan cuplikan layar halaman sebagai ikonnya, dan hasilnya jarang terlihat rapi.

Berkas ikon ditulis sebagai persegi penuh tanpa sudut membulat, karena iOS memproses sudut itu sendiri saat menampilkan ikon di layar utama. Apabila sudut ikon dibulatkan lebih dahulu, hasilnya tampil dengan celah kosong pada keempat sudutnya. Dengan satu berkas berukuran 180 kali 180 piksel, seluruh ukuran turunannya diskalakan oleh sistem secara otomatis, sehingga banyak varian ukuran tidak diperlukan lagi.

theme-color untuk pewarnaan antarmuka#

Meta theme-color mewarnai bagian antarmuka browser yang mengelilingi halaman, misalnya bilah alamat pada ponsel dan bilah tab pada browser desktop tertentu. Nilainya berupa kode warna pada atribut content, dan sama seperti meta lain, elemennya ditulis dengan atribut name. Warna yang dipilih biasanya senada dengan warna utama halaman agar peralihan dari bilah browser ke kontennya terasa menyatu.

Atribut media dapat ditambahkan pada meta theme-color untuk memilih warna menurut kondisi perangkat. Dua meta theme-color dengan nilai media query prefers-color-scheme yang berbeda memberi warna terang dan gelap sekaligus, dan browser memilih yang sesuai dengan setelan penggunanya. Pewarnaan ini tidak menyentuh isi halaman sedikit pun, sehingga penerapannya aman ditambahkan kapan saja tanpa risiko pada tampilan konten.

Penempatan berkas pada proyek#

Konvensi penamaan yang mapan menyederhanakan pemasangan ikon. Berkas favicon.svg diletakkan di akar folder situs dan dirujuk dengan rel=“icon”, sedangkan apple-touch-icon.png menyertainya untuk layar utama iOS. Banyak proyek menambahkan favicon.ico di akar domain sebagai cadangan bagi alat yang masih memintanya secara otomatis. Berkas utuh berikut memasang ikon pada satu halaman beranda.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatan Harian</title>
  <meta name="theme-color" content="#2e6f9e">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
  <h1>Catatan Harian</h1>
  <p>Aplikasi catatan pribadi tanpa akun dan tanpa iklan.</p>
</body>
</html>

Baris 6 menyetel warna antarmuka senada dengan warna ikon, yaitu #2e6f9e. Baris 7 merujuk favicon.svg dengan type image/svg+xml, dan baris 8 merujuk apple-touch-icon.png yang perlu disediakan sebagai berkas PNG berukuran 180 kali 180 piksel. Ikon itu sendiri dibuat sebagai SVG berukuran 32 kali 32 piksel berikut, lalu disimpan sebagai favicon.svg di samping beranda.html.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#2e6f9e"/>
  <circle cx="16" cy="16" r="7" fill="#ffffff"/>
</svg>

Ukuran berkas ikon dapat diperiksa dari terminal untuk memastikan ikonnya benar-benar ringan.

# menampilkan ukuran berkas ikon dalam byte
wc -c favicon.svg

172 favicon.svg

Ikon berformat SVG berisi teks, sehingga ukurannya berhenti pada ratusan byte dan tetap tajam pada ukuran tampil apa pun. Berkas PNG untuk gambar serupa berukuran kilobyte karena berformat biner. Perbedaan itu terasa pada setiap permintaan halaman, karena ikon ikut diunduh hampir pada setiap kunjungan.

Kesalahan umum#

Alamat ikon salah atau berkasnya tidak ada. Browser diam-diam menampilkan ikon kosong bawaannya, dan kesalahannya baru terlihat pada tab network alat pengembang. Periksa href dengan membuka alamat ikonnya langsung di browser.

link ikon ditulis di dalam body. Elemen link hanya sah di dalam head, sehingga penempatan di body membuat dokumen tidak valid. Pindahkan seluruh link ikon ke dalam head.

apple-touch-icon dibuat dengan sudut membulat. iOS membulatkan sudutnya sendiri, sehingga ikon yang sudah dibulatkan tampil dengan celah kosong. Sediakan berkas PNG persegi penuh, lalu biarkan sistem yang memproses sudutnya.

Ringkasan#

• link rel=“icon” menunjuk berkas ikon beserta formatnya, dengan SVG sebagai pilihan utama dan ICO sebagai cadangan lama.
• rel=“apple-touch-icon” merujuk PNG persegi berukuran 180 kali 180 piksel untuk ikon layar utama perangkat iOS.
• meta theme-color mewarnai antarmuka browser dan dapat diberi varian terang gelap melalui atribut media.
• Konvensi yang mapan menempatkan favicon.svg, favicon.ico, dan apple-touch-icon.png di akar folder situs.

Referensi#

• Elemen link — MDN Web Docs — Atribut rel=“icon” dan rel=“apple-touch-icon” beserta type dan sizes.
• meta name=“theme-color” — MDN Web Docs — Pewarnaan antarmuka browser beserta atribut media.
• Metadata HTML — MDN Web Docs — Panduan menambahkan ikon kustom pada situs.
• Elemen link — WHATWG — Definisi resmi elemen link pada HTML Living Standard.