Cara membuat favicon
Ukuran, format dan kode yang dibutuhkan agar favicon muncul di mana-mana.
Favicon adalah ikon kecil di tab browser, di daftar bookmark, dan di sebelah situs Anda pada hasil pencarian Google di ponsel. Situs tanpa favicon terasa belum selesai, dan favicon yang buram memberi kesan lebih buruk lagi. Membuatnya dengan benar hanya butuh beberapa menit.
Mulai dari gambar yang tepat
Favicon kadang tampil sekecil 16 kali 16 piksel, jadi logo lengkap beserta nama merek pasti tidak terbaca. Pakai tanda yang sederhana: simbol dari logo Anda, satu huruf awal, atau bentuk tegas dalam warna merek. Uji dengan mengecilkannya sampai seperempat di layar: bila masih bisa dikenali, ia akan bekerja.
Mulailah dari gambar persegi berukuran minimal 512 kali 512 piksel, idealnya PNG berlatar transparan. Bila logo Anda tidak persegi, potong menjadi persegi dengan rasio dikunci 1:1.
File yang Anda butuhkan
| File | Ukuran | Dipakai oleh |
|---|---|---|
| favicon.ico | Berisi versi 16, 32 dan 48 piksel | Browser, sistem lama, permintaan bawaan ke /favicon.ico |
| Ikon PNG | 32 kali 32 dan 192 kali 192 | Browser modern, layar utama Android |
| apple-touch-icon.png | 180 kali 180 | Pintasan layar utama di iPhone dan iPad |
Pencarian Google juga memakai favicon Anda di hasil pencarian. Ikonnya harus persegi, minimal 48 kali 48 piksel, dan bisa diakses perayap di situs Anda.
Membuat file ICO
Letakkan PNG persegi Anda di konverter PNG ke ICO. Hasilnya file .ico sungguhan yang memuat ukuran-ukuran kecil yang diminta browser. Untuk versi PNG-nya, ubah ukuran gambar persegi yang sama menjadi 180, 192 dan 32 piksel.
Memasangnya di situs
Unggah favicon.ico ke akar situs agar bisa diakses di situsanda.com/favicon.ico, lalu tambahkan baris berikut di bagian head halaman Anda:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Di WordPress, buka Tampilan, Sesuaikan, Identitas Situs, lalu unggah gambar persegi sebagai Ikon Situs; WordPress membuat ukuran-ukurannya untuk Anda. Shopify, Wix dan Squarespace masing-masing punya pengaturan favicon di setelan situs atau tema.
Ketika favicon baru belum muncul
Browser menyimpan favicon di cache dengan keras kepala. Buka situs di jendela penyamaran, atau kunjungi langsung situsanda.com/favicon.ico lalu segarkan. Google bisa butuh beberapa hari sampai beberapa minggu untuk memperbarui ikon di hasil pencarian, setelah halaman depan Anda dirayapi ulang.
Kesalahan yang sering terjadi
- Memakai logo lengkap berisi teks kecil, yang berubah jadi noda pada 16 piksel.
- Ikon putih berlatar transparan, yang hilang di tab bertema terang.
- Hanya menyediakan file 16 piksel, yang tampak buram di layar beresolusi tinggi.
- Lupa menaruh file di /favicon.ico, yang tetap diminta sebagian browser dan perayap apa pun isi tag di halaman.