Ikuti contoh kerja ini, kemudian sesuaikan kawalan yang sama dengan imej anda sendiri. Buka Penjana Favicon / ICO.
Pilih logo yang jelas atau mulakan dengan huruf awal
Buka Penjana Favicon / ICO dan pilih Imej. Muat naik PNG, JPG, JPEG, WebP atau GIF, atau pilih Cuba sampel. Contoh yang dikerjakan menggunakan favicon-orbit.png, tanda orbit ungu 512 × 512 piksel dengan sudut telus. Inputnya ialah 202,491 bait.
Untuk jenama tanpa logo siap, pilih Teks pada halaman alat. Masukkan satu atau dua huruf dan pilih Teruskan (Continue). Editor menawarkan fon Modern sans, Classic serif dan Monospace, serta warna teks dan latar belakang yang berasingan. Sehingga tiga aksara diterima, tetapi aksara tambahan boleh menjadi sukar untuk dikenali pada saiz kecil.
Simpan karya seni asal. Penjana mencipta fail ikon baharu dan tidak menimpa sumber. Input GIF menjadi ikon pegun dan bukannya favicon animasi.
Untuk monogram, menu Fon bermula dengan tiga gaya yang disertakan. Pilih Gunakan fon sistem pada pelayar desktop yang disokong dan benarkan akses untuk menambah fon yang dipasang pada peranti anda. Gunakan chevron sebelumnya dan seterusnya untuk membandingkan fon bersebelahan, atau pilih keluarga dan periksa pratonton langsung, terutamanya pada 16 piksel. Fon kekal pada peranti anda; gaya yang disertakan berfungsi tanpa kebenaran.
Gunakan siluet yang ringkas. Gambar yang terperinci mungkin kelihatan menarik pada 512 piksel tetapi menjadi titik yang tidak jelas pada 16 piksel.
Perhalusi pembingkaian dan periksa pratonton kecil
Editor memaparkan tab pelayar terang dan gelap serta pratonton pada saiz ikon biasa. Semak contoh 16 piksel dahulu; ia adalah ujian paling ketat sama ada tanda itu kekal boleh dikenali. Pratonton Apple Touch mewakili eksport 180 piksel dan dipaparkan lebih kecil dalam ruang kerja.
Pada telefon, buka Tetapan. Biarkan Cipta daripada ditetapkan kepada Imej dimuat naik dan Muat imej ditetapkan kepada Tunjukkan keseluruhan imej. Untuk sampel ini, tetapkan Ruang di sekeliling kandungan kepada 0 dan dayakan Latar belakang telus. Sumber sudah mengandungi bentuk ungu bulatnya sendiri dan margin yang jelas, jadi ia tidak memerlukan latar belakang berwarna tambahan.
Dengan sumber yang berbeza, Tunjukkan keseluruhan imej mengekalkan tepinya, manakala Isi ikon mungkin memotongnya. Segi empat sama bulat, Segi empat sama dan Bulatan mentakrifkan bentuk luar. Latar belakang telus mengekalkan kawasan yang jelas tetapi tidak boleh mengalih keluar latar belakang legap yang telah dilukis ke dalam foto. Semak pratonton terkecil selepas setiap perubahan pembingkaian.
Logo dengan sudut telus boleh mengambil bingkai kedua yang tidak diingini jika anda menambah latar belakang legap yang berasingan. Pratonton kedua-dua pilihan latar belakang.
Contoh dalam panduan ini
Cuba sampel: favicon-orbit.png, 512 × 512 px. Imej dimuat naik; Tunjukkan keseluruhan imej; Segi empat sama bulat; Ruang di sekeliling kandungan 0%; Latar belakang lutsinar didayakan; Pakej ikon laman web (ZIP); Nama laman web My website.
- Imej sumber
- 512 × 512 PNG · 202,491 bait
- ICO bingkai
- 16, 24, 32, 48, 64, 128 dan 256 px
- Pakej
- 9 fail · 304,351 bait
- Hasil ditunjukkan
- Bingkai ICO 256 × 256 sebenar
Pilih ICO berbilang saiz atau pakej laman web
Di bawah Muat turun, pilih Pakej ikon laman web (ZIP) untuk contoh ini. Biarkan Nama laman web sebagai My website untuk sampel, atau gantikannya dengan nama jenama sebenar untuk projek anda sendiri. Nama ini digunakan dalam site.webmanifest; ia tidak ditambah sebagai teks di atas imej.
Pilih Mula. Pelayar menjana favicon.ico tujuh bingkai dengan imej segi empat sama pada 16, 24, 32, 48, 64, 128 dan 256 piksel. Ia juga mencipta ikon PNG pada 16, 32, 48, 180, 192 dan 512 piksel, manifes dan arahan pemasangan. Hasilnya ialah satu ZIP dan bukannya butang muat turun berasingan untuk setiap ikon.
Jika anda hanya memerlukan favicon.ico klasik, pilih ICO berbilang saiz sebaliknya. Ini berguna apabila platform laman web menerima muat naik ICO dan tidak memerlukan pakej berasingan.
Pakej ini ialah set aset ikon laman web. Ia tidak menukar laman web secara automatik menjadi aplikasi web progresif.
Muat turun, pasang dan sahkan fail ikon
Muat turun menyimpan website-icons.zip. Contoh kerja sebenar mengandungi sembilan fail dan bersaiz 304,351 bait. Perbandingan di atas menunjukkan sumber 512 piksel di sebelah bingkai 256 piksel tulen yang diekstrak daripada ICO yang dieksport, bukannya tangkapan skrin pelayar simulasi.
Ekstrak ZIP, muat naik fail ikon ke akar laman web anda dan baca INSTALL.txt. Ia termasuk tag pautan HTML untuk ICO, ikon PNG, ikon Apple Touch dan manifes web. Jika anda meletakkan fail dalam subfolder, kemas kini kedua-dua laluan HTML dan laluan ikon di dalam site.webmanifest.
Semak laman anda dalam tab pelayar baharu dan pada peranti yang anda gunakan. Pelayar boleh menyimpan cache favicon, jadi ikon lama tidak membuktikan pemasangan gagal dengan serta-merta. Simpan imej sumber dan pakej yang dimuat turun sebelum memuat semula editor, kerana muat semula akan kembali ke halaman alat utama.
Pilih satu lokasi ikon kanonik dan pastikan laluan HTML konsisten. Penjana mencipta aset; menerbitkannya kekal sebagai sebahagian daripada aliran kerja laman web anda.
Soalan lazim
Bolehkah saya mencipta favicon tanpa memuat naik logo?
Ya. Pilih Teks, masukkan parap anda, kemudian pilih fon, warna, bentuk dan jarak dalam editor.
Apakah saiz yang ada di dalam fail ICO?
ICO mengandungi tujuh bingkai berasaskan PNG: 16, 24, 32, 48, 64, 128 dan 256 piksel persegi. Pelayar memilih bingkai yang sesuai.
Apakah yang disertakan dalam ZIP laman web?
Ia mengandungi favicon.ico, enam ikon PNG untuk kegunaan pelayar, Apple dan Android, site.webmanifest dan INSTALL.txt dengan tag pautan HTML.
Bolehkah favicon saya mempunyai latar belakang lutsinar?
Ya. Dayakan Latar belakang lutsinar. Ini mengekalkan kawasan lutsinar di sekeliling sumber; ia tidak membuang latar belakang legap daripada foto.
Adakah imej dimuat naik untuk penukaran?
Tidak. Alat ini menjana dan membungkus fail ikon dalam pelayar anda. Simpan fail yang dimuat turun kerana editor bukan storan projek kekal.
Bolehkah saya menggunakan fon yang dipasang pada komputer saya?
Ya, apabila pelayar anda menyokong akses fon setempat. Pilih Teks / monogram, pilih Gunakan fon sistem dan berikan kebenaran pelayar. Keluarga fon anda yang tersedia akan muncul dalam senarai Fon. Gaya yang disertakan kekal boleh digunakan jika kebenaran ditolak atau akses fon setempat tidak tersedia.
Berikan laman web anda yang seterusnya tandatangan kecil yang jelas.
Cuba sampel atau gunakan fail anda sendiri, dan semak hasil sebelum berkongsi.
