Artikel
Membuat favicon daripada PNG
Favicon ialah grafik kecil yang dipaparkan pelayar dalam tab, penanda buku, dan senarai sejarah. Melakukannya dengan betul melibatkan lebih daripada mengubah saiz logo: format .ico mengemas beberapa resolusi ke dalam satu fail, pelayar moden memilih PNG, peranti mudah alih mempunyai apple-touch-icon tersendiri, dan manifes aplikasi web memerlukan set ikon mereka sendiri. Artikel ini merangkumi setiap bahagian dan menerangkan cara menghasilkan keseluruhan set daripada satu PNG sumber.
Apa itu favicon dan di mana pelayar menggunakannya
Perkataan favicon ialah singkatan "favorite icon". Pelayar pertama kali memaparkannya dalam bar alamat di Internet Explorer 5 (1999), kemudian menggunakannya untuk penanda buku. Hari ini ia muncul dalam tab pelayar, bar alat penanda buku, sejarah penyemakan imbas, halaman tab baharu pada beberapa pelayar, dan bar tugas sistem pengendalian apabila laman web disematkan. Pada mudah alih, jika pengguna menambah laman web ke skrin utama mereka, peranti menggunakan imej berkaitan tetapi berbeza yang dipanggil apple-touch-icon dan bukannya favicon piawai. Enjin carian kadang-kadang menunjukkan favicon di sebelah hasil dalam antara muka mereka. Grafik ini kecil mengikut reka bentuk, yang menjadikannya berkesan untuk pengenalpastian visual cepat tetapi juga menuntut untuk dihasilkan dengan baik: pada 16x16 piksel, logo yang terperinci menjadi calar yang tidak jelas. Fail favicon itu sendiri telah melalui beberapa format selama beberapa dekad, dengan .ico kekal sebagai yang paling serasi secara meluas dan PNG kini merupakan lalai moden untuk kebanyakan pelayar.
Bekas .ico: beberapa resolusi dalam satu fail
Format .ico ialah bekas, bukan imej tunggal. Satu fail .ico boleh menyimpan beberapa imej bitmap pada resolusi berbeza, masing-masing disimpan sebagai entri berasingan dalam indeks di permulaan fail. Tiga saiz yang paling biasa ialah 16x16, 32x32, dan 48x48 piksel. Apabila Windows memaparkan favicon dalam Explorer atau pada bar tugas, ia memilih entri yang paling sesuai dengan konteks paparan. Versi Windows yang lebih lama memerlukan entri 48x48 untuk slot bar tugas ketumpatan tinggi. Pelayar meminta favicon pada 16x16 untuk tab tetapi mungkin menggunakan entri yang lebih besar jika paparan ketumpatan lebih tinggi dikesan. Mengemas ketiga-tiga saiz ke dalam satu fail .ico bermakna satu permintaan HTTP merangkumi setiap kes penggunaan. Mengedarkannya sebagai PNG berasingan juga sah tetapi memerlukan teg pautan tambahan dan menambah permintaan HTTP. Imej dalaman dalam fail .ico ialah data BMP atau PNG piawai, jadi bekas menambah hanya sedikit overhead pengepala setiap entri.
Mereka bentuk untuk saiz kecil: permudahkan tanda
Pada 16x16 piksel anda mempunyai 256 piksel jumlah. Logotaip biasa dengan markah perkataan atau butiran halus menjadi tidak boleh dibaca pada saiz itu. Pendekatan piawai ialah mewujudkan tanda yang dipermudah: satu huruf, bentuk abstrak, atau ikon yang mewakili jenama tanpa bergantung pada butiran. Beberapa masalah khusus untuk dijangka: strok nipis hilang sepenuhnya pada saiz kecil, terutamanya pada skrin bukan retina. Pasangan huruf dan butiran ruang negatif bergabung menjadi bunyi kelabu. Kecerunan hampir tidak kelihatan. Kontras tinggi antara tanda dan latar belakangnya ialah satu-satunya faktor terbesar dalam kebolehbacaan. Bentuk pepejal pada latar belakang biasa hampir selalu dibaca lebih baik daripada ilustrasi terperinci pada 16x16. Saiz 32x32 dan 48x48 lebih mudah dan boleh menyokong sedikit lebih banyak butiran, tetapi versi 16x16 harus dianggap sebagai kekangan mengikat. Jika tanda masih tidak boleh dibaca pada 16x16, reka bentuk perlu dipermudahkan lagi.
Set moden: .ico, ikon PNG, apple-touch-icon, manifes, dan teg pautan HTML
Persediaan favicon yang lengkap untuk laman awam kini memerlukan lima perkara. Pertama, favicon.ico di root laman (pelayar meminta /favicon.ico terus tanpa teg pautan sebagai sandaran). Kedua, PNG 32x32 untuk pelayar desktop moden, diisytiharkan dengan teg pautan: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Ketiga, PNG 16x16 untuk saiz tab: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Keempat, apple-touch-icon pada 180x180 piksel untuk penanda buku skrin utama iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Kelima, manifes aplikasi web (site.webmanifest) dengan PNG 192x192 dan 512x512 untuk Android dan aplikasi web progresif. Ketelusan disokong dalam PNG dan dalam entri yang dikodkan PNG dalam .ico, walaupun apple-touch-icon harus mempunyai latar belakang legap kerana iOS mengabaikan saluran alfa dan mengisi kawasan telus dengan hitam.
Lakukan secara tempatan: favicon-generator mengekalkan imej anda pada peranti anda
favicon-generator di laman ini mengambil PNG dan menghasilkan set lengkap: favicon.ico berbilang resolusi yang dikemas dengan entri 16x16, 32x32, dan 48x48, saiz PNG individu untuk kegunaan teg pautan langsung, dan apple-touch-icon 180x180. Semua ini berlaku dalam pelayar anda menggunakan Canvas API dan penyandi .ico JavaScript. Imej sumber anda tidak pernah dimuat naik ke mana-mana; ia kekal pada peranti anda. Ini penting apabila fail sumber ialah logo syarikat atau sebarang aset yang tidak sepatutnya meninggalkan mesin anda sebelum anda mengawal ke mana ia pergi. Setiap fail yang dijana ditawarkan sebagai muat turun berasingan, menggunakan nama fail konvensional. Anda menyalinnya ke root laman anda dan menambah teg pautan yang sepadan ke head HTML anda. Jika logo sumber anda mempunyai butiran halus yang tidak bertahan pada paparan 16x16, anda boleh memotong atau mempermodahkannya sebelum menjatuhkannya ke dalam penjana, atau membekalkan imej sumber berbeza yang disediakan khusus untuk favicon.
Alat dalam artikel ini
- Penjana faviconJana PNG favicon pada 16/32/48/180/192/512 px daripada mana-mana imej. Tiada muat naik.
- Ubah saiz imejUbah saiz dan tukar imej anda (JPEG, PNG, WebP) tanpa memuat naiknya.
- Mampatkan imejKurangkan saiz fail imej tanpa muat naik. Gelangsar kualiti atau saiz fail sasaran dalam KB. Berkelompok disokong.
Soalan lazim
Adakah saya masih memerlukan favicon.ico jika saya mengisytiharkan teg pautan PNG?
Ya, atas dua sebab. Pertama, pelayar yang tidak membaca HTML anda (perayap web, pembaca RSS, beberapa pelayar mudah alih lama) mencari /favicon.ico terus di root domain. Jika fail itu tiada, mereka menjana permintaan 404 pada setiap muat halaman, yang menambah bunyi ke log pelayan anda dan perjalanan pusingan kecil yang tidak perlu. Kedua, versi lama Internet Explorer hanya mengenali format .ico dan mengabaikan teg pautan PNG. Menyediakan kedua-duanya merangkumi semua kes.
Bolehkah saya menggunakan SVG sebagai favicon?
Chrome dan Firefox menyokong favicon SVG melalui `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari tidak menyokong favicon SVG. Kerana favicon SVG bebas resolusi, ia kelihatan tajam pada sebarang ketumpatan paparan, termasuk skrin retina, tanpa memerlukan pelbagai varian saiz. Cadangan praktikal ialah mengisytiharkan teg pautan SVG untuk pelayar yang menyokongnya dan masih menyertakan sandaran .ico untuk liputan lengkap. Favicon SVG juga boleh menyertakan pertanyaan media `prefers-color-scheme` untuk bertukar antara versi cerah dan gelap secara automatik.
Imej apa yang perlu saya mulakan untuk mendapatkan hasil terbaik?
PNG persegi pada 512x512 atau lebih besar dengan latar belakang telus memberikan fleksibiliti paling banyak. Bermula besar dan mengurangkan skala mengekalkan lebih banyak butiran berbanding bermula dari imej kecil. Jika logo utama anda menyertakan markah perkataan, pertimbangkan untuk menyediakan versi yang dipermudahkan secara berasingan yang menunjukkan hanya ikon atau tanda, kerana teks tidak boleh dibaca pada 16x16 tanpa mengira resolusi sumber. Kontras tinggi antara tanda dan latar belakangnya ialah peramal paling boleh dipercayai tentang sama ada saiz kecil akan dibaca dengan jelas.