Pembuat favicon yang menyiapkan semua ukuran dari satu gambar
Tambahkan gambar di kolom kiri lalu pilih ukuran yang diperlukan, dan pratinjau langsung muncul di kanan. Tidak ada tombol buat yang perlu ditekan, dan Anda juga menerima favicon.ico multi-ukuran beserta kode head siap tempel. Gambar Anda tidak pernah meninggalkan browser.
Tambahkan gambar
Letakkan gambar di sini
PNG · JPG · WEBP · SVG · sumber mendekati persegi paling ideal
Ukuran yang dibuat
Opsi
Hasil yang dibuat
- Sumber
- —
- Ukuran dipilih
- —
- Berkas dibuat
- —
- Total ukuran
- —
Menampilkan gambar contoh. Begitu Anda menambahkan gambar sendiri, tampilan langsung berganti.
Kode untuk ditempel di head
Semua pembuatan berjalan di dalam browser memakai canvas. Gambar tidak pernah diunggah, dan favicon.ico memuat versi 16, 32, dan 48 piksel dalam satu berkas agar browser memilih ukuran yang tepat.
langsung bisa dipakai.
- Terlihat sejak awalArea input dan hasil dibuat jelas.
- Hasil lebih duluAngka utama ditaruh di depan, detail mengikuti seperlunya.
- Tidak banyak syaratTanpa akun atau data tambahan sebelum memakai alat.
Cara memakai pembuat favicon
Favicon adalah tanda kecil yang mewakili situs Anda di tab browser, daftar markah, dan pintasan layar utama. Sekilas seperti gambar yang tinggal diperkecil, padahal ia harus tetap terbaca pada 16 piksel sekaligus tajam pada layar utama 512 piksel, sehingga menyiapkan beberapa ukuran terpisah jauh lebih aman.
Pembuat favicon ini menerima satu gambar, membuat tiga belas ukuran sekaligus, lalu menyusun favicon.ico multi-ukuran yang benar-benar dicari browser beserta HTML yang Anda tempel di head. Seluruh proses berjalan di dalam browser sehingga logo asli tidak keluar dari perangkat.
Di mana favicon benar-benar tampil
Gambar yang sama muncul di beberapa tempat dengan ukuran berbeda. Mengetahui tujuannya membantu Anda memilih ukuran mana yang perlu disimpan.
- Tab browser dan bilah alamat — 16 dan 32 piksel yang benar-benar terlihat
- Daftar markah dan riwayat — 32 dan 48 piksel
- Pintasan layar utama iOS — 152, 167, dan 180 piksel
- Layar utama Android dan PWA terpasang — 192 dan 512 piksel
- Ikon di hasil pencarian — kelipatan 48 piksel dianjurkan
Bagaimana alat ini menangani gambar Anda
Saat Anda memilih berkas, browser membacanya ke memori, menggambarnya di canvas, lalu menggambar ulang sekali untuk tiap ukuran terpilih sebelum mengekspor PNG. Tidak ada tahap unggah sehingga responsnya seketika dan berkas asli tidak tersentuh.
- Mengubah ukuran atau opsi menyegarkan pratinjau tanpa menekan tombol
- Tiap ukuran digambar langsung dari sumber sehingga tidak ada tahap perantara yang menurunkan kualitas
- Proses menggambar ulang menghapus metadata seperti informasi kamera dan pembuatan
Ikuti urutan di layar
Kolom kiri berisi masukan dan pengaturan, kolom kanan berisi hasilnya. Sekali menyusuri dari atas ke bawah sudah cukup.
- Letakkan gambar di panel kiri atau tekan Pilih berkas
- Matikan chip ukuran yang tidak Anda perlukan
- Nyalakan potong otomatis untuk gambar non-persegi, atau margin bila logo menyentuh tepi
- Pilih PNG, ICO, atau keduanya sebagai format keluaran
- Simpan favicon.ico atau ZIP, lalu salin kode head di bawah pratinjau
Mengapa favicon.ico sebaiknya memuat beberapa ukuran
ICO adalah format wadah yang bisa menyimpan beberapa resolusi dalam satu berkas. Browser dan sistem operasi memilih ukuran yang paling pas, sehingga ICO yang hanya berisi 16 piksel akan tampak buram di tempat yang lebih besar.
- favicon.ico yang dibuat di sini memuat 16, 32, dan 48 piksel sekaligus
- Diletakkan di akar situs, berkas ini ditemukan otomatis tanpa deklarasi
- Ikon besar lebih ringan bila disimpan sebagai PNG dan dirujuk dari head
Kapan memakai PNG dan kapan ICO
Keduanya bukan pesaing melainkan melayani konsumen yang berbeda. Sebagian besar situs memakai keduanya.
- PNG — format bawaan untuk browser modern dan layar utama ponsel
- ICO — browser lama dan lingkungan Windows mencari favicon.ico di akar lebih dulu
- Membuat PNG + ICO sekaligus memastikan tidak ada klien yang kehilangan ikon
Memilih gambar sumber
Setelah diperkecil jauh, yang tersisa hanyalah bentuk dan kontras. Sumber yang ramai akan hancur pada 16 piksel.
- Mulailah dari gambar mendekati persegi berukuran minimal 512 piksel
- Bila memuat huruf, sisakan satu atau dua karakter saja
- Garis tipis dan gradasi hilang pada ukuran kecil
- PNG transparan lebih aman ketika warna latar tujuan belum pasti
Ke mana cuplikan head dipasang
Unggah berkas hasil ke situs Anda, lalu tempel kode di sisi kanan ke dalam head HTML. Sesuaikan jalurnya dengan lokasi berkas yang sebenarnya.
- link rel="icon" menunjuk ikon tab browser
- link rel="apple-touch-icon" menangani layar utama iOS
- Larik icons di manifest.json mengatur ikon pemasangan Android dan PWA
- favicon.ico di akar ditemukan otomatis tanpa deklarasi
Contoh langkah nyata
Misalkan Anda punya logo persegi 1024 piksel dan menginginkan set situs web biasa. Pilihan minimal yang berguna terlihat seperti ini.
- Biarkan 16, 32, dan 48 menyala lalu simpan favicon.ico
- Biarkan 180 menyala untuk menghasilkan apple-touch-icon.png
- Biarkan 192 dan 512 menyala untuk ikon PWA
- Unduh ZIP semua, bongkar di akar situs, lalu tempel kode head
Kesalahan yang sering terjadi
Favicon disimpan dalam cache secara agresif sehingga perubahannya sulit dipastikan. Empat hal berikut mencakup sebagian besar kasus.
- Ikon lama masih bertahan — bersihkan cache browser dan CDN lalu muat ulang paksa
- Hancur pada 16 piksel — sumbernya terlalu detail, sederhanakan bentuknya
- Hanya ikon layar utama yang terpotong — nyalakan margin untuk area aman
- Transparansi menjadi hitam — pastikan Anda mengekspor entri PNG
Periksa sebelum dirilis
Menelusuri daftar ini tepat sebelum penerapan menghemat satu putaran kerja.
- Apakah favicon.ico berada di akar situs?
- Apakah jalur pada kode head sama dengan lokasi berkas sebenarnya?
- Apakah ikon 180 piksel selamat dari pembulatan sudut iOS?
- Apakah 192 dan 512 terdaftar di manifest?
- Apakah bentuknya masih terbaca pada 16 piksel di tab sungguhan?
Pertanyaan yang sering diajukan
Apakah gambar saya diunggah ke server?
Tidak. Seluruh langkah, dari memilih berkas hingga menyimpan, berlangsung di dalam browser pada perangkat Anda. Logo asli tidak keluar dari mesin sehingga karya yang belum dirilis pun aman dikerjakan di sini.
Sumber seperti apa yang perlu disiapkan?
PNG mendekati persegi berukuran minimal 512 piksel paling aman. Bila rasionya berbeda, potong otomatis mengambil bagian tengah. Memulai dari gambar kecil membuat ukuran besar tampak buram, jadi siapkan sumber yang lapang.
Di mana favicon.ico diletakkan?
Di akar situs, tepat di bawah domain. Diletakkan di sana, berkas itu ditemukan otomatis tanpa apa pun di head. Bila Anda menaruhnya di tempat lain, jalurnya harus ditunjuk secara eksplisit.
Saya sudah mengganti favicon tetapi yang lama masih muncul.
Favicon disimpan dalam cache dengan sangat kuat. Coba muat ulang paksa lebih dulu; bila masih bertahan, tambahkan versi pada nama berkas atau bersihkan CDN. Menutup dan membuka tab sering kali belum cukup.
Apakah transparansi dipertahankan?
Ya untuk PNG, dan juga untuk ICO di sini karena berkasnya menyimpan data PNG. Tetap periksa tab sungguhan dalam mode gelap, sebab logo gelap di bilah tab gelap bisa menghilang.
Bagaimana dengan gambar yang tidak persegi?
Dengan potong otomatis menyala, bagian tengah dipangkas memakai sisi terpendek. Bila dimatikan, gambar dipaskan ke dalam persegi dan sisa areanya tetap transparan. Logo yang melebar biasanya lebih rapi bila Anda potong sendiri lebih dulu.
Kapan margin sebaiknya dinyalakan?
Ketika logo menyentuh tepi persegi. Lingkungan yang membulatkan sudut ikon, seperti layar utama iOS, akan memangkas tepi itu; margin 5% menciptakan area aman.
Ukuran apa yang dibutuhkan PWA?
192 dan 512 piksel praktis wajib. Buat keduanya dan daftarkan pada larik icons di manifest agar ikon pemasangan Android dan layar splash tampil benar. 512 juga dipakai sebagai sumber maskable.
Bisakah membuat favicon SVG?
Anda bisa mengunggah sumber SVG dan mengubahnya menjadi PNG pada tiap ukuran, tetapi alat ini tidak menghasilkan keluaran vektor. Untuk memakai favicon SVG, rujuk SVG asli di head dan simpan berkas ICO serta PNG dari sini sebagai cadangan bagi browser lama.
Rujukan
Dokumentasi resmi untuk deklarasi ikon dan konvensi ukuran.