Saiz Favicon Terbaik untuk Tapak Web
Berpuluh-puluh saiz muncul dalam helaian cheat yang sudah lapuk. Panduan ini menyenaraikan perkara yang sebenarnya diminta oleh penyemak imbas dan OS pada tahun 2026, menunjukkan matriks saiz dengan contoh dan mengesyorkan set terkecil yang masih meliputi setiap permukaan.
Mengapa saiz masih penting
favicon diskalakan kepada banyak piksel fizikal: 16×16 dalam tab, 32×32 pada bar penanda halaman Retina, 180×180 pada skrin utama iPhone, 512×512 pada skrin percikan PWA. Satu imej tidak dapat melayani kesemuanya dengan baik.
Meningkatkan skala sumber kecil menghasilkan kabur. Menurunkan skala 1024×1024 yang terperinci tanpa ujian kehilangan garis halus. Pembetulan ialah satu set kecil eksport yang dibina khas, atau satu berbilang saiz .ico yang membenamkan bingkai desktop biasa.
Penghantaran setiap saiz yang disenaraikan pada catatan blog lama adalah membazir. Penghantaran terlalu sedikit meninggalkan jurang yang kelihatan pada satu platform. Matriks di bawah menggambarkan permintaan sebenar yang diukur dalam pelayar 2026.
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.
Apa yang diminta oleh pelayar
Tab desktop biasanya memaparkan ikon piksel 16×16 CSS, yang dipetakan kepada 16×16 atau 32×32 piksel peranti bergantung pada ketumpatan paparan.
Bar penanda halaman dan tab yang disematkan selalunya menggunakan 32×32 atau 48×48. Chromium boleh memilih bingkai terbenam yang paling hampir daripada favicon.ico secara automatik.
Ketiga-tiga saiz tab biasa (16, 32, 48) muat dengan selesa di dalam satu berbilang saiz .ico. Itulah sebabnya bekas .ico kekal sebagai format penghantaran desktop yang paling cekap.
Apa yang diminta oleh sistem pengendalian
Menu Mula Windows, pin bar tugas dan pintasan Penjelajah Fail mungkin meminta 24×24, 32×32, 48×48, 64×64, 128×128 atau 256×256 bergantung pada skala konteks dan paparan.
Microsoft mendokumenkan 16, 24, 32, 48, 64, 128 dan 256 sebagai set praktikal untuk apl Windows. Web favicons mendapat manfaat daripada penggabungan sekurang-kurangnya 16 hingga 256 dalam favicon.ico.
macOS lebih suka .icns untuk apl asli tetapi dengan senang hati menggunakan .ico dan PNG untuk pintasan web. iOS mengabaikan .ico untuk ikon skrin utama dan mahukan 180×180 PNG khusus melalui ikon epal-sentuh.
Apa yang PWAs dan permintaan mudah alih
Manifes apl web memerlukan ikon dengan tujuan apa-apa dan boleh bertopeng. Saiz biasa ialah 192×192 dan 512×512 PNG.
Android Chrome menggunakan ikon manifes untuk memasang UI dan skrin percikan. Sumber 512×512 menurunkan skala dengan bersih; manifes 192×192 sahaja kelihatan lembut pada telefon canggih.
iOS tidak membaca ikon manifes untuk peletakan skrin utama. Anda mesti mengisytiharkan <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.
Matriks saiz sekilas pandang
16×16 — tab penyemak imbas (1× ketumpatan). 32×32 — tab dan penanda halaman pada paparan Retina. 48×48 — beberapa konteks UI Windows dan penggunaan penanda halaman lama.
64×64 dan 128×128 — pintasan Windows pada penskalaan yang lebih tinggi. 256×256 — Windows jubin disematkan dan pratonton DPI tinggi.
180×180 — ikon sentuh-epal (iOS / iPadOS). 192×192 dan 512×512 — PWA ikon manifes untuk Android dan gesaan pemasangan.
Contoh mengikut jenis tapak
Blog peribadi: favicon.ico dengan 16/32/48 sahaja. Boleh diterima jika anda tidak mengambil berat tentang pengilat skrin utama iOS.
Tapak pemasaran syarikat: Himpunan .ico serta ikon sentuh-epal 180×180 ditambah 32×32 PNG <pautan> untuk tab Retina yang jelas.
PWA boleh dipasang: .ico penuh, ikon sentuh epal, manifes 192 + 512, SVG pilihan untuk krom UI berskala.
Apl desktop elektron: Windows .ico dengan 16–256; macOS .icns secara berasingan jika anda mengedarkan di luar penyemak imbas.
Set berdaya maju minimum
Berbilang saiz favicon.ico (16, 32, 48, 64, 128, 256) pada /favicon.ico.
apple-touch-icon.png pada 180×180 untuk skrin utama iOS.
Satu 512×512 PNG dalam site.webmanifest untuk permukaan pemasangan Android.
Trio itu meliputi kira-kira 95% permintaan ikon dunia sebenar. Tambahkan SVG apabila anda mahu penskalaan tanpa had dan penggayaan mod gelap dalam tab moden.
Soalan lazim
Adakah saya memerlukan 16×16 PNG jika ia berada di dalam .ico? Tidak, melainkan anda mahukan <link rel="icon" sizes="16x16"> yang jelas untuk penyahpepijatan.
Adakah 120×120 masih diperlukan? Itu saiz iOS lama. Safari moden menjangkakan 180×180.
Bagaimana pula dengan 64×64 favicons? Berguna di dalam .ico untuk Windows; jarang diperlukan sebagai PNG kendiri.
Bolehkah saya melangkau 256×256? Hanya jika anda tidak mengambil berat tentang pratonton pintasan DPI tinggi Windows. Kebanyakan pasukan memasukkannya.
Menyelesaikan masalah
Ikon iOS mempunyai sudut bulat dan kelihatan dipotong: iaitu iOS masking — reka bentuk dengan pelapik selamat, bukan pepijat dalam fail anda.
Pemasangan PWA menunjukkan ikon generik: ikon manifes tiada atau di bawah minimum 192×192. Sahkan JSON dengan Chrome DevTools → Application.
Ikon tab lembut pada Retina Mac: pastikan favicon.ico mengandungi bingkai 32×32, bukan sahaja 16×16.
Muat turun besar .ico: anda membenamkan 256×256 BMP yang tidak dimampatkan. Bina semula dengan pemampatan PNG di dalam bekas.
Nisbah piksel peranti dan saiz yang dilihat
CSS piksel bukan piksel fizikal. Slot tab 16×16 pada paparan 2× selalunya memuatkan peta bit 32×32 untuk ketajaman.
Itulah sebabnya favicon.ico yang mengandungi kedua-dua bingkai 16 dan 32 mengatasi prestasi 16×16 PNG tunggal pada Retina MacBooks dan komputer riba Windows DPI tinggi.
Android PWAs memaparkan ikon manifes pada skrin percikan pada resolusi peranti penuh — sumber 192×192 dipanjangkan ke telefon 1440p kelihatan lembut; 512×512 menurunkan skala dengan bersih.
iOS menggunakan topeng dan jejari sudutnya sendiri pada aset ikon-sentuh epal. Reka bentuk dengan pelapik selamat supaya tepi penting tidak dipotong oleh tupai.
Semasa menguji, tangkap skrin tab pada zum penyemak imbas 100% dan pada penskalaan OS 200%. Jika kedua-duanya kelihatan segar, matriks saiz anda mungkin betul.
Cara mengaudit liputan saiz semasa anda
Muat turun favicon.ico dan bukanya dalam alat yang menyenaraikan bingkai terbenam. Sahkan 16, 32, 48 dan sekurang-kurangnya satu bingkai bersaiz tinggi wujud.
Ambil apple-touch-icon.png dan semak dimensi dalam mana-mana pemeriksa imej — jangkakan 180×180, bukan 120×120 daripada templat lapuk.
Buka site.webmanifest dan sahkan ikon[] termasuk 192×192 dan 512×512 dengan laluan yang betul dan jenis imej/png.
Muatkan tapak anda dalam Chrome DevTools → Aplikasi → Manifes. Entri yang tiada atau tidak sah menunjukkan amaran sebelum pengguna melihat dialog pemasangan yang rosak.
Simpan hamparan yang memetakan setiap fail kepada penggunanya (tab, iOS, PWA, Windows). Pada masa hadapan anda tidak perlu merekayasa balik folder aset semasa penjenamaan semula.
Kalis masa depan set saiz anda
Kelas peranti baharu muncul perlahan-lahan di tanah favicon. Ikon manifes 512×512 hari ini meliputi UI boleh lipat dan pemasangan tablet yang lebih baik daripada 192 sahaja.
Elakkan saiz eksotik (96×96, 120×120) melainkan dokumen platform tertentu masih mewajibkannya — ia menambah beban pengarangan tanpa faedah yang luas.
Simpan vektor induk atau raster 1024×1024 dalam repo reka bentuk anda walaupun anda tidak pernah menyediakannya. Platform masa hadapan mungkin meminta ikon manifes yang lebih besar.
Automatikkan penjanaan semula daripada induk supaya apabila saiz yang disyorkan baharu muncul, anda menjalankan semula skrip dan bukannya mengeksport tangan dalam Photoshop.