Generator Favicon dari Inisial dan Emoji
Buat favicon yang sederhana dan mudah dikenali tanpa harus menyiapkan gambar terlebih dahulu. Masukkan satu atau dua inisial atau pilih satu emoji, lalu sesuaikan bentuk dan warna latar. Untuk desain teks, Anda juga dapat memilih warna karakter dan gaya font, sedangkan emoji mempertahankan tampilan asli dari browser. Pratinjau 512 px diperbarui di browser Anda, sedangkan hasil unduhan mencakup ikon browser berukuran kecil, ikon perangkat seluler, dan berkas konfigurasi yang dibutuhkan untuk memasang desain di situs. Tidak ada data yang diunggah dan alat ini tidak menggunakan AI.
Cara membuat favicon
-
1
Pilih isi ikon
Masukkan satu atau dua inisial untuk membuat lambang huruf yang ringkas, atau gunakan satu emoji sebagai desain.
-
2
Atur gaya desain
Pilih bentuk persegi, persegi bersudut bulat, atau lingkaran dan tentukan latarnya. Untuk teks, pilih juga warna karakter dan gaya font; emoji mempertahankan tampilan aslinya.
-
3
Periksa pratinjau
Lihat pratinjau 512 px dan pastikan desain tetap jelas saat diperkecil menjadi ikon tab browser 16 px.
-
4
Unduh dan pasang
Unduh paket favicon yang dibuat secara lokal, tambahkan berkasnya ke situs, lalu tempel atau sesuaikan cuplikan kode head yang disertakan.
Isi paket favicon
Satu desain favicon harus berfungsi di berbagai tempat, mulai dari tab browser yang kecil hingga layar utama ponsel. Generator ini merender desain yang sama dalam ukuran praktis berikut dan mengemas berkasnya secara lokal di browser.
| Berkas | Ukuran atau isi | Kegunaan utama |
|---|---|---|
favicon.ico |
Bingkai 16, 32, dan 48 px | Tab browser, markah, dan perangkat lunak yang masih meminta berkas ICO |
favicon-16x16.png |
16 × 16 px | Favicon browser berukuran kecil |
favicon-32x32.png |
32 × 32 px | Favicon browser standar |
apple-touch-icon.png |
180 × 180 px | Ikon sentuh Apple |
android-chrome-192x192.png |
192 × 192 px | Ikon aplikasi web Android berukuran lebih kecil |
android-chrome-512x512.png |
512 × 512 px | Ikon aplikasi web berukuran lebih besar |
mstile-150x150.png |
150 × 150 px | Gambar ubin Microsoft |
site.webmanifest |
Manifest JSON | Merujuk berkas ikon Android untuk browser yang memakai manifest aplikasi web |
browserconfig.xml |
Konfigurasi XML | Merujuk gambar dan warna ubin Microsoft |
favicon-head.html |
Cuplikan HTML | Referensi ikon, manifest, dan konfigurasi browser yang siap disalin |
Buat favicon yang tetap jelas pada 16 px
Favicon bukanlah poster yang diperkecil. Detail halus, kata panjang, dan perbedaan warna yang samar cepat menghilang saat ditampilkan di tab browser. Satu inisial tebal, lambang dua huruf yang pendek, atau emoji sederhana biasanya lebih mudah dikenali daripada komposisi yang rumit.
- Gunakan kontras yang kuat antara warna depan dan warna latar.
- Sisakan ruang di sekitar huruf atau emoji agar tidak terlihat sesak ketika platform menerapkan maskernya.
- Bandingkan bentuk persegi, persegi bersudut bulat, dan lingkaran sebelum memilih siluet yang paling jelas.
- Periksa ikon kecil hasil ekspor, bukan hanya pratinjau 512 px. Desain yang tampak rapi dalam ukuran penuh bisa sulit dikenali pada 16 px.
- Uji favicon yang sudah dipasang di lebih dari satu browser serta pada tampilan browser terang dan gelap.
Tambahkan berkas hasil ke situs Anda
Pertahankan nama berkas yang dibuat dan letakkan berkas di lokasi yang dirujuk oleh cuplikan kode head, biasanya di direktori utama situs. Tempelkan cuplikan tersebut ke dalam <head> setiap templat halaman. Jika kerangka kerja Anda menyajikan aset statis dari direktori lain atau jaringan pengiriman konten, ubah jalur di cuplikan, manifest, dan konfigurasi browser sebelum dipublikasikan.
Berkas yang disertakan menyediakan referensi ikon, tetapi tidak otomatis membuat situs dapat dipasang sebagai aplikasi web progresif. Pemasangan mungkin memerlukan kolom manifest tambahan, hosting yang aman, dan persyaratan khusus browser.
Pertanyaan yang Sering Diajukan
Bisa. Masukkan satu atau dua inisial, lalu pilih bentuk, warna latar, warna depan, dan gaya font. Teks sengaja dibatasi agar lebih mudah dibaca pada favicon berukuran kecil.
Bisa. Pilih satu emoji, lalu tentukan bentuk di sekelilingnya dan warna latar. Emoji mempertahankan tampilan asli browser, sehingga gambarnya dapat berbeda antar sistem operasi dan browser. Periksa pratinjau sebelum mengunduh; emoji kompleks mungkin tidak tersedia di setiap browser.
Ya. Paket berisi satu favicon.ico dengan bingkai 16, 32, dan 48 px, favicon PNG 16 px dan 32 px yang terpisah, serta ikon yang lebih besar untuk penggunaan Apple, Android, dan Microsoft.
Generator Favicon membuat desain baru dari inisial, teks singkat, atau satu emoji. Konverter Favicon adalah alat terpisah untuk mengubah gambar PNG, JPEG, atau WebP yang sudah ada menjadi berkas favicon.
Tidak. Teks atau emoji, render pratinjau, dan pembuatan paket berlangsung di browser Anda. Alat ini tidak mengunggah desain maupun mengambil data dari suatu situs.
Tidak. Alat hanya menerapkan pilihan Anda dan tidak memakai AI. Alat juga tidak dapat menentukan apakah inisial, emoji, warna, atau desain akhir bertentangan dengan merek dagang atau hak pihak lain. Periksa hak tersebut sebelum memakai favicon untuk tujuan komersial.
Browser sering menyimpan favicon di cache. Pastikan berkas hasil dan referensi di head sudah diterbitkan pada jalur yang benar, lalu bersihkan cache browser atau uji melalui jendela privat. Mesin pencari dan sejumlah platform memperbarui ikon sesuai jadwal masing-masing.
Alat Terkait
Editor Foto
Editor foto berbasis browser dengan pangkas, putar, kecerahan, kontras, saturasi, filter, hamparan teks, dan ekspor ke JPG, PNG, atau WebP.
Generator Kode QR
Buat kode QR secara lokal di browser dari URL, teks biasa, atau payload QR yang diformat benar, lalu unduh sebagai PNG.
Generator Barcode
Buat barcode 1D yang dapat dipindai dalam Code 128, Code 39, EAN-13, UPC-A, ITF-14, dan Codabar. Ekspor sebagai PNG, SVG, atau PDF untuk dicetak.
Pembaca Kode QR
Dekode kode QR dari gambar PNG, JPG, atau WebP di browser. Lihat URL, Wi-Fi, vCard, SMS, email, kalender, geo, atau teks sebelum digunakan.
Pembuat GIF
Ubah rangkaian gambar atau video pendek menjadi GIF animasi. Atur frame rate, pengulangan, dan ukuran sebelum mengekspor.
Vektorisasi PNG ke SVG
Telusuri gambar raster PNG menjadi jalur SVG langsung di browser. Cocok untuk logo, ikon, dan gambar garis. Atur ambang, jumlah warna, dan penghalusan.