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. 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. 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. 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. 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