Bahasa Indonesia
Cara membuat favicon untuk website
Favicon generator membuat ikon kecil yang tampil di tab browser, bookmark, dan layar utama HP, lengkap dengan semua ukuran yang diminta tempat-tempat itu. Caranya tiga langkah:
- Pilih Teks atau emoji, atau unggah logomu. Untuk teks, satu atau dua huruf paling mudah dibaca pada 16 px.
- Atur warna latar, bentuk, dan ukuran. Pratinjau tab di sebelah kanan ikut berubah saat kamu mengetik.
- Klik Unduh semua (.zip), unggah filenya ke folder utama (root) situsmu, lalu tempel snippet HTML ke bagian head halaman.
Semua digambar di browser kamu. Logomu tidak diunggah ke mana pun.
File favicon apa saja yang dibutuhkan?
| File | Ukuran | Dipakai untuk |
|---|---|---|
| favicon.ico | 16, 32, dan 48 px dalam satu file | Tab browser, dan browser lama yang otomatis mencari /favicon.ico |
| favicon.svg | Skalabel | Browser modern, tetap tajam di ukuran berapa pun (tersedia untuk ikon teks dan emoji) |
| favicon-32x32.png, favicon-16x16.png | 32 dan 16 px | Tab dan bookmark dalam format PNG |
| apple-touch-icon.png | 180 × 180 px | Layar utama iPhone dan iPad |
| icon-192.png, icon-512.png | 192 dan 512 px | Layar utama Android, aplikasi web yang dipasang |
| icon-maskable-512.png | 512 px, penuh sampai tepi | Ikon Android yang dipotong jadi lingkaran atau squircle |
| site.webmanifest | File teks | Memberi tahu Android ikon, nama, dan warna yang dipakai |
Apa itu maskable icon?
Android memotong ikon peluncur sesuai bentuk tema HP, sering kali lingkaran. Maskable icon mengisi seluruh persegi dengan warna latarmu dan menaruh logo di zona aman bagian tengah, jadi tidak ada bagian penting yang terpotong. Tool ini mengecilkan gambarmu jadi 80 persen untuk file maskable dan menampilkan potongan lingkarannya di pratinjau. Ikon biasa yang sudut membulat akan tampil dengan bingkai putih di Android.
Kenapa ikon Apple tidak punya sudut membulat?
iOS memberi sudut membulat sendiri dan mengisi pixel transparan dengan warna hitam. Karena itu apple-touch-icon 180 px selalu berbentuk persegi penuh. Kalau kamu memilih latar transparan, file itu diberi latar putih.
Apakah file .ico-nya benar-benar multi ukuran?
Ya. File itu berisi tiga gambar terpisah, 16, 32, dan 48 px, yang masing-masing digambar langsung di ukurannya, bukan dikecilkan belakangan, jadi versi kecilnya tetap terbaca. Di dalamnya setiap gambar disimpan sebagai PNG, yang dibaca semua browser terkini dan Windows sejak Vista. Software yang sangat tua seperti Windows XP mungkin tidak bisa.
File favicon ditaruh di mana?
Di folder utama situsmu, supaya situskamu.com/favicon.ico bisa dibuka. Tempel snippet di antara tag head. Kalau ikon disimpan di subfolder, ketik di kolom Path (misalnya /assets/icons/) dan snippet serta manifest akan mengarah ke sana.
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Favicon tidak berubah? Penyebab yang sering terjadi
- Browser menyimpan favicon di cache cukup lama. Buka alamat ikonnya langsung (situskamu.com/favicon.ico), muat ulang dengan Ctrl+F5, atau coba di jendela penyamaran.
- Google Search menampilkan salinan favicon miliknya sendiri dan baru memperbarui setelah situsmu dikunjungi ulang, yang bisa memakan beberapa hari sampai minggu. Panduannya meminta ikon persegi dengan ukuran kelipatan 48 px, dan file .ico di sini sudah memuat 48.
- Garis tipis dan teks kecil hilang pada 16 px. Huruf tebal, bentuk sederhana, atau emoji lebih cocok daripada logo lengkap.
- Logo gelap dengan latar transparan sulit terlihat di tab mode gelap. Pakai warna latar solid untuk kasus itu.
Seperti apa favicon yang bagus di ukuran 16 pixel?
Ikon tab kira-kira sebesar huruf kecil, jadi detail halus tidak akan terlihat. Pilih satu huruf tebal atau bentuk sederhana, pakai dua warna yang kontrasnya kuat (putih di atas biru tua cocok), dan sisakan ruang kosong di tepinya. Huruf dengan ukuran 70 persen dari ikon adalah titik awal yang baik. Kalau kamu memakai foto atau logo yang rumit, cek dulu pratinjau 16 px. Kalau kamu sendiri tidak bisa mengenali gambarnya, sederhanakan atau pakai huruf pertama dari nama brand.
Apa isi site.webmanifest?
File JSON kecil berisi nama aplikasi, nama pendek untuk layar utama, ikon 192 dan 512 px, warna tema, dan warna latar. Chrome di Android memakainya saat seseorang memasang situsmu ke layar utama, dan dua ukuran ikon itu wajib ada supaya tawaran pasang muncul. Teks pratinjau di halaman ini sama persis dengan file yang masuk ke ZIP, jadi kamu bisa membacanya dulu sebelum mengunduh.
Pertanyaan yang sering diajukan
Bagaimana cara membuat favicon dari gambar?
Pilih Gambar, tarik logomu ke kotak, lalu pilih Muat di dalam atau Isi penuh. Setelah itu klik Unduh semua (.zip). PNG persegi minimal 512 × 512 px menghasilkan ukuran kecil yang paling tajam.
Ukuran favicon yang benar berapa?
Pakai favicon.ico yang berisi 16, 32, dan 48 px, ditambah apple-touch-icon 180 × 180 dan ikon 192 serta 512 px untuk Android. Tool ini membuat semuanya dari satu desain.
Bolehkah emoji dipakai sebagai favicon?
Boleh. Pilih emoji dari daftar atau tempel ke kolom teks. Emoji digambar dengan font emoji di perangkatmu, jadi tampilannya mengikuti sistem kamu. Untuk ikon SVG, tiap browser menggambar emoji dengan fontnya sendiri.
Bagaimana cara memasang favicon di website?
Unggah filenya ke folder utama situsmu, lalu tempel snippet HTML di dalam tag head halaman. Baris yang paling penting adalah <link rel="icon" href="/favicon.ico" sizes="any">.
Kenapa favicon saya tidak muncul?
Browser menyimpan favicon di cache cukup lama. Buka /favicon.ico langsung, muat ulang dengan Ctrl+F5, atau coba di jendela penyamaran. Periksa juga apakah file ada di folder utama dan path di snippet sudah benar.
Apa itu maskable icon?
Ikon Android yang mengisi seluruh persegi, sehingga HP bisa memotongnya jadi lingkaran atau bentuk lain tanpa bingkai putih. Gambarnya dijaga tetap di zona aman bagian tengah.
Apakah file .ico-nya benar-benar multi ukuran?
Ya, isinya gambar 16, 32, dan 48 px yang terpisah, masing-masing digambar di ukurannya sendiri dan disimpan sebagai PNG. Kamu bisa memeriksanya dengan membuka file itu di aplikasi gambar yang menampilkan daftar ukuran ikon.
Apakah gambar saya diunggah ke server?
Tidak. Ikon digambar dengan canvas di browser kamu dan dikemas ke ZIP di perangkatmu. Tidak ada yang dikirim ke server.