Penjana Favicon
Favicon memerlukan beberapa saiz: 16, 32 dan 48 px untuk pelayar, 180 px untuk peranti Apple, serta 192 dan 512 px untuk ikon aplikasi web. Alat ini menghasilkan semuanya serta favicon.ico berbilang saiz, tanpa muat naik.
Cara guna
- Pilih Teks atau emoji dan taip satu hingga tiga aksara, atau pilih Imej dan letakkan logo (sehingga 50 MB). Imej yang tidak segi empat sama dipangkas dari tengah.
- Pilih warna latar, warna teks dan bentuk. Tandakan Latar telus jika mahu bucu yang telus; ikon Apple sentiasa mengekalkan latar padat.
- Muat turun setiap fail dengan butangnya, kemudian salin teg pautan ke dalam head halaman anda dan manifes ke dalam fail bernama site.webmanifest. Letakkan semua fail dalam folder akar tapak anda.
Cara kiraan
Setiap saiz dilukis pada kanvasnya sendiri. Imej besar dikecilkan separuh demi separuh sebelum saiz akhir, supaya garisan nipis kekal jelas pada 16 px. Teks diletakkan di tengah mengikut ketinggian yang diukur dan dikecilkan secara automatik jika tidak muat.
favicon.ico dibina oleh halaman ini, bait demi bait: pengepala 6 bait, satu entri 16 bait bagi setiap saiz, kemudian fail PNG itu sendiri. Pelayar moden dan Windows membaca PNG di dalam ICO, dan satu fail itu meliputi saiz 16, 32 dan 48 px.
Tiada apa-apa dihantar ke pelayan. Imej anda dibaca oleh pelayar, ikon hanya wujud dalam tab ini, dan disimpan terus ke peranti anda apabila anda menekan Muat turun.
Saiz mana digunakan di mana
| Fail | Saiz (px) | Kegunaan |
|---|---|---|
| favicon.ico | 16, 32, 48 | Tab pelayar, pelayar lama, Windows |
| favicon-32x32.png | 32 | Tab dan penanda halaman pada skrin berketumpatan tinggi |
| apple-touch-icon.png | 180 | Skrin utama iPhone dan iPad |
| android-chrome-192x192.png | 192 | Skrin utama Android |
| android-chrome-512x512.png | 512 | Skrin pembuka Android dan aplikasi boleh dipasang |
Di mana hendak letak fail
Muat naik semuanya ke folder teratas tapak anda, supaya yoursite.com/favicon.ico membuka ikon itu. Pelayar meminta /favicon.ico dengan sendirinya walaupun tiada teg. Selepas menukar favicon, tab mungkin masih menunjukkan yang lama untuk seketika kerana pelayar menyimpannya dalam cache. Buka alamat ikon terus dan muat semula untuk menyemak.
Soalan lazim
Adakah logo saya dimuat naik?
Tidak. Imej dilukis dan dikodkan dalam tab pelayar ini. Tiada muat naik, tiada akaun dan tiada salinan disimpan di tempat lain.
Fail mana yang benar-benar saya perlukan?
favicon.ico dalam akar tapak berfungsi untuk hampir semua pelayar. Menambah PNG 32 px, ikon Apple touch 180 px dan ikon 192 serta 512 px meliputi tab, penanda halaman, skrin utama iPhone dan pemasangan Android.
Mengapa ikon Apple tidak bulat di bucu atau telus?
iOS membulatkan bucu sendiri dan memaparkan kawasan telus sebagai hitam. Ikon 180 px sentiasa segi empat sama penuh dengan latar padat supaya kelihatan betul pada skrin utama.
Imej apa yang patut saya mulakan?
PNG segi empat sama sekurang-kurangnya 512 kali 512 piksel dengan logo di tengah dan sedikit ruang di sekelilingnya. Karya yang terperinci sukar dibaca pada 16 px, jadi tanda ringkas atau satu huruf paling sesuai.
Mengapa emoji saya kelihatan berbeza pada peranti lain?
Emoji dilukis dengan fon pada peranti anda sendiri, jadi ikon menggunakan gambar sistem anda. PNG yang disimpan tidak berubah selepas itu, jadi setiap pengunjung melihat gambar yang sama.