Panduan favicon
Jawapan terus kepada soalan semasa mencipta favicon: saiz, format dan kod yang perlu ditampal.
Saiz favicon: format dan kegunaan
Carian “saiz favicon” masih memberikan senarai semak lima belas fail yang diwarisi dari 2014. Sebenarnya enam dimensi kini meliputi tab pelayar, hasil carian, iOS, Android dan PWA. Berikut ialah saiz tersebut serta sebabnya.
Baca panduanTukar PNG kepada ICO secara percuma
Format .ico masih dijangka tersedia di akar laman, dan kebanyakan penukar dalam talian meminta anda memuat naik imej ke pelayan mereka. Berikut cara mendapatkan favicon.ico berbilang saiz yang betul daripada PNG tanpa memuat naik apa-apa.
Baca panduanapple-touch-icon: saiz, format dan kod
Ikon Apple Touch secara jelas menyediakan imej yang digunakan apabila pelawat menambahkan laman anda pada skrin utama iPhone. Ia berasingan daripada favicon tab pelayar dan ikon yang diisytiharkan dalam manifes aplikasi web.
Baca panduanFavicon mod gelap dengan SVG
Logo hitam berlatar lutsinar kelihatan sempurna pada tab cerah tetapi hilang pada tab gelap. Format ICO tidak boleh menyesuaikan diri, namun favicon SVG boleh: ia membawa peraturan CSS yang menukar warna mengikut tema pelayar.
Baca panduanTambah favicon dalam HTML
Favicon HTML yang boleh diharap tidak bergantung pada satu tag ajaib. Ia menggunakan set kecil fail yang boleh dicapai dan pautan dalam head. Prosedur ini meliputi tab moden, klien lama dan pintasan mudah alih tanpa memperbanyak varian lama.
Baca panduanFavicon tidak muncul atau tidak dikemas kini
Apabila favicon tiada, fail tidak semestinya menjadi punca. Pelayar, CDN, service worker dan enjin carian masing-masing boleh menyimpan versi berbeza. Diagnosis tersusun mengelakkan perubahan beberapa pemboleh ubah serentak.
Baca panduanFavicon dalam Next.js App Router
App Router boleh menghasilkan elemen ikon daripada fail konvensyen atau objek metadata. Kedua-dua pendekatan sah, tetapi mencampurkannya tanpa peraturan jelas mudah mewujudkan pengisytiharan yang bersaing.
Baca panduanPanduan favicon SVG
SVG mengekalkan tepi tajam pada semua ketumpatan piksel dan boleh menyesuaikan warna dengan tema. Fleksibiliti ini datang dengan satu syarat: fail mesti kekal berdikari, ringkas dan jelas dalam ruang yang amat kecil.
Baca panduan