Ukuran, Format, dan Tag HTML Favicon
Favicon hanyalah file kecil, tetapi browser, ponsel, dan aplikasi web yang terpasang masing-masing mencari ukuran yang berbeda. Panduan ini menjelaskan file apa saja yang dibutuhkan situs web, cara mendeklarasikannya di HTML, dan cara mendesain ikon yang tetap terbaca pada ukuran 16 piksel.
Apa Itu Favicon
Favicon (singkatan dari "favourites icon") adalah gambar kecil yang menandai sebuah situs web di tab, bookmark, dan daftar riwayat. Ponsel menggunakan versi yang lebih besar saat situs ditambahkan ke layar utama, aplikasi web yang terpasang menggunakan ikon dari manifest-nya, dan sebagian mesin pencari menampilkan favicon di samping hasil pencarian. Karena tempat-tempat ini menggunakan ukuran yang berbeda, situs web biasanya menyediakan sekumpulan kecil file.
Favicon ICO, PNG, dan SVG
| Format | Isinya | Yang perlu diketahui |
|---|---|---|
ICO (favicon.ico) | Beberapa ukuran dalam satu file, sering kali 16, 32, dan 48 piksel | Format tertua. Banyak browser meminta /favicon.ico dari root situs meskipun halaman tidak menautkannya, sehingga file ini berguna sebagai cadangan. |
| PNG | Satu ukuran per file, dengan transparansi | Dideklarasikan dengan atribut sizes agar browser dapat memilih file yang sesuai. Juga digunakan untuk Apple touch icon dan ikon manifest. |
| SVG | Gambar vektor yang dapat diskalakan ke ukuran berapa pun | Didukung oleh sebagian besar browser desktop saat ini, tetapi tidak oleh semua browser, jadi tetap sediakan file ICO atau PNG. Favicon SVG dapat menyesuaikan diri dengan tema gelap melalui CSS. |
File ICO adalah wadah kecil: header-nya mencantumkan setiap gambar beserta ukuran dan posisinya, dan gambar-gambarnya dapat disimpan sebagai data PNG. Generator Favicon LeedyBox menulis favicon.ico yang berisi gambar PNG 16, 32, dan 48 piksel, ditambah file PNG untuk ukuran lainnya.
Ukuran Umum dan Tempat Penggunaannya
| Ukuran (piksel) | File umum | Penggunaan umum |
|---|---|---|
| 16 × 16 | favicon-16x16.png, di dalam favicon.ico | Tab dan bookmark di layar standar |
| 32 × 32 | favicon-32x32.png, di dalam favicon.ico | Tab di layar berkepadatan tinggi, sebagian pintasan |
| 48 × 48 | di dalam favicon.ico | Ikon pintasan dan ikon desktop yang lebih besar di sebagian sistem |
| 180 × 180 | apple-touch-icon.png | Ikon layar utama di iPhone dan iPad |
| 192 × 192 | android-chrome-192x192.png | Ikon layar utama di Android, tercantum dalam manifest |
| 512 × 512 | android-chrome-512x512.png | Dialog pemasangan dan layar pembuka (splash screen) aplikasi web |
Mulailah dari sumber persegi berukuran minimal 512 × 512 piksel, atau dari file SVG. Sumber yang kecil harus diperbesar untuk ikon yang lebih besar dan akan terlihat buram. Logo yang tidak persegi perlu diberi ruang tambahan di sekelilingnya atau harus dipotong.
Apple touch icon sebaiknya tidak transparan: sebagian perangkat Apple menampilkan area transparan sebagai hitam. Sebagai gantinya, isi latarnya dengan warna. iPhone dan iPad membulatkan sudutnya sendiri, sehingga file dapat berupa persegi biasa. Lihat cara kerja transparansi pada PNG dan JPG untuk penjelasan dasar tentang kanal alfa.
Tag HTML dan Web App Manifest
Letakkan file-file tersebut di folder root situs web dan tambahkan tag berikut di dalam <head> setiap halaman:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">Jika Anda juga memiliki favicon SVG, tambahkan <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Manifest (site.webmanifest) adalah file JSON kecil yang berisi nama situs, nama pendek, ikon 192 dan 512 piksel, warna tema, warna latar, dan mode tampilan seperti standalone. Jika file berada di folder lain, ubah setiap path di dalam tag dan di dalam manifest.
Mendesain untuk Ukuran Sangat Kecil
- Buat tetap sederhana. Pada 16 piksel, garis tipis, teks kecil, dan detail halus berubah menjadi kabur. Tanda yang disederhanakan, satu bentuk, atau satu atau dua huruf lebih efektif daripada logo lengkap dengan slogan.
- Gunakan kontras yang kuat. Perbedaan kecerahan yang jelas antara ikon dan latarnya lebih penting daripada warna merek yang persis.
- Gunakan sedikit padding. Ruang kosong memperkecil bagian ikon yang terlihat. Margin kecil dapat membantu ikon yang lebih besar, tetapi favicon kecil lebih mudah dikenali jika mengisi sebagian besar persegi.
- Periksa ukuran sebenarnya. Lihat ikon pada zoom 100% di tab, bukan hanya sebagai pratinjau yang diperbesar.
Tema Browser Gelap
Banyak orang menggunakan bilah tab gelap. Logo gelap dengan latar transparan bisa hampir tidak terlihat di sana, dan logo putih bisa menghilang di tema terang. Solusi yang umum adalah bentuk latar solid atau membulat di belakang logo, garis luar berwarna terang, atau favicon SVG yang mengubah warnanya dengan media query prefers-color-scheme (jika favicon SVG didukung). Generator LeedyBox menampilkan bilah tab terang dan gelap agar Anda dapat membandingkan keduanya.
Memperbarui Favicon dan Cache Browser
Browser menyimpan favicon di cache, terkadang untuk waktu yang lama, sehingga ikon baru mungkin tidak langsung muncul setelah Anda mengunggahnya. Hard refresh atau jendela pribadi dapat menampilkan versi barunya. Agar pengunjung yang kembali mengambilnya lebih cepat, ubah nama file atau tambahkan versi ke URL di tag Anda, misalnya /favicon-32x32.png?v=2. Ikon di bookmark dan hasil pencarian dapat memerlukan waktu lebih lama untuk diperbarui. Setelah setiap perubahan, uji hasilnya di browser dan perangkat yang penting bagi Anda.
Pertanyaan Umum
Apakah favicon.ico masih diperlukan?
Tidak wajib, tetapi file ini merupakan cadangan yang sederhana: banyak browser dan alat lain mencari /favicon.ico di folder root situs. Ukurannya hanya beberapa kilobyte.
Bisakah saya menggunakan JPG sebagai favicon?
Browser biasanya dapat menampilkannya, tetapi JPG tidak memiliki transparansi dan kompresinya dapat mengaburkan detail kecil. File PNG, ICO, atau SVG adalah pilihan yang lebih baik untuk ikon.
Mengapa favicon baru saya tidak muncul?
Paling sering karena ikon lama masih tersimpan di cache, atau path di tag HTML tidak sesuai dengan lokasi file diunggah. Buka URL setiap file langsung di browser untuk memastikan file tersebut dapat dimuat.