Cara membuat favicon
Saiz, format dan kod yang anda perlukan untuk favicon yang dipaparkan di mana-mana.
Favicon ialah ikon kecil dalam tab pelayar, dalam penanda halaman dan di sebelah laman anda dalam hasil carian mudah alih Google. Favicon yang tiada menjadikan laman kelihatan belum siap, dan favicon yang kabur kelihatan lebih teruk. Membuat favicon yang baik hanya mengambil masa beberapa minit.
Mulakan dengan reka bentuk yang betul
Favicon dipaparkan sekecil 16 kali 16 piksel, jadi logo penuh dengan tanda kata tidak akan dapat dibaca. Gunakan tanda yang ringkas: simbol daripada logo anda, satu huruf awal, atau bentuk tebal dalam warna jenama anda. Ujinya dengan mengecilkannya kepada suku saiz di skrin: jika anda masih dapat mengenal pastinya, ia akan berfungsi.
Mulakan dengan imej segi empat sama sekurang-kurangnya 512 kali 512 piksel, sebaik-baiknya PNG dengan latar belakang lutsinar. Jika logo anda bukan segi empat sama, pangkasnya menjadi segi empat sama dengan nisbah dikunci pada 1:1.
Fail yang anda perlukan
| Fail | Saiz | Digunakan oleh |
|---|---|---|
| favicon.ico | Mengandungi versi 16, 32 dan 48 piksel | Pelayar, sistem lama, permintaan lalai untuk /favicon.ico |
| Ikon PNG | 32 kali 32 dan 192 kali 192 | Pelayar moden, skrin utama Android |
| apple-touch-icon.png | 180 kali 180 | Penanda halaman skrin utama iPhone dan iPad |
Google Search juga menggunakan favicon anda dalam hasil carian. Ia perlu berbentuk segi empat sama sekurang-kurangnya 48 kali 48 piksel dan mesti boleh dirangkak di laman anda.
Membuat fail ICO
Letakkan PNG segi empat sama anda ke dalam penukar PNG ke ICO. Ia menghasilkan fail .ico sebenar yang mengandungi saiz kecil yang diminta oleh pelayar. Untuk versi PNG, ubah saiz imej segi empat sama yang sama kepada 180, 192 dan 32 piksel.
Menambahkannya ke laman anda
Muat naik favicon.ico ke folder akar laman anda supaya ia boleh dicapai di laman-anda.com/favicon.ico, dan tambah baris berikut di dalam bahagian head halaman anda:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/ms/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/ms/apple-touch-icon.png">
Dalam WordPress, pergi ke Appearance, Customize, Site Identity dan muat naik imej segi empat sama sebagai Site Icon; WordPress akan menghasilkan saiz-saiznya untuk anda. Shopify, Wix dan Squarespace masing-masing mempunyai tetapan favicon dalam tetapan laman atau tema.
Apabila favicon baharu tidak dipaparkan
Pelayar menyimpan favicon dalam cache dengan degil. Buka laman dalam tetingkap peribadi, atau lawati laman-anda.com/favicon.ico secara terus dan muat semula. Google boleh mengambil masa beberapa hari atau minggu untuk mengemas kini ikon dalam hasil carian, selepas ia merangkak semula halaman utama anda.
Kesilapan biasa
- Menggunakan logo penuh dengan teks kecil, yang menjadi tompok pada 16 piksel.
- Ikon putih pada latar belakang lutsinar, yang hilang pada tab pelayar yang cerah.
- Hanya menyediakan fail kecil 16 piksel, yang kelihatan kabur pada skrin beresolusi tinggi.
- Terlupa fail di /favicon.ico, yang diminta oleh sesetengah pelayar dan perangkak tanpa mengira apa yang dinyatakan oleh halaman.