Cara Membuat Favicon
Untuk membuat favicon, tambahkan logo Anda di atas, atau ketik huruf atau emoji, atur tampilannya, lalu unduh ZIP-nya. Pratinjau menampilkan ikon pada setiap ukuran aslinya dan di tab browser, dalam mode terang dan gelap.
- Pilih sumbernya. Logo PNG atau SVG memberi hasil terbaik; gambar lain akan dimuat di dalam persegi. Belum punya logo? Gunakan huruf atau emoji di atas latar berwarna.
- Atur tampilannya. Warna latar belakang atau transparan, bentuk (persegi sudut membulat, persegi, atau lingkaran), dan seberapa besar padding di sekeliling gambar.
- Unduh. Unduh semua ikon memberi Anda paket lengkap; favicon.ico saja hanya memberi satu file itu.
Isi Paket Favicon
| File | Ukuran | Digunakan oleh |
|---|---|---|
favicon.ico | 16, 32, dan 48 px | Semua browser, Windows, hasil pencarian |
favicon-16x16.png, favicon-32x32.png | 16 dan 32 px | Tab browser dan bookmark |
apple-touch-icon.png | 180 px | Layar utama iPhone dan iPad |
android-chrome-192x192.png, -512x512.png | 192 dan 512 px | Layar utama Android, aplikasi web yang terpasang |
site.webmanifest | - | Menamai ikon dan warna untuk Android dan aplikasi web |
favicon-html.txt | - | Tag yang tinggal ditempel ke halaman Anda |
Ikon Apple selalu diberi latar belakang solid dan sudut persegi: iPhone membulatkan sudutnya sendiri dan menampilkan area transparan sebagai warna hitam.
Pasang Favicon di Website Anda
- Ekstrak paketnya dan unggah file ke folder root website Anda, di samping halaman
utama, sehingga
yoursite.com/favicon.icomembuka ikon tersebut. - Tempel tag HTML (ditampilkan di atas, dan di
favicon-html.txt) ke dalam<head>halaman Anda. - Muat ulang dengan cache dibersihkan. Browser menyimpan favicon lama, jadi jendela pribadi adalah cara pengecekan tercepat.
Di WordPress, Anda juga bisa mengatur ikon 512 px sebagai Site Icon di Customizer, dan WordPress akan membuat ukuran lainnya sendiri.
Tips Favicon yang Jelas
- Sederhanakan. Pada 16 piksel, logo yang detail akan menjadi buram. Gunakan simbol dari logo Anda, atau huruf pertamanya, bukan logo lengkap dengan teks.
- Gunakan kontras. Tab bisa terang atau gelap tergantung tema browser, jadi periksa kedua pratinjau.
- Perhatikan padding. Padding lebih kecil membuat ikon tampak lebih besar di tab; padding sedikit lebih besar terlihat lebih bagus di layar utama ponsel.
Butuh satu file .ico dengan ukuran lain? Gunakan konverter gambar yang bisa menyimpan gambar apa pun sebagai ICO.
Pertanyaan yang Sering Diajukan
Bagaimana cara membuat favicon?
Tambahkan logo atau gambar persegi apa pun ke kotak di halaman ini, atau ketik huruf atau emoji. Atur latar belakang, padding, dan bentuknya, lalu unduh ZIP berisi semua ukuran ikon beserta HTML yang tinggal Anda tempel ke situs.
Favicon membutuhkan ukuran berapa saja?
favicon.ico dengan versi 16, 32, dan 48 piksel mencakup browser dan Windows; apple-touch-icon 180 piksel untuk iPhone dan iPad; ikon 192 dan 512 piksel untuk Android dan aplikasi web yang terpasang. Semuanya sudah ada di dalam paket.
Bagaimana cara memasang favicon di website saya?
Unggah file dari ZIP ke folder root situs Anda, sehingga favicon.ico terbuka di yoursite.com/favicon.ico. Lalu tempel tag HTML ke bagian head di halaman Anda.
Mengapa favicon baru saya tidak muncul?
Browser menyimpan favicon di cache dalam waktu lama. Buka alamat favicon secara langsung, muat ulang, atau coba jendela pribadi. Hasil pencarian bisa butuh beberapa minggu untuk diperbarui.
Bisakah saya membuat favicon dari teks atau emoji?
Bisa. Pilih "Huruf atau emoji", ketik satu atau dua karakter, lalu pilih warnanya. Ini cara cepat untuk mendapatkan ikon yang rapi tanpa logo.
Apakah gambar saya diunggah?
Tidak. Semua ikon dibuat di browser Anda, dan gambar Anda tidak pernah meninggalkan perangkat.