ICO lwn PNG untuk Favicon
ICO adalah universal tetapi warisan; PNG adalah moden tetapi memerlukan pemautan yang jelas. Perbandingan ini meliputi gelagat penyemak imbas, saiz fail, ketelusan, contoh yang berfungsi dan cara menyediakan kedua-dua format tanpa pening kepala pertindihan.
Mengapa perbandingan ini masih penting
Pasukan baru untuk bahagian hadapan sering memilih PNG kerana ia berasa moden, atau ICO kerana beberapa tutorial dari 2012 dikatakan begitu. Jawapan yang betul pada tahun 2026 hampir selalu kedua-duanya, digunakan untuk pekerjaan yang berbeza.
ICO ialah format bekas: satu fail, banyak peta bit terbenam. PNG ialah imej raster tunggal bagi setiap fail. Penyemak imbas melayan mereka secara berbeza apabila memutuskan perkara yang hendak diambil untuk tab berbanding sepanduk pemasangan PWA.
Memilih kos yang salah, anda mengaburkan tab, muat turun kembung atau ikon hilang dalam pintasan Windows. Panduan ini menerangkan di mana setiap format menang 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: sandaran universal
Setiap penyemak imbas desktop akan meminta /favicon.ico walaupun anda tidak pernah menambah teg <link>. Pengambilan tersirat itulah sebabnya akar .ico kekal wajib.
Di dalam bekas, setiap entri menyimpan data lebar, tinggi dan piksel (selalunya dimampatkan PNG untuk saiz 64×64 dan ke atas). Pelanggan memilih padanan yang paling hampir dengan ketumpatan paparan.
Windows Explorer, pratonton pautan Outlook dan pembaca RSS lama masih bergantung pada .ico. Melangkaunya memecahkan ikon untuk pengguna yang tidak pernah melawati HTML <head> anda.
PNG: piksel sempurna pada sebarang ketumpatan
PNG memberi anda satu resolusi yang diketahui bagi setiap fail. Pautkannya secara eksplisit: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
Paparan DPI tinggi mendapat manfaat kerana anda boleh menyediakan 32×32 PNG yang dipamerkan oleh penyemak imbas pada slot 16×16 CSS pada ketumpatan 2× — lebih tajam daripada 16×16 naif kelas atas.
PWA memerlukan ikon manifes PNG pada 192×192 dan 512×512. Ikon sentuh Apple menggunakan 180×180 PNG. Saiz ini tidak termasuk dalam aliran kerja .ico berbilang saiz klasik.
Perbandingan sebelah menyebelah
Sokongan penyemak imbas: ICO menang pada pengambilan /favicon.ico tersirat. PNG menang apabila anda mengisytiharkan saiz untuk tab Retina dan pelancar Android.
Saiz fail: .ico yang dibina dengan baik dengan entri 128 dan 256 yang dimampatkan PNG selalunya lebih kecil daripada enam fail PNG yang berasingan. Loose PNGs menang apabila anda hanya memerlukan satu atau dua saiz.
Ketelusan: kedua-duanya menyokong alfa apabila dikodkan dengan betul. Alatan .ico yang buruk meratakan ketelusan kepada putih; gunakan penjana yang mengekalkan PNG alfa di dalam bekas.
Pengarangan: PNG lebih mudah untuk dipratonton dalam mana-mana pemapar imej. ICO memerlukan alat eksport berbilang saiz — itulah sebabnya penjana wujud.
Contoh praktikal
Blog minimum: hanya favicon.ico pada akarnya. Sifar teg <pautan> diperlukan; boleh diterima untuk tapak peribadi.
Tapak pemasaran SaaS: favicon.ico tambah favicon.svg tambah 180×180 apple-touch-icon.png. Diisytiharkan dalam <head>; meliputi desktop, iOS dan benaman sosial.
PWA boleh dipasang: tambahkan android-chrome-192x192.png dan android-chrome-512x512.png pada site.webmanifest sambil mengekalkan favicon.ico untuk pelanggan tab lama.
Pembalut apl desktop Windows: hantarkan .ico berkeupayaan 256×256 untuk Electron atau Tauri; PNG pilihan untuk UI dalam apl pada saiz tetap.
Keputusan: gunakan kedua-duanya bersama-sama
Hantar favicon.ico berbilang saiz untuk sokongan universal dan pengambilan tersirat. Tambahkan varian PNG untuk ikon sentuh epal, ikon manifes dan teg <pautan> setiap saiz pilihan.
Lapisan SVG di atas apabila tanda anda mesra vektor dan anda mahukan tab sedar mod gelap. ICO kekal sebagai asas; SVG dan PNG ialah pengoptimuman.
Jangan tukar PNG kepada ICO dengan menamakan semula sambungan. Fail .ico sebenar memerlukan struktur direktori yang betul dan bingkai setiap saiz.
Soalan lazim
Adakah ICO ditamatkan? Tidak. Pelayar masih mengambilnya secara lalai. Ia adalah warisan dalam reka bentuk, bukan dalam penggunaan.
Bolehkah satu PNG menggantikan favicon.ico? Tidak selamat. Anda akan terlepas permintaan /favicon.ico tersirat dan banyak permukaan Windows.
Saiz PNG yang manakah paling penting? 32×32 untuk tab, 180×180 untuk iOS, 192 dan 512 untuk PWAs.
Adakah ICO menyokong animasi? favicon animasi klasik sudah lapuk. Hantarkan .ico berbilang saiz statik sebaliknya.
Menyelesaikan masalah
Chrome menunjukkan PNG tetapi Edge menunjukkan ikon kabur: Edge mungkin masih membaca cache .ico lama. Jana semula .ico dengan bingkai 32×32 yang segar.
Fail ICO ialah 300KB+: kemungkinan entri BMP tidak dimampatkan pada 256×256. Eksport semula dengan pemampatan PNG di dalam bekas.
PNG kelihatan tajam, ICO tidak: anda mungkin telah membina .ico daripada sumber yang lebih kecil daripada PNG. Gunakan induk 512×512 yang sama untuk kedua-duanya.
Ketelusan hilang dalam ICO sahaja: alat anda mengekodkan BMP 32-bit dan bukannya entri mampat PNG. Tukar penjana atau eksport semula dengan alfa dipelihara.
Panduan keputusan pantas
Jika anda memerlukan sokongan /favicon.ico tersirat atau pintasan Windows: hantarkan ICO.
Jika anda memerlukan ketajaman tab Retina dengan kawalan eksplisit: tambahkan teg PNG <pautan> pada 32×32 atau saiz berkas dalam ICO.
Jika anda memerlukan UI pemasangan PWA: PNG dalam manifes pada 192 dan 512 — ICO tidak menggantikan ikon manifes.
Jika anda memerlukan penskalaan tanpa had dan mod gelap CSS dalam tab: tambahkan SVG, tetapi simpan ICO di bawah.
Apabila lebar jalur penting pada tapak statik dengan satu ikon: ICO berbilang saiz yang dimampatkan dengan baik selalunya lebih kecil daripada ICO ditambah tiga PNG longgar.
Apabila reka bentuk berulang setiap minggu: simpan SVG dalam Git sebagai sumber, hasilkan semula eksport ICO dan PNG pada setiap teg keluaran melalui skrip.
Berhijrah daripada PNG-sahaja kepada ICO+PNG
Audit teg semasa dengan Lihat Sumber atau DevTools. Perhatikan setiap rel="icon" dan apple-touch-icon href telah digunakan.
Hasilkan favicon.ico berbilang saiz daripada PNG induk yang sama yang anda gunakan untuk fail longgar. Gantikan akar /favicon.ico tanpa menamakan semula aset yang tidak berkaitan.
Kekalkan teg <link> PNG sedia ada jika ia berfungsi. Tambahkan ICO dahulu dalam senarai supaya penghurai yang lebih lama melihatnya lebih awal.
Letak semasa trafik rendah, bersihkan cache CDN untuk /favicon.ico secara khusus dan sahkan dengan curl -I bahawa Content-Type ialah image/x-icon atau image/vnd.microsoft.icon.
Cari Konsol Carian Google untuk ralat rangkak pada URL ikon selepas penghijrahan. Ikon akar yang rosak kadangkala muncul sebagai 404s lembut dalam log.