Favicon bukan lagi satu imej. Pelayar, telefon, dan sistem pengendalian masing-masing mengambil saiz berbeza untuk slot berbeza — tab pelayar, penanda buku, skrin utama iOS, penukar aplikasi Android. Hantar satu PNG 32×32 dan ia akan berfungsi dalam tab tetapi kelihatan kabur apabila seseorang menyimpan tapak anda ke telefon mereka. Hantar set penuh dan setiap permukaan dapat ikon tajam.
Inilah tepat saiz yang anda perlukan, apa tujuan setiap satu, dan mengapa senarai kelihatan sebegini.
Saiz yang penting
Kebanyakan tapak diliputi oleh enam saiz PNG tambah .ico warisan. Inilah rujukannya:
| Saiz | Format | Di mana ia digunakan |
|---|---|---|
| 16×16 | PNG (dalam .ico) | Tab pelayar, bar alamat, penanda buku |
| 32×32 | PNG (dalam .ico) | Tab Retina, pintasan bar tugas Windows |
| 48×48 | PNG | Ikon tapak Windows, sesetengah permukaan Android |
| 180×180 | PNG | Skrin utama iOS (apple-touch-icon) |
| 192×192 | PNG | Skrin utama Android, pemasangan PWA |
| 512×512 | PNG | Skrin cipratan PWA, kedai aplikasi, DPI tinggi |
Fail favicon.ico ialah bekas yang menggabungkan saiz kecil (biasanya 16 dan 32, kadang 48). Pelayar lama dan Windows mencarinya mengikut nama di akar tapak anda, jadi ia masih berbaloi dihantar walaupun pelayar moden dengan senang hati menggunakan PNG.
Mengapa begitu banyak? Lawatan pantas
Sebab senarai panjang ialah ikon muncul dalam saiz fizikal yang sangat berbeza.
16 dan 32 ialah ikon tab harian. 16 ialah saiz klasik; 32 meliputi skrin DPI tinggi ("Retina") di mana 16 akan kelihatan lembut. Pelayar memilih mana pun yang muat ketumpatan piksel.
48 ialah perkara Windows — ia digunakan untuk pintasan tapak dan muncul lebih tajam di beberapa tempat yang 32 tidak liputi dengan baik.
180 ialah apple-touch-icon Apple. Apabila seseorang mengetuk "Add to Home Screen" pada iPhone atau iPad, iOS menggunakan ini. Salah tetapkan dan iOS sama ada akan mengambil tangkapan skrin yang diturunkan skala atau menunjukkan jubin huruf biasa — tiada satu pun kelihatan seperti jenama anda.
192 dan 512 ialah saiz Progressive Web App, diisytiharkan dalam fail manifest.webmanifest. 192 ialah ikon skrin utama Android; 512 menyuap skrin cipratan dan diturunkan skala untuk apa sahaja yang OS perlukan. Jika tapak anda boleh dipasang, kedua-dua ini tidak boleh ditawar.
Adakah anda perlukan lebih besar daripada 512?
Tidak. 512×512 ialah siling praktikal untuk favicon web — spesifikasi webmanifest dan setiap platform utama berhenti di sekitar situ. Jika seni sumber anda 1024 atau lebih besar, itu baik sebagai imej permulaan (lebih banyak butiran untuk diturunkan skala), tetapi anda tidak menghantar favicon 1024. Apa sahaja di atas 512 cuma menambah bait yang tiada siapa guna.
Satu peraturan yang penting apabila naik ke atas: mulakan daripada sumber besar dan segi empat sama. Asal 512×512 atau 1024×1024 diturunkan skala dengan bersih ke setiap saiz di bawahnya. Mulakan daripada imej kecil dan saiz kecil kelihatan keruh kerana tidak pernah ada cukup butiran untuk dikekalkan.
Reka supaya ia bertahan 16×16
Saiz paling sukar ialah yang paling kecil. Pada 16×16 logo terperinci menjadi comot yang tidak boleh dibaca. Beberapa petua yang bertahan merentasi tapak:
- Ringkaskan. Tanda kata penuh tidak akan dibaca pada 16px. Guna satu huruf, monogram, atau bahagian paling boleh dikenali tanda anda.
- Kekalkan kontras tinggi supaya bentuk kekal boleh dibaca pada latar tab cerah dan gelap.
- Tinggalkan sedikit pelapik — ikon yang menyentuh keempat-empat tepi terasa sempit dalam tab.
- Uji ia kecil. Zum keluar pelayar anda, atau cuma lihat tab sebenar. Jika anda tidak boleh kenal apa ia sepintas lalu, ringkaskan lagi.
Menjana keseluruhan set
Anda tidak membina ini dengan tangan. Letakkan satu imej segi empat sama ke dalam Penjana Favicon dan ia menghasilkan set penuh sekali gus — favicon.ico, PNG 16/32/48/180/192/512, webmanifest sedia guna, dan cebisan HTML <head> tepat untuk ditampal. Segala-galanya berjalan dalam pelayar anda: imej tidak pernah dimuat naik, dan selepas lawatan pertama anda alat berfungsi luar talian.
HTML yang anda akan berakhir dengannya
Untuk rujukan, persediaan favicon lengkap kelihatan lebih kurang begini dalam <head> anda:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Penjana menulis ini untuk anda, jadi anda boleh menampalnya terus. Liputi enam saiz tambah .ico dan manifes, dan setiap pelayar, telefon, dan OS dapat ikon tajam yang ia minta.