ICO vs PNG untuk Favicon
ICO bersifat universal tetapi merupakan warisan; PNG modern tetapi memerlukan tautan eksplisit. Perbandingan ini mencakup perilaku browser, ukuran file, transparansi, contoh kerja, dan cara menyediakankan kedua format tanpa memusingkan duplikasi.
Mengapa perbandingan ini masih penting
Tim yang baru mengenal front-end sering kali memilih PNG karena terasa modern, atau ICO karena menurut beberapa tutorial dari tahun 2012. Jawaban yang benar pada tahun 2026 hampir selalu keduanya, digunakan untuk pekerjaan yang berbeda.
ICO adalah format kontainer: satu file, banyak bitmap yang disematkan. PNG adalah gambar raster tunggal per file. Browser memperlakukannya secara berbeda ketika memutuskan apa yang akan diambil untuk tab versus spanduk pemasangan PWA.
Memilih yang salah akan menyebabkan tab menjadi buram, unduhan membengkak, atau ikon hilang di pintasan Windows. Panduan ini menjelaskan keunggulan setiap format dan cara menggabungkannya.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
ICO: kemunduran universal
Setiap browser desktop akan meminta /favicon.ico meskipun Anda tidak pernah menambahkan tag <link>. Pengambilan implisit itulah yang menyebabkan root .ico tetap wajib.
Di dalam wadah, setiap entri menyimpan data lebar, tinggi, dan piksel (seringkali dikompresi PNG untuk ukuran 64×64 ke atas). Klien memilih yang paling cocok dengan kepadatan tampilan.
Windows Explorer, pratinjau tautan Outlook, dan pembaca RSS lama masih bergantung pada .ico. Melewatkannya akan merusak ikon bagi pengguna yang tidak pernah mengunjungi HTML <head> Anda.
PNG: piksel sempurna pada kepadatan apa pun
PNG memberi Anda satu resolusi yang diketahui per file. Tautkan secara eksplisit: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
Tampilan DPI tinggi bermanfaat karena Anda dapat menyediakankan 32×32 PNG yang dirender browser pada slot 16×16 CSS dengan kepadatan 2× — lebih tajam daripada layar kelas atas 16×16 yang naif.
PWA memerlukan ikon manifes PNG pada 192×192 dan 512×512. Ikon sentuh Apple menggunakan 180×180 PNG. Ukuran ini tidak termasuk dalam alur kerja multi-ukuran .ico klasik.
Perbandingan berdampingan
Dukungan browser: ICO menang pada pengambilan /favicon.ico implisit. PNG menang jika Anda mendeklarasikan ukuran untuk tab Retina dan peluncur Android.
Ukuran file: .ico yang dibuat dengan baik dengan 128 dan 256 entri yang dikompresi PNG seringkali lebih kecil dari enam file PNG terpisah. PNG yang longgar menang jika Anda hanya membutuhkan satu atau dua ukuran.
Transparansi: keduanya mendukung alfa bila dikodekan dengan benar. Perkakas .ico yang buruk membuat transparansi menjadi putih; gunakan generator yang mempertahankan PNG alpha di dalam wadah.
Penulisan: PNG lebih mudah untuk dipratinjau di penampil gambar mana pun. ICO memerlukan alat ekspor multi-ukuran — itulah sebabnya ada generator.
Contoh praktis
Minimal blog: hanya favicon.ico di root. Tidak diperlukan tag <link>; dapat diterima untuk situs pribadi.
Situs pemasaran SaaS: favicon.ico plus favicon.svg plus 180×180 apple-touch-icon.png. Dideklarasikan pada <head>; mencakup desktop, iOS, dan penyematan sosial.
PWA yang dapat diinstal: tambahkan android-chrome-192x192.png dan android-chrome-512x512.png ke site.webmanifest sambil mempertahankan favicon.ico untuk klien tab lama.
Pembungkus aplikasi desktop Windows: kirimkan .ico berkemampuan 256×256 untuk Electron atau Tauri; opsional PNG untuk UI dalam aplikasi dengan ukuran tetap.
Putusan: gunakan keduanya secara bersamaan
Kirimkan favicon.ico multi-ukuran untuk dukungan universal dan pengambilan implisit. Tambahkan varian PNG untuk apple-touch-icon, ikon manifes, dan tag <link> per ukuran opsional.
Lapisi SVG di atas ketika tanda Anda ramah vektor dan Anda ingin tab yang mendukung mode gelap. ICO tetap menjadi dasar; SVG dan PNG adalah optimasi.
Jangan ubah PNG menjadi ICO dengan mengganti nama ekstensi. File .ico asli memerlukan struktur direktori dan bingkai per ukuran yang tepat.
Pertanyaan yang sering diajukan
Apakah ICO tidak digunakan lagi? Tidak. Browser masih mengambilnya secara default. Ini adalah warisan dalam desain, bukan dalam penggunaan.
Bisakah satu PNG menggantikan favicon.ico? Tidak aman. Anda akan kehilangan permintaan implisit /favicon.ico dan banyak permukaan Windows.
Ukuran PNG manakah yang paling penting? 32×32 untuk tab, 180×180 untuk iOS, 192 dan 512 untuk PWA.
Apakah ICO mendukung animasi? favicon animasi klasik sudah usang. Kirimkan .ico multi-ukuran statis.
Pemecahan masalah
Chrome menampilkan PNG tetapi Edge menampilkan ikon buram: Edge mungkin masih membaca cache .ico lama. Regenerasi .ico dengan bingkai 32×32 yang tajam.
File ICO berukuran 300KB+: kemungkinan entri BMP yang tidak terkompresi pada 256×256. Ekspor ulang dengan kompresi PNG di dalam wadah.
PNG terlihat tajam, ICO tidak: Anda mungkin membuat .ico dari sumber yang lebih kecil daripada PNG. Gunakan master 512×512 yang sama untuk keduanya.
Transparansi hilang hanya di ICO: alat Anda mengkodekan BMP 32-bit, bukan entri terkompresi PNG. Ganti generator atau ekspor ulang dengan alfa yang dipertahankan.
Panduan keputusan cepat
Jika Anda memerlukan dukungan implisit /favicon.ico atau pintasan Windows: kirimkan ICO.
Jika Anda memerlukan ketajaman tab Retina dengan kontrol eksplisit: tambahkan tag <link> PNG pada ukuran 32×32 atau ukuran paket dalam ICO.
Jika Anda memerlukan UI instalasi PWA: PNG dalam manifes di 192 dan 512 — ICO tidak menggantikan ikon manifes.
Jika Anda memerlukan penskalaan tak terbatas dan mode gelap CSS di tab: tambahkan SVG, tetapi pertahankan ICO di bawahnya.
Ketika bandwidth penting di situs statis dengan satu ikon: ICO multi-ukuran yang dikompresi dengan baik saja sering kali lebih kecil dari ICO ditambah tiga PNG yang longgar.
Saat desain diulang setiap minggu: pertahankan SVG di Git sebagai sumber, buat ulang ekspor ICO dan PNG pada setiap tag rilis melalui skrip.
Bermigrasi dari khusus PNG ke ICO+PNG
Audit tag saat ini dengan View Source atau DevTools. Catat setiap rel="icon" dan apple-touch-icon href sudah diterapkan.
Hasilkan favicon.ico multi-ukuran dari master PNG yang sama yang Anda gunakan untuk file lepas. Ganti root /favicon.ico tanpa mengganti nama aset yang tidak terkait.
Pertahankan tag <link> PNG yang ada jika berfungsi. Tambahkan ICO terlebih dahulu dalam daftar sehingga parser lama dapat melihatnya lebih awal.
Terapkan saat lalu lintas rendah, bersihkan cache CDN untuk /favicon.ico secara khusus, dan verifikasi dengan curl -I bahwa Tipe Konten adalah image/x-icon atau image/vnd.microsoft.icon.
Telusuri Google Search Console untuk menemukan kesalahan perayapan pada URL ikon setelah migrasi. Ikon root yang rusak terkadang muncul sebagai 404 lunak di log.