Carian “saiz favicon” masih memberikan senarai semak lima belas fail yang diwarisi dari 2014. Sebenarnya enam dimensi kini meliputi tab pelayar, hasil carian, iOS, Android dan PWA. Berikut ialah saiz tersebut serta sebabnya.
Saiz yang benar-benar anda perlukan
Setiap baris merujuk kegunaan yang didokumenkan dalam pakej yang dicadangkan. Jadual ini mengutamakan set kecil yang serasi merentas platform berbanding himpunan varian lama.
| Fail | Dimensi | Kegunaan |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Tab, penanda buku, pelayar lama dan perangkak |
| favicon.svg | vektor, segi empat sama | Pelayar moden, jelas pada semua saiz, menyokong mod gelap |
| favicon-96x96.png | 96×96 | Hasil carian Google pada peranti mudah alih |
| apple-touch-icon.png | 180×180 | Skrin utama iOS dan iPadOS, tanpa kelutsinaran |
| web-app-manifest-192x192.png | 192×192 | Skrin utama Android, diisytiharkan dalam manifes web |
| web-app-manifest-512x512.png | 512×512 | Skrin permulaan PWA, versi “maskable” |
Mengapakah 16, 32 dan 48 berada dalam .ico yang sama
ICO ialah format bekas: satu fail boleh menyimpan beberapa imej dan pelayar memilih imej yang sepadan dengan paparannya. Inilah yang diperlukan kerana saiz yang diminta berubah mengikut konteks.
16×16 digunakan untuk tab pada skrin standard. 32×32 menyediakan varian untuk paparan berketumpatan tinggi dan antara muka pelayar lain. 48×48 melengkapkan bekas dan turut mematuhi peraturan gandaan 48 yang didokumenkan Google untuk favicon hasil carian.
Menyediakan .ico yang hanya mengandungi 16×16 ialah kesilapan paling lazim: pada skrin Retina, ikon dibesarkan dan sentiasa kelihatan kabur.
180×180 untuk iOS, 192 dan 512 untuk Android
iOS tidak membaca manifes web untuk ikon skrin utama: ia mencari tag apple-touch-icon. Satu saiz mencukupi, iaitu 180×180, yang meliputi semua iPhone dan iPad terkini. Sistem mengecilkannya sendiri untuk peranti lama.
Android menggunakan manifes web. Dua entri mencukupi: 192×192 untuk ikon skrin utama dan 512×512 untuk skrin permulaan apabila laman dipasang sebagai aplikasi. Versi 512 hendaklah diisytiharkan dengan purpose “maskable”, bermakna rekaannya kekal sesuai apabila dipangkas menjadi bulatan atau segi empat berbucu bulat.
Untuk ikon maskable, kekalkan bahagian penting dalam 80% kawasan tengah. Apa-apa di luar kawasan itu boleh dipangkas mengikut pengeluar telefon.
Imej sumber manakah yang patut digunakan
Sumber terbaik ialah SVG: ia boleh diskalakan tanpa kehilangan mutu kepada semua saiz di atas. Jika tiada, gunakan PNG segi empat sama sekurang-kurangnya 512×512 piksel supaya ikon permulaan Android pun dihasilkan dengan mengecilkan imej, bukannya membesarkannya.
Logo mendatar dengan teks tidak sesuai pada 16×16: pada saiz itu, perkataan menjadi beberapa piksel kabur. Ambil simbolnya sahaja atau mulakan dengan satu atau dua huruf pada latar belakang berkontras.
Akhir sekali, semak kontras pada latar belakang cerah dan gelap: logo hitam hilang dalam tab bertema gelap. Untuk itulah varian gelap favicon SVG disediakan.
Saiz yang tidak lagi diperlukan
Penjana lama masih menghasilkan fail untuk integrasi terdahulu, seperti jubin Windows yang menggunakan mstile-150x150.png dan browserconfig.xml. Tambahkan hanya apabila senarai platform sokongan anda secara jelas menyasarkan antara muka tersebut.
Siri panjang apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 dan 152x152 berasal dari zaman iOS belum boleh mengubah saiz. Satu imej 180×180 menggantikan semuanya.
Membuang pengisytiharan yang tidak digunakan meringkaskan repositori dan HTML anda. Semak pelayar dan platform sasaran anda sendiri sebelum membuang integrasi sedia ada.
Sumber utama
Soalan lazim
Adakah favicon.ico masih diperlukan?
Ya, tetapi hanya di akar laman. Pelayar moden mengutamakan SVG, namun banyak perangkak, pengagregat dan klien e-mel masih meminta /favicon.ico tanpa membaca HTML anda. Fail ini hanya beberapa kilobait: kekalkannya.
Saiz favicon apakah yang digunakan Google dalam hasil carian?
Google meminta ikon yang panjang sisinya gandaan 48 piksel dan biasanya memaparkannya pada 48×48. PNG 96×96 atau SVG memenuhinya dengan mudah. Ikon mesti boleh dirangkak dan tidak disekat oleh robots.txt.
Bolehkah favicon saya berbentuk segi empat tepat?
Secara teknikal boleh, tetapi tidak sesuai secara visual. Setiap konteks paparan menyediakan ruang segi empat sama: imej segi empat tepat sama ada diherotkan atau diletakkan di tengah dengan jalur kosong. Sentiasa bermula dengan segi empat sama dan tambah ruang di sekeliling simbol jika perlu.