Favicon HTML yang andal tidak bergantung pada satu tag ajaib. Favicon menggunakan sekumpulan kecil berkas yang dapat diakses dan tautan di head. Prosedur ini mencakup tab modern, klien lama, dan pintasan seluler tanpa menambah banyak varian terdahulu.
Siapkan berkas
Mulai dengan simbol persegi yang tetap terbaca saat sangat kecil. Letakkan favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest, dan berkas PNG yang dirujuk manifes di folder publik yang disajikan pada direktori akar domain.
Jalur seperti /favicon.svg bersifat absolut dari domain. Karena itu, jalur tetap benar pada /products atau /blog/article, berbeda dengan favicon.svg yang dapat ditafsirkan relatif terhadap halaman.
Tambahkan elemen ke head
Deklarasikan SVG terlebih dahulu dengan rel icon dan type image/svg+xml, lalu ICO dengan rel icon dan sizes any. Tambahkan rel apple-touch-icon untuk iOS dan rel manifest untuk pemasangan aplikasi web.
Tipe harus sesuai dengan berkas yang benar-benar disajikan. Jangan mengganti nama PNG menjadi .ico: isi dan header harus menggunakan format ICO.
| Tujuan | Relasi | Berkas |
|---|---|---|
| Peramban modern | icon | /favicon.svg |
| Kompatibilitas | icon | /favicon.ico |
| Layar utama iOS | apple-touch-icon | /apple-touch-icon.png |
| Aplikasi web | manifest | /site.webmanifest |
Deploy tanpa merusak jalur
Buka setiap URL berkas secara langsung setelah deployment. Respons harus berupa gambar atau manifes dengan status berhasil, bukan halaman HTML login atau 404 yang dikembalikan dengan status menyesatkan.
Jika situs berada dalam subdirektori, sesuaikan jalur atau basis publiknya. Periksa halaman akhir melalui alat pengembang: peramban seharusnya meminta URL yang diharapkan tanpa dialihkan ke host lain.
Verifikasi hasilnya
Muat ulang dengan cache dinonaktifkan dan periksa elemen link dalam DOM yang dihasilkan. Lalu uji tab, markah, dan jika relevan, penambahan situs ke layar utama perangkat nyata.
Favicon hasil penelusuran juga mengikuti aturan dan jadwal perayapan mesin pencari. Ikon yang terlihat di peramban tidak menjamin pembaruan seketika pada hasil penelusuran.
Sumber primer
Pertanyaan umum
Apakah elemen favicon ditempatkan di body?
Tidak. Elemen link yang menjelaskan ikon dan manifes ditempatkan di head dokumen.
Apakah favicon.ico di direktori akar sudah cukup?
Itu cadangan yang berguna, tetapi tidak menjelaskan ikon Apple Touch atau ikon manifes yang dapat dipasang. Deklarasikan format untuk tujuan tersebut.
Mengapa menggunakan jalur yang diawali /?
Jalur dimulai dari direktori akar domain sehingga halaman bertingkat tidak mencari berkas di foldernya sendiri.