Generator Favicon

Generator favicon membuat ikon kecil yang muncul di tab, markah, dan layar utama ponsel — sehingga merek Anda dikenali di tempat yang biasanya tanpa nama.

Manfaat satu set favicon

• Identitas situs: Ikon yang mudah dikenali untuk situs Anda.
• Beragam ukuran: Ikon untuk layar biasa maupun beresolusi tinggi.
• Cakupan format: ICO dengan beberapa ukuran di dalamnya, PNG di sebelahnya, dan vektor yang tetap vektor.
• Alur cepat: Letakkan logo, pilih penempatannya, unduh satu ZIP.
• Hasil rapi: Setiap ukuran dirata-ratakan dari sumber resolusi penuh, sehingga tidak ada yang bergerigi pada 16 px.

1. 1
   Masukkan gambar Anda: Letakkan logo — PNG, JPG, WebP, AVIF, GIF, BMP, atau SVG. Tidak punya logo? Beralihlah ke Teks dan ketik satu atau dua huruf, atau pilih emoji.
2. 2
   Tentukan penempatannya: Paskan mempertahankan seluruh logo dan mengisi sisanya, Penuhi memotong sampai tepi, Regangkan mengabaikan bentuknya. Tambahkan jarak tepi bila Android akan memotong ikon Anda, dan bulatkan sudutnya bila memang diinginkan.
3. 3
   Atur latar belakang: Biarkan ikon transparan atau beri warna. Latar iPhone diatur terpisah — iOS tidak mengenal transparansi di sana dan menampilkan ikon tembus pandang di atas hitam.
4. 4
   Beri nama situs: Nama situs, nama pendek, dan warna tema masuk ke site.webmanifest serta tag theme-color, dan itulah yang dibaca permintaan pemasangan.
5. 5
   Unduh dan pasang: Sekali tekan menghasilkan ZIP. Letakkan semua berkas di folder akar situs Anda, lalu tempel tag link yang telah disalin ke dalam head halaman.

Logo Anda diperkecil ke setiap ukuran ikon di perangkat Anda, lalu ditulis ke favicon.ico, kumpulan PNG, site.webmanifest, dan HTML yang menunjuk ke semuanya.

Proses pembuatan favicon

• Pemuatan: Berkas Anda didekode sekali dan disimpan, sehingga mengubah pengaturan tidak pernah membacanya ulang.
• Pembingkaian: Logo dipaskan, dipenuhkan, atau diregangkan ke dalam bujur sangkar, dengan jarak tepi dan kelengkungan pilihan Anda.
• Pengecilan: Setiap ukuran dibuat dari sumber aslinya, bukan dari ukuran di atasnya, sehingga tidak ada yang mewarisi keburaman ukuran lain.
• Pelat platform: Ikon iPhone diberi latar buram, karena iOS menampilkan latar transparan di atas hitam.
• Pengemasan: favicon.ico memuat entri 16, 32, dan 48; PNG, manifest, dan markup ditulis di sebelahnya.
• Keluaran: Satu ZIP berisi semua berkas, masing-masing dinamai sesuai yang diharapkan langkah pemasangan.

• Ukuran ikon: Favicon PNG 16, 32, 48, dan 96 px, ikon iPhone 180 px, serta ikon aplikasi 192 dan 512 px.
• favicon.ico: Satu berkas berisi entri 16, 32, dan 48 px, ditulis agar terbaca baik oleh peramban desktop maupun Windows.
• site.webmanifest: Manifest beserta dua ukuran ikon yang tanpanya permintaan pemasangan tidak akan muncul.
• Markup: Tag link untuk ditempel ke head Anda, siap disalin dengan sekali tekan.
• Paket platform: Ubin Start Windows, kepadatan peluncur Android, dan penerusan vektor dengan Pro.

Saat meluncurkan situs, mengganti identitas merek, menyiapkan pemasangan aplikasi, atau menyesuaikan panduan ikon sebuah platform.

Contoh penggunaan

• Pengembangan web: Kirimkan favicon.ico bersama index.html.
• Konsistensi merek: Samakan ikon tab dengan logo atau lambang Anda.
• Perangkat seluler: Tambahkan apple-touch-icon dan ukuran layar utama.
• Windows: Buat gambar ubin untuk situs yang disematkan.
• Pekerjaan klien: Serahkan satu set ikon lengkap dalam sekali jalan.

Gambar sederhana dengan kontras tinggi paling terbaca pada 16×16. Mulailah dari sumber persegi minimal 512×512 bila memungkinkan.

Angka penting

• 16×16 dan 32×32 adalah ukuran favicon yang paling umum.
• Satu berkas ICO dapat memuat beberapa bitmap sekaligus.
• Favicon PNG fleksibel tetapi perlu satu berkas per ukuran — karena itulah ada ZIP.
• Favicon muncul di tab, riwayat, dan antarmuka markah.
• Semakin baik kualitas sumbernya, semakin sedikit keburaman setelah diperkecil.

Utamakan bentuk yang tegas, uji hasilnya di tab sungguhan, dan periksa kontrasnya pada bilah terang maupun gelap.

Pertimbangan kualitas

• Gunakan gambar induk yang tajam dan persegi.
• Hindari teks kecil atau garis halus yang hilang pada resolusi rendah.
• Tinjau hasilnya pada layar biasa dan layar beresolusi tinggi.
• Jaga warna merek tetap selaras dengan kepala halaman situs Anda.

Kapan sebaiknya tidak dipakai

• Foto yang sangat detail dan menjadi kabur pada 16×16.
• Sumber dengan resolusi sangat rendah.
• Karya yang bergantung pada gradasi lebih tipis dari beberapa piksel.
• Kasus yang menuntut pengiriman vektor saja — untuk itu gunakan perangkat gambar khusus.

Didukung algoritme pemrosesan gambar yang dioptimalkan.

• Pembesar gambar
• Penampil metadata
• Konverter gambar
• Pengompres gambar