Konverter Favicon
Buat file yang dibutuhkan untuk menambahkan favicon ke situs web dari satu gambar raster. Pilih cara gambar sumber ditempatkan pada kanvas persegi, tentukan latar belakangnya, lalu unduh ZIP yang berisi ICO multiukuran, tujuh ikon PNG, manifest aplikasi web, konfigurasi ubin Windows, dan cuplikan head HTML yang siap disalin. Konversi gambar dan pembuatan ZIP berlangsung secara lokal di browser Anda.
Cara mengubah gambar menjadi paket favicon
-
1
Pilih gambar raster
Pilih PNG, JPEG, atau WebP yang memenuhi batas ukuran file dan dimensi gambar yang ditampilkan. File SVG, GIF, dan AVIF tidak diterima.
-
2
Pilih penempatan gambar
Gunakan Isi dan potong untuk memenuhi bidang persegi dengan memangkas tepi, atau Sesuaikan dan beri ruang untuk mempertahankan seluruh gambar serta menambahkan ruang di sekelilingnya.
-
3
Atur latar belakang
Pilih warna latar untuk piksel transparan dan ruang yang dibuat oleh mode Sesuaikan dan beri ruang, lalu periksa pratinjau yang dihasilkan.
-
4
Unduh dan pasang
Unduh ZIP, tempatkan file ikon dan konfigurasinya di situs Anda, lalu salin tag tautan yang disediakan ke dalam head dokumen.
Isi file ZIP
| Item paket | Kegunaan |
|---|---|
favicon.ico |
Satu kontainer ICO dengan entri 16, 32, 48, dan 256 px untuk browser serta perangkat lunak yang meminta lokasi favicon tradisional |
favicon-16x16.png |
PNG ringkas untuk tab browser dan penempatan kecil lainnya |
favicon-32x32.png |
Ikon dengan kepadatan lebih tinggi untuk tab browser dan bookmark |
favicon-48x48.png |
Ukuran tambahan untuk desktop dan pintasan |
mstile-150x150.png |
PNG 150 x 150 yang dirujuk oleh konfigurasi ubin Windows |
apple-touch-icon.png |
PNG 180 x 180 untuk tautan layar utama Apple |
android-chrome-192x192.png |
Ikon aplikasi 192 x 192 yang dirujuk oleh manifest aplikasi web |
android-chrome-512x512.png |
Ikon aplikasi 512 x 512 yang dirujuk oleh manifest aplikasi web |
site.webmanifest |
Metadata JSON yang mengarahkan browser yang kompatibel ke ikon 192 px dan 512 px |
browserconfig.xml |
Konfigurasi ubin Windows yang merujuk aset ikon hasil konversi |
favicon-head.html |
Tag siap salin yang menghubungkan halaman dengan ICO, PNG, ikon Apple, manifest, dan konfigurasi browser |
File ICO dan PNG sengaja dibuat terpisah. Browser dan sistem operasi memilih ikon dengan cara berbeda, sehingga paket lengkap menyediakan permintaan tradisional /favicon.ico sekaligus deklarasi ikon modern yang eksplisit.
Tag untuk head HTML
Paket yang diunduh menyertakan cuplikan seperti berikut:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">
Jika file ditempatkan di subdirektori atau host aset terpisah, ubah jalurnya sebelum menempelkan tag ke dalam <head>. Pastikan nama file dan jalur di dalam site.webmanifest serta browserconfig.xml sesuai dengan file yang Anda pasang.
Pilihan Isi, Sesuaikan, dan latar belakang
- Isi dan potong memenuhi seluruh keluaran persegi. Sumber yang lebar atau tinggi dipangkas sama rata dari sisi yang berlawanan, jadi letakkan bagian penting dekat pusat.
- Sesuaikan dan beri ruang mempertahankan seluruh sumber agar terlihat. Ruang yang tersisa menjadi bingkai dengan warna latar yang dipilih.
- Latar belakang dapat tetap transparan atau memakai warna solid khusus. Dalam mode Sesuaikan dan beri ruang, pilihan ini juga menentukan warna bingkai di sekitar gambar. Periksa pratinjau pada tema halaman terang dan gelap sebelum dipublikasikan.
Untuk ikon kecil yang paling tajam, mulailah dengan gambar persegi sederhana berukuran setidaknya 512 x 512 piksel. Huruf halus, garis sangat tipis, dan detail kecil dapat hilang pada versi 16 px meskipun sumbernya besar.
Batas input dan penempatan file
Konverter ini hanya menerima gambar raster PNG, JPEG, dan WebP. Alat memeriksa signature gambar serta menolak SVG, GIF, AVIF, dan format lain yang tidak tercantum. Ukuran sumber maksimal 20 MiB, panjang setiap sisi maksimal 8.192 piksel, dan jumlah keseluruhan maksimal 24 megapiksel. Batas dimensi diperiksa sebelum gambar didekode sepenuhnya.
Setelah mengunduh, ekstrak ZIP dan unggah file hasil konversi ke jalur yang digunakan cuplikan. Jalur relatif terhadap root seperti /favicon.ico menganggap file tersedia di root domain saat ini. Bersihkan cache situs atau CDN saat mengganti favicon karena browser sering menyimpan file ikon lebih lama daripada aset halaman biasa.
Manifest yang disertakan menyediakan metadata ikon, tetapi manifest dan kumpulan ikon saja tidak menjadikan situs sebagai aplikasi web progresif yang dapat dipasang. Kemampuan pemasangan juga bergantung pada halaman, keamanan transportasi, dan persyaratan setiap browser.
Pertanyaan yang Sering Diajukan
Anda dapat menggunakan PNG, JPEG, atau WebP. Konverter memeriksa signature file, bukan hanya memercayai nama file, serta menolak SVG, GIF, AVIF, dan format lainnya.
Isi dan potong memperbesar gambar hingga bidang persegi penuh, lalu memangkas bagian tepi dengan jumlah yang sama jika rasio gambar tidak persegi. Sesuaikan dan beri ruang mempertahankan seluruh gambar serta mengisi sisa bidang persegi dengan warna latar yang dipilih.
ICO adalah kontainer yang dapat menyimpan beberapa ukuran ikon kecil dalam satu file favicon tradisional. File PNG terpisah memberi browser dan platform aset dengan ukuran yang jelas untuk tab, tautan layar utama, dan ikon aplikasi. Menggunakan keduanya memberi cakupan praktis yang lebih luas.
Tidak. Manifest menjelaskan ikon aplikasi dan metadata tampilan yang dihasilkan, tetapi kemampuan pemasangan bergantung pada persyaratan browser lainnya serta cara situs dibuat dan disajikan.
Cuplikan menggunakan jalur relatif terhadap root, jadi cara termudah adalah menempatkan file yang diekstrak di root domain. Jika Anda memakai folder atau host aset lain, sesuaikan cuplikan serta jalur di dalam manifest dan konfigurasi browser.
Tidak. Pemrosesan gambar dan pembuatan ZIP terjadi di browser Anda. Dalam alur bertahap, draf IndexedDB dapat menyimpan gambar di browser ini hingga 30 menit agar dapat berpindah antar-langkah. Pemindahan lokal tersebut bukan unggahan ke server.
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.