Gambar Generator favicon
Buat favicon lengkap dari satu gambar, mencakup semua ukuran yang dibutuhkan browser, iOS, dan Android, beserta kode HTML siap tempel.
Drag a file here, or
Square works best, at least 512×512. Everything is generated on your device.
Ready. Runs locally on your device.
File Anda tetap berada di perangkat Anda. Alat ini bekerja langsung di browser Anda, menggunakan perangkat Anda untuk memproses file Anda. Tidak ada yang dikirim ke server kami, dan kami tidak pernah menerima, menyimpan, atau melihat file maupun angka Anda.
Bagikan hasil
Kutip
Kutip halaman ini
Reembun. (2026, 31 Juli). Generator favicon. https://reembun.com/id/generator-favicon
Cara menggunakannya
Pilih gambar sumbernya
PNG atau SVG persegi berukuran 512 piksel ke atas memberi hasil paling bersih, karena semua ukuran lain diperkecil darinya.
Atur ikon maskable
Opsi inset maskable menjaga Android tidak memotong bagian penting logo Anda saat menerapkan bentuknya sendiri.
Unduh satu paket
Semua ukuran yang diminta browser, prompt pemasangan, dan layar utama iPhone dibuat di tab ini lalu dikemas sebagai ZIP, termasuk berkas .ico.
Pasang di situs Anda
Salin markup dan entri manifestnya ke halaman Anda, lalu unggah berkasnya ke alamat yang dirujuk markup tersebut.
Berkas yang perlu disiapkan
| Berkas | Ukuran | Untuk |
|---|---|---|
| favicon.svg | Bebas | Browser modern, tajam di semua resolusi |
| favicon.ico | 32 x 32 | Browser lama dan permintaan langsung ke akar situs |
| apple-touch-icon.png | 180 x 180 | Layar utama iOS |
| icon-192.png | 192 x 192 | Android dan manifest |
| icon-512.png | 512 x 512 | Layar splash aplikasi web |
Lima berkas ini menutupi seluruh kebutuhan nyata. Daftar dua puluh ukuran yang masih sering beredar berasal dari era ketika setiap perangkat meminta ukurannya sendiri.
Kode HTML
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Urutannya penting. Browser memilih yang terakhir yang dipahaminya, sehingga SVG diletakkan setelah ICO agar browser modern memakainya.
Merancang untuk ukuran kecil
Favicon paling sering terlihat pada 16 atau 32 piksel. Pada ukuran itu, hampir semua hal yang membuat logo bagus di kop surat justru merugikan.
- Satu elemen saja. Huruf pertama, simbol, atau bentuk khas. Bukan logo lengkap.
- Kontras tinggi. Ikon akan muncul di atas tab abu abu terang maupun gelap.
- Tanpa garis tipis. Garis di bawah dua piksel menghilang atau berubah menjadi kabur.
- Tanpa teks kecuali satu huruf. Kata apa pun tidak akan terbaca.
- Ruang kosong yang cukup. Ikon yang memenuhi bingkai sampai tepi terlihat sesak di sebelah favicon lain.
Uji rancangan Anda dengan mengecilkannya ke 16 piksel dan melihatnya pada ukuran sebenarnya, bukan pada tampilan yang diperbesar.
Untuk aplikasi web progresif
Bila situs Anda dapat dipasang ke layar utama, berkas manifest membutuhkan ikon 192 dan 512 piksel. Ikon 512 juga dipakai untuk layar pembuka. Sertakan juga versi maskable, yaitu ikon dengan ruang kosong di sekelilingnya agar tidak terpotong saat Android menerapkan bentuk ikon sistem.
Privasi
Gambar sumber diproses sepenuhnya di dalam browser Anda. Tidak ada unggahan, sehingga logo yang belum diluncurkan tetap aman diolah di sini.
Pertanyaan umum
Ukuran apa saja yang sebenarnya dibutuhkan?
Yang benar benar diperlukan hanya tiga, yaitu favicon SVG untuk browser modern, satu PNG 180 piksel untuk perangkat Apple, dan satu ICO 32 piksel untuk browser lama. Daftar panjang berisi belasan ukuran yang beredar di internet sudah lama tidak relevan.
Apakah favicon.ico masih dibutuhkan?
Masih berguna, karena sebagian peramban dan pengumpan berita meminta berkas di alamat /favicon.ico secara langsung tanpa membaca HTML. Menaruh satu berkas di sana mencegah permintaan yang gagal di log server Anda.
Kenapa favicon saya tidak berubah setelah diganti?
Karena favicon disimpan cache dengan sangat agresif oleh browser, kadang berhari hari. Coba muat ulang paksa, buka alamat berkas ikonnya secara langsung, atau tambahkan parameter versi pada alamatnya. Di ponsel, ikon layar utama hanya diperbarui bila pintasannya dibuat ulang.
Desain seperti apa yang bekerja pada ukuran kecil?
Satu bentuk atau satu huruf, kontras tinggi, dan tanpa detail halus. Pada 16 piksel, logo lengkap dengan teks berubah menjadi noda abu abu. Ambil elemen paling khas dari logo Anda dan buang sisanya.
Bagaimana agar favicon terlihat baik di mode gelap?
Gunakan SVG dengan media query prefers-color-scheme, sehingga ikon bisa mengubah warnanya mengikuti tema browser. Cara lain yang lebih sederhana adalah memakai warna yang cukup kontras terhadap latar terang maupun gelap, misalnya warna merek yang jenuh.
Terakhir ditinjau
