Pengenalan kepada Penjana Favicon
Penjana Favicon ialah alat yang menukarkan satu fail imej sumber kepada koleksi fail ikon yang lengkap untuk kegunaan laman web. Alat ini menghasilkan pelbagai format ikon yang diperlukan untuk tab penyemak imbas, ikon sentuh Apple (Apple touch icons), dan ikon Aplikasi Web Progresif (PWA). Selepas proses penukaran selesai, semua fail ini dibungkus ke dalam satu fail ZIP yang boleh dimuat turun bersama-sama dengan kod HTML yang diperlukan untuk integrasi ke dalam kod sumber laman web anda.
Proses penukaran imej ini berlaku secara langsung di dalam penyemak imbas anda, dan tiada sebarang fail yang dimuat naik ke BroBroGo. Ini memastikan data imej anda diproses secara lokal pada peranti anda sendiri.
Spesifikasi Input dan Format Imej
Untuk memulakan proses penjanaan, anda perlu menyediakan satu fail imej yang memenuhi kriteria berikut:
- Format Fail: Alat ini menyokong format PNG, JPG, atau SVG. Jika format lain digunakan, ralat "Hanya imej PNG, JPG dan SVG yang disokong." akan dipaparkan.
- Had Saiz Fail: Saiz maksimum fail imej yang diterima adalah sehingga 50 MB. Jika fail melebihi had ini, sistem akan memaparkan ralat "Fail ini melebihi 50 MB. Gunakan imej sumber yang lebih kecil.".
- Dimensi Imej: Dimensi lebar dan tinggi imej yang dimuatkan akan dipaparkan dalam format "
{w}×{h}px". Untuk imej berasaskan piksel (PNG atau JPG), dimensi minimum yang disyorkan ialah sekurang-kurangnya 512 × 512 piksel. Penggunaan imej yang lebih kecil daripada saiz ini akan mencetuskan amaran "Sumber kecil ({w}×{h}px): ikon besar mungkin kelihatan kurang tajam. Saiz 512 × 512 atau lebih besar — atau SVG — memberikan hasil terbaik.".
Pengurusan Imej Bukan Segi Empat Sama dan Latar Belakang
Ikon yang dijana untuk kegunaan web sentiasa berbentuk segi empat sama. Oleh itu, alat ini menyediakan pilihan konfigurasi khusus untuk mengendalikan imej sumber yang tidak mempunyai nisbah aspek 1:1 serta pengurusan warna latar belakang:
Pilihan Kesesuaian (Fit)
Apabila imej sumber bukan berbentuk segi empat sama, anda boleh memilih salah satu daripada dua kaedah pelarasan:
- Muat (pad): Keseluruhan imej dikekalkan tanpa dipotong, diletakkan di tengah-tengah ruang segi empat sama dengan ruang kosong (padding) di sekelilingnya.
- Isi (pangkas): Imej akan memenuhi keseluruhan ruang segi empat sama, manakala bahagian tepi imej yang melimpah keluar daripada sempadan akan dipotong.
Pilihan Latar Belakang
Latar belakang ikon boleh dikonfigurasikan mengikut keperluan reka bentuk anda:
- Lut sinar: Pilihan lalai yang membiarkan bahagian latar belakang kosong tanpa warna. Pilihan ini sangat sesuai untuk paparan pada tab penyemak imbas.
- Warna: Anda boleh menetapkan warna latar belakang khusus pilihan anda. Penggunaan warna latar belakang pepejal adalah lebih selamat untuk ikon skrin utama iPhone (Apple touch icon) kerana sistem iOS akan mewarnakan mana-mana kawasan lut sinar dengan warna hitam secara automatik.
Kandungan Pek Ikon yang Dijana
Apabila anda menekan butang "Jana ikon", alat ini akan menghasilkan fail-fail berikut yang dibungkus di dalam satu fail ZIP:
| Nama Fail / Format | Dimensi / Kandungan | Kegunaan Utama |
|---|---|---|
favicon.ico |
Mengandungi saiz 16, 32, dan 48 piksel di dalamnya | Ikon tab klasik untuk penyemak imbas lama dan moden |
| Ikon PNG | 16 × 16 px dan 32 × 32 px | Ikon tab dalam format PNG |
| Ikon PNG | 180 × 180 px | Ikon sentuh untuk skrin utama iPhone & iPad |
| Ikon PNG | 192 × 192 px dan 512 × 512 px | Ikon untuk peranti Android & aplikasi web yang dipasang (PWA) |
site.webmanifest |
Fail teks kecil yang menyenaraikan ikon-ikon besar | Memberitahu peranti pintar di mana ikon diletakkan |
| Fail SVG | Vektor asal (hanya jika imej sumber adalah SVG) | Memastikan ikon kekal tajam pada sebarang saiz paparan |
Panduan Pemasangan pada Laman Web
Untuk melaksanakan ikon yang telah dijana pada laman web anda, ikuti langkah-langkah teknikal berikut:
- Muat Turun Fail: Klik pada butang "Muat turun ZIP" untuk mendapatkan keseluruhan pek ikon yang telah dijana.
- Penyimpanan Fail: Ekstrak fail ZIP tersebut dan letakkan semua fail (termasuk
favicon.ico, fail-fail PNG, dansite.webmanifest) ke dalam folder akar (root directory) pelayan web anda. Ini memastikan failfavicon.icoboleh diakses secara terus melalui laluan/favicon.ico. - Integrasi Kod HTML: Salin kod snippet HTML yang disediakan oleh alat ini dan tampalkan kod tersebut ke dalam bahagian
<head>pada setiap halaman web anda. Kod ini akan mengarahkan penyemak imbas dan peranti mudah alih untuk memilih saiz serta format ikon yang paling sesuai secara automatik.
Soalan Lazim (FAQ)
Apakah fail yang terkandung dalam pek ikon?
favicon.ico dengan versi 16, 32 dan 48 piksel di dalamnya, ikon PNG pada 16, 32, 180, 192 dan 512 piksel, serta site.webmanifest yang menyenaraikan ikon besar. Mulakan daripada SVG dan vektor itu sendiri turut disertakan. Satu fail ZIP menyimpan segala-galanya.
Apakah saiz imej sumber saya yang sepatutnya?
SVG adalah ideal — setiap ikon dilukis daripada vektor, jadi saiz 16 piksel pun kekal tajam. Untuk PNG atau JPG, mulakan daripada sekurang-kurangnya 512 × 512; imej yang lebih kecil akan dipertingkatkan saiznya dan boleh kelihatan kurang tajam.
Adakah latar belakang sepatutnya lut sinar atau berwarna?
Ikon tab kelihatan elok dengan latar belakang lut sinar. Walau bagaimanapun, skrin utama iPhone dan iPad akan mewarnakan kawasan lut sinar menjadi hitam — jika orang mungkin menambahkan tapak anda pada skrin utama mereka, pilih warna latar belakang.
Apakah yang berlaku kepada imej yang bukan berbentuk segi empat sama?
Ikon adalah berbentuk segi empat sama, tetapi imej anda tidak akan diregangkan. Secara lalai ia diletakkan di tengah dengan ruang kosong di sekelilingnya; tukar kepada "Isi (pangkas)" untuk memangkas bahagian tepi yang berlebihan.
Di manakah fail tersebut perlu diletakkan di tapak saya?
Muat naik fail tersebut ke folder akar tapak anda, supaya favicon.ico boleh diakses sebagai /favicon.ico, kemudian tampal baris yang dijana ke dalam halaman anda. Penyemak imbas akan memilih saiz yang betul dengan sendirinya.