Pembuat favicon
Buat favicon dari teks, emoji, atau gambar untuk situs web Anda
Desain favicon
Pilih emoji
0% berarti persegi; 100% menggunakan bentuk bulat penuh yang asli.
File gambar hingga 10 MiB. Perender sumber meregangkan gambar menjadi persegi.
Pratinjau & file
Ini hanya ilustrasi. Tampilan emoji di browser dan sistem dapat berbeda.
Pratinjau langsung diperbarui. Buat file setelah desain Anda siap.
File PNG yang dihasilkan
Desain telah berubah. File ini masih berisi desain yang terakhir dibuat; buat ulang untuk memperbaruinya.
File PNG: 16, 32, 48, 64, 128, dan 256 px. ICO berisi PNG 32 px yang dihasilkan.
Tambahkan ke situs Anda
- Unggah file yang diunduh dan gunakan tag yang disalin di bagian head laman Anda.
- Jalur tag default merujuk ke root situs Anda; sesuaikan jika Anda menaruh file di tempat lain.
- Unduhan ICO berisi satu gambar PNG, bukan setiap ukuran yang dihasilkan.
- Apple touch icon dan ikon manifes aplikasi web adalah aset terpisah; alat ini tidak membuat file tersebut.
- Favicon tidak dijamin muncul di hasil pencarian.
- Alat ini membaca file Anda di browser tanpa mengunggahnya. Simpan file asli yang tidak diubah.
Tentang Alat Pembuat favicon
Dengan pembuat favicon online gratis kami, Anda dapat membuat favicon profesional dari teks, huruf, emoji, atau gambar yang diunggah langsung di browser Anda. Favicon adalah ikon kecil yang muncul di tab browser, bookmark, dan hasil pencarian, dan berperan penting dalam pengenalan merek serta pengalaman pengguna. Dengan alat ini, Anda dapat merancang dan mengunduh favicon dalam berbagai ukuran tanpa perangkat lunak desain atau keahlian teknis.
Pembuat ini mendukung tiga mode pembuatan: Mode Teks/Huruf untuk membuat favicon dari satu atau dua karakter dengan kendali penuh atas font, warna, dan gaya; Mode Emoji untuk membuat favicon dengan cepat dari emoji apa pun dengan latar belakang dan ukuran yang dapat diatur; dan Mode Unggah untuk membuat file favicon persegi dari gambar yang dapat didekode browser. Alat ini merender secara lokal tanpa mengunggah file yang dipilih; ini tidak menjamin bahwa setiap skrip atau permintaan lain di halaman bersifat privat.
Alat ini menghasilkan PNG persegi dalam enam ukuran: 16, 32, 48, 64, 128, dan 256 px. Unduh file satuan, satu ICO 32 px berbasis PNG, dan tag link HTML yang sesuai. Aset ini tidak mencakup semua persyaratan ikon di setiap platform.
Fitur utama
- Tiga mode pembuatan: Teks/Huruf, Emoji, dan Unggah gambar
- Warna teks, warna latar belakang, jenis font, dan ketebalan font yang dapat disesuaikan
- Radius sudut yang dapat diatur dari persegi hingga lingkaran
- Dukungan latar belakang transparan untuk mode teks dan emoji
- Kisi pilihan cepat emoji populer berisi 32 emoji yang umum dipakai
- Menghasilkan enam ukuran favicon standar: 16x16, 32x32, 48x48, 64x64, 128x128, dan 256x256
- Pratinjau langsung dengan pembaruan real time saat Anda mengubah pengaturan
- Pratinjau tab browser tiruan yang menunjukkan tampilan favicon Anda
- Unduh tiap ukuran sebagai file PNG
- Unduh kontainer favicon.ico berisi satu PNG 32 px yang dihasilkan; kompatibilitas bergantung pada klien
- Salin tag link HTML ke papan klip untuk integrasi situs web yang mudah
- Seluruh pemrosesan berlangsung di browser tanpa unggahan ke server
Cara menggunakan Pembuat favicon
- Pilih mode: Pilih Teks/Huruf untuk membuat favicon dari karakter, Emoji untuk memakai emoji, atau Unggah gambar untuk mengonversi gambar yang sudah ada.
- Sesuaikan desain Anda: Pada mode Teks, masukkan 1-2 karakter dan atur ukuran font, warna, radius sudut, jenis font, dan ketebalan. Pada mode Emoji, pilih atau ketik emoji lalu atur latar belakang dan ukurannya. Pada mode Unggah, pilih file gambar dari perangkat Anda.
- Pratinjau secara real time: Lihat pratinjau langsung 256x256 diperbarui seketika saat Anda mengubah pengaturan. Periksa tiruan tab browser untuk melihat tampilan favicon Anda di tab sungguhan.
- Buat favicon: Klik tombol “Buat favicon” untuk membuat keenam ukuran standar dari desain Anda.
- Unduh favicon Anda: Unduh file PNG satuan untuk tiap ukuran, ambil file favicon.ico, atau salin tag link HTML untuk bagian head situs web Anda.
- Tambahkan ke situs web Anda: Letakkan file yang diunduh di direktori root situs Anda dan tempel tag link HTML ke bagian head dokumen HTML Anda.
Kasus penggunaan
- Peluncuran situs web baru: Buat favicon profesional dengan cepat untuk situs web atau aplikasi web baru tanpa memerlukan desainer grafis.
- Personal branding: Buat favicon berbasis huruf dengan inisial Anda untuk blog pribadi, portofolio, atau situs web profesional.
- MVP startup: Buat favicon sementara namun rapi pada tahap awal pengembangan saat identitas merek lengkap belum ditetapkan.
- Proyek sampingan dan eksperimen: Beri karakter pada proyek hobi, karya hackathon, atau situs eksperimental dengan favicon emoji atau teks khusus.
- Pengujian pengembangan web: Buat favicon pengganti untuk lingkungan pengembangan, server staging, atau prototipe klien.
- Pengelolaan banyak situs: Buat favicon yang berbeda untuk situs, subdomain, atau aplikasi web yang berbeda agar mudah membedakan banyak tab yang terbuka.
- Dokumentasi dan tutorial: Buat aset favicon untuk situs demo, contoh kode, dan materi pendidikan.
- Pengembangan ekstensi browser: Buat aset ikon untuk ekstensi browser yang membutuhkan ikon kecil yang mudah dikenali dalam berbagai ukuran.
Pertanyaan yang sering diajukan
Apa itu favicon?
Favicon (singkatan dari “favorites icon”) adalah ikon kecil yang terkait dengan sebuah situs web. Ikon ini muncul di tab browser, daftar bookmark, riwayat browser, dan hasil mesin pencari. Favicon membantu pengguna dengan cepat mengenali dan menemukan situs web Anda di antara banyak tab dan bookmark yang terbuka.
Ukuran favicon apa yang sebaiknya saya gunakan?
Alat ini menyediakan file PNG 16, 32, 48, 64, 128, dan 256 px serta ICO 32 px. Pilih ukuran yang dibutuhkan klien tujuan; Google Search saat ini merekomendasikan ikon persegi yang lebih besar dari 48 px, dan penyertaannya tidak dijamin.
Apa perbedaan antara format PNG dan ICO?
PNG adalah format gambar raster; ICO adalah kontainer ikon. Alat ini mengekspor enam file PNG dan menyematkan PNG 32 px yang dihasilkan ke dalam satu entri ICO. Periksa persyaratan klien tujuan; tidak ada format yang menjamin dukungan universal.
Bisakah saya membuat favicon transparan?
Ya, pada mode Teks/Huruf maupun Emoji Anda dapat mengaktifkan opsi latar belakang transparan. Ini menghasilkan favicon dengan latar belakang transparan, yang berguna untuk favicon yang harus menyatu dengan warna latar tab browser.
Apakah gambar yang saya unggah dikirim ke server?
Alat ini merender gambar pilihan Anda di browser tanpa mengunggahnya. File dibatasi 10 MiB dan format bergantung pada decoding browser. Pernyataan ini tidak mencakup penyimpanan, pelacakan, atau permintaan yang dibuat skrip lain di situs.
Bagaimana cara menambahkan favicon ke situs web saya?
Letakkan file favicon yang diunduh di direktori root situs web Anda (atau subdirektori pilihan Anda), lalu tambahkan tag link HTML ke bagian head HTML Anda. Anda dapat menyalin tag link siap pakai dari alat ini. Contoh: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Tips & praktik terbaik
- Buat tetap sederhana: Favicon ditampilkan pada ukuran yang sangat kecil. Gunakan bentuk yang tebal dan sederhana serta warna berkontras tinggi yang tetap dapat dikenali pada 16x16 piksel.
- Gunakan maksimal 1-2 karakter: Untuk favicon berbasis teks, satu karakter paling baik. Dua karakter bisa berfungsi tetapi mungkin kurang terbaca pada ukuran kecil.
- Pilih warna yang kontras: Pastikan teks atau emoji Anda tampak jelas di atas latar belakang. Kontras tinggi memastikan favicon terlihat di tab browser.
- Uji pada ukuran kecil: Selalu periksa tampilan favicon Anda pada 16x16 dan 32x32 sebelum difinalkan. Yang tampak bagus pada 256x256 mungkin tidak terbaca pada ukuran lebih kecil.
- Pertimbangkan mode gelap: Banyak pengguna menjelajah dengan tema browser gelap. Favicon berlatar transparan dengan isi gelap bisa menjadi tak terlihat. Pertimbangkan menambahkan latar berwarna atau memakai isi berwarna terang.
- Manfaatkan radius sudut: Sudut membulat (20-30%) memberi favicon tampilan yang modern dan rapi. Lingkaran penuh (100%) cocok untuk satu huruf atau emoji.
- Sertakan beberapa ukuran: Sediakan aset yang sesuai dengan klien tujuan Anda. Alat ini menghasilkan enam ukuran PNG yang tercantum dan satu ICO; ikon Apple touch dan manifes aplikasi web memerlukan aset terpisah, dan cakupan perangkat yang menyeluruh tidak dijamin.