Favicon (.ico) lwn PNG

Format .ico dicipta khusus untuk memegang berbilang saiz ikon dalam satu bekas binari. favicon.ico yang dibina dengan baik mengandungi bingkai pada 16×16, 32×32, 48×48 dan 64×64 piksel. Apabila penyemak imbas memerlukan favicon untuk tab, ia membuka fail .ico, membaca direktori ICO dan memilih bingkai yang paling hampir sepadan dengan saiz paparan yang diperlukan. Keupayaan berbilang saiz ini adalah kelebihan .ico yang menentukan berbanding PNG.

PNG ialah format imej tunggal. Fail PNG mengandungi tepat satu imej pada tepat satu resolusi. Untuk menampung berbilang saiz dengan PNG sahaja, anda memerlukan berbilang fail dan berbilang teg `<link>` dengan atribut `sizes=` yang jelas. Ini lebih bertele-tele tetapi membenarkan kawalan tepat ke atas imej yang disajikan pada setiap peleraian. PNG juga menyokong pemampatan tanpa kehilangan yang lebih baik daripada bingkai ICO yang dikodkan BMP pada sebarang resolusi tertentu.

Keserasian penyemak imbas ialah tempat .ico menang dengan tegas. Setiap penyemak imbas — termasuk IE warisan, Edge lama, versi Safari purba dan penyemak imbas khusus yang tidak jelas — mengambil /favicon.ico daripada akar domain tanpa sebarang teg `<link>` diperlukan. Walaupun anda meninggalkan teg pautan sepenuhnya, penyemak imbas akan mencuba GET /favicon.ico sebagai konvensyen. PNG memerlukan teg `<link rel='icon' type='image/png'>` eksplisit dengan jenis MIME yang betul atau ia diabaikan.

Sokongan ketelusan adalah sama antara .ico dan PNG. Kedua-dua format menyokong saluran alfa 8-bit (ketelusan penuh setiap piksel). Walau bagaimanapun, .ico hanya mengekalkan ketelusan apabila bingkai dalamannya menggunakan pemampatan PNG, bukan BMP. Pengekod ICO lama kadangkala lalai kepada BMP, yang mempunyai ketelusan terhad (1-bit). Sentiasa gunakan penjana moden yang menghasilkan bingkai .ico termampat PNG.

Perbandingan saiz fail bergantung pada konteks. Satu 32×32 PNG tunggal adalah lebih kecil daripada fail .ico berbilang saiz yang menggabungkan bingkai 16, 32, 48 dan 64 px. Walau bagaimanapun, .ico menggantikan empat fail PNG berasingan serta empat teg pautan. Untuk jumlah muatan, .ico berbilang saiz yang dimampatkan dengan baik hampir selalu lebih kecil daripada set setara PNG individu yang digabungkan.

PNG menang pada kecekapan mampatan pada sebarang saiz individu. Algoritma mampatan PNG (DEFLATE/zlib) amat berkesan untuk logo warna rata dan karya seni gaya ikon dengan tepi tajam dan palet warna terhad. Logo 32×32 PNG pada pemampatan optimum boleh berada di bawah 200 bait. Bingkai BMP yang setara di dalam .ico sentiasa 4 KB tanpa mengira kandungan imej.

Untuk kelayakan favicon Carian Google, kedua-dua .ico dan PNG disokong. Perangkak Google mengambil favicon yang dipautkan dalam HTML anda dahulu, atau kembali ke /favicon.ico. Keperluan minimum ialah 48×48 piksel dan URL yang boleh diakses secara umum. PNG bersaiz betul yang dipautkan dengan `<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>` memenuhi ini sama seperti gabungan .ico saiz yang sama.

Tingkah laku mod gelap berbeza antara format. Fail PNG tidak boleh menyesuaikan diri dengan skema warna pengguna — anda memerlukan JavaScript untuk menukar tag pautan href secara dinamik, yang rapuh. Format .ico tidak mempunyai keupayaan mod gelap sama sekali. Untuk penyesuaian favicon mod gelap, hanya SVG menyokongnya secara asli melalui blok gaya `@media (prefers-color-scheme: dark)` terbenam. PNG dan .ico hendaklah digandingkan dengan tindanan SVG.

Persediaan moden yang optimum menggabungkan kedua-dua format. Gunakan `<link rel='icon' href='/favicon.ico'>` sebagai sandaran universal, `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` untuk kejelasan Retina dan `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` untuk sokongan mod gelap boleh skala. Penyemak imbas yang memahami favicon SVG memilih SVG; yang lain jatuh ke PNG; pelayar purba mendapat .ico.

Penyepaduan OS Windows ialah domain .ico sahaja. Pintasan desktop, ikon File Explorer dan pin bar tugas Windows semuanya membaca format .ico. Jika mana-mana pengguna anda menyemat tapak anda pada bar tugas Windows atau membuat pintasan desktop ke URL anda, hanya /favicon.ico digunakan sebagai ikon pintasan. Fail PNG diabaikan sepenuhnya dalam konteks ini.

Untuk 180×180 apple-touch-icon, PNG ialah satu-satunya format yang sah. iOS tidak membaca .ico untuk ikon skrin utama — ia secara khusus memerlukan PNG dipautkan melalui `<link rel='apple-touch-icon'>`. Ini adalah satu kes di mana PNG bukan sahaja diutamakan tetapi diperlukan.

Konfigurasi pelayan tidak boleh diabaikan. Banyak pelayan web menyediakan .ico dengan jenis kandungan yang salah (`text/plain` bukannya `image/x-icon`) jika tidak dikonfigurasikan secara eksplisit. Fail PNG mempunyai sokongan jenis MIME yang lebih luas merentas platform pengehosan. Jika anda melihat favicon.ico anda tidak dimuatkan, pastikan pelayan anda mengembalikan `Content-Type: image/x-icon` atau `image/vnd.microsoft.icon` untuk permintaan ICO.

favicon generator mengeluarkan kedua-dua format secara serentak. Anda tidak perlu memilih — pakej muat turun termasuk favicon.ico, fail PNG kendiri pada 32×32 dan 180×180, dan SVG untuk timbunan moden penuh. Menggunakan pakej ini bermakna soalan ICO vs PNG dijawab secara automatik: gunakan kedua-duanya, setiap satu dalam konteks di mana ia cemerlang.

Untuk perbandingan format lengkap yang turut meliputi SVG, lihat best favicon format guide. Panduan itu menerangkan format yang perlu diutamakan untuk setiap kes penggunaan — tapak web standard, PWA, kedai e-dagang dan alat pembangun — dan menyediakan matriks keputusan untuk memilih timbunan favicon anda.