Favicon Generator
Buat favicon.ico plus semua ukuran PNG yang sebenarnya dibutuhkan oleh browser, iOS, dan Android.
What is Favicon Generator?
Favicon adalah ikon kecil yang ditampilkan di tab browser, daftar bookmark, dan bilah alamat untuk mewakili sebuah situs web, biasanya logo kecil yang muncul di samping judul halaman. Browser modern dan platform seluler meminta favicon dalam beberapa format dan ukuran sekaligus: favicon.ico klasik untuk tab desktop, apple-touch-icon PNG untuk layar home iOS, dan PNG yang lebih besar yang dideklarasikan dalam site.webmanifest untuk Android dan instalasi PWA. Format .ico sendiri adalah wadah kecil yang dapat menggabungkan beberapa ukuran gambar, biasanya 16, 32, dan 48 piksel, menjadi satu file. Mengirimkan set lengkap daripada hanya favicon.ico memastikan ikon situs terlihat tajam di setiap perangkat dan permukaan tempatnya muncul.
How to Use Favicon Generator
- Seret logo atau gambar ke zona drop, atau klik untuk memilih file — gambar persegi dengan latar belakang transparan atau sederhana bekerja paling baik.
- Alat ini menghasilkan favicon.ico yang sebenarnya (16, 32, dan 48px digabungkan) plus PNG individu pada setiap ukuran yang sebenarnya diminta oleh browser modern, iOS, dan Android.
- Unduh setiap file secara individual, atau klik "Unduh semua sebagai .zip" untuk mendapatkan semua file dalam satu arsip.
- Letakkan file-file tersebut di folder root (atau publik) situs Anda, lalu salin potongan kode HTML ke dalam <head> halaman Anda dan JSON site.webmanifest ke dalam file dengan nama tersebut di sampingnya.
Examples
Logo persegi
Input: 512×512 PNG logo
Output: favicon.ico + 5 ukuran PNG, tanpa padding
Gambar non-persegi
Input: 1200×630 spanduk lebar
Output: Enam file yang sama, masing-masing dengan padding transparan untuk tetap persegi
Common Mistakes
- Hanya mengunggah favicon.ico dan melupakan PNG apple-touch-icon/android-chrome, membuat ikon layar utama terlihat salah pada mobile.
- Mengunggah gambar sumber dengan resolusi yang sangat rendah — ikon 512×512 akan terlihat lembut atau berpiksel jika gambar aslinya lebih kecil dari itu.
- Melupakan untuk menambahkan tag <link> ke <head> halaman — file yang ada di proyek tidak akan berfungsi sampai halaman merujuknya.
- Menempatkan file yang dihasilkan di direktori yang salah — file harus disajikan dari root situs (misalnya yoursite.com/favicon.ico) kecuali Anda memperbarui jalur di snippet untuk sesuai dengan tempat Anda meletakkannya.
Why Use This Tool
- Menghasilkan wadah .ico yang nyata dan sesuai spesifikasi, bukan hanya PNG yang diubah namanya.
- Mencakup setiap ukuran yang diminta browser modern, iOS, dan Android, bukan hanya favicon 16×16 klasik.
- Sumber yang tidak persegi ditempatkan di tengah-tengah dengan padding transparan daripada terdistorsi.
- Snippet HTML <head> yang siap ditempel dan JSON site.webmanifest yang disertakan — tidak perlu menebak markup yang tepat.
- Satu-klik "Unduh semua sebagai .zip" menggabungkan setiap file daripada mengklik Unduh enam kali secara terpisah.