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.
Sediakan fail
Mulakan dengan simbol segi empat sama yang kekal jelas apabila sangat kecil. Letakkan favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest dan fail PNG yang dirujuk manifes dalam folder awam yang disampaikan di akar domain.
Laluan seperti /favicon.svg adalah mutlak dari domain. Oleh itu ia kekal betul pada /products atau /blog/article, berbeza daripada favicon.svg yang boleh diselesaikan relatif kepada halaman.
Tambah elemen pada head
Isytiharkan SVG terlebih dahulu dengan rel icon dan type image/svg+xml, kemudian ICO dengan rel icon dan sizes any. Tambah rel apple-touch-icon untuk iOS dan rel manifest bagi pemasangan aplikasi web.
Jenis mesti sepadan dengan fail yang benar-benar disampaikan. Jangan namakan semula PNG kepada .ico: kandungan dan pengepala mesti menggunakan format ICO.
| Tujuan | Hubungan | Fail |
|---|---|---|
| Pelayar moden | icon | /favicon.svg |
| Keserasian | icon | /favicon.ico |
| Skrin utama iOS | apple-touch-icon | /apple-touch-icon.png |
| Aplikasi web | manifest | /site.webmanifest |
Lancarkan tanpa merosakkan laluan
Buka setiap URL fail secara terus selepas pelancaran. Respons mestilah imej atau manifes dengan status berjaya, bukannya halaman log masuk atau HTML 404 yang dikembalikan dengan status mengelirukan.
Jika laman berada dalam subdirektori, laraskan laluan atau asas awam. Periksa halaman akhir dalam alat pembangun: pelayar sepatutnya meminta URL yang dijangka tanpa diubah hala ke hos lain.
Sahkan hasil
Muat semula dengan cache dilumpuhkan dan periksa elemen link dalam DOM yang dihasilkan. Kemudian uji tab, penanda buku dan, jika berkenaan, penambahan laman pada skrin utama peranti sebenar.
Favicon hasil carian turut mengikuti peraturan enjin carian dan jadual perangkakannya. Oleh itu ikon yang kelihatan dalam pelayar tidak menjamin kemas kini serta-merta dalam hasil carian.
Sumber utama
Soalan lazim
Adakah elemen favicon diletakkan dalam body?
Tidak. Elemen link yang menerangkan ikon dan manifes berada dalam head dokumen.
Adakah favicon.ico di akar mencukupi?
Ia sandaran yang berguna, tetapi tidak menerangkan ikon Apple Touch atau ikon manifes boleh pasang. Isytiharkan format bagi tujuan tersebut.
Mengapakah menggunakan laluan bermula dengan /?
Ia bermula di akar domain dan mengelakkan halaman bersarang daripada mencari fail dalam foldernya sendiri.