Favicon Tidak Ditampilkan — Panduan Mengatasi Masalah
Anda mengunggah favicon tetapi tabnya masih menampilkan globe umum atau logo lama. Panduan ini membahas penyebab paling umum — caching, jalur yang salah, file hilang, dan tag <link> yang bertentangan — sesuai urutan Anda harus memeriksanya.
Browser menyimpan favicon dalam cache lebih agresif dibandingkan aset lainnya. Penyegaran paksa (Ctrl+Shift+R atau Cmd+Shift+R) memperbaiki banyak alarm palsu. Jika gagal, tambahkan string kueri versi satu kali: /favicon.ico?v=2.
Konfirmasikan file tersebut ada di URL yang diminta browser. Buka /favicon.ico langsung di tab baru. 404 berarti file tidak diterapkan di tempat yang Anda kira — umum pada build SPA yang hanya melayani index.html.
Periksa jalur href <link rel="icon"> Anda. Jalur absolut (/favicon.ico) berfungsi di setiap halaman; jalur relatif (favicon.ico) terputus pada rute bersarang seperti /blog/post.
Jika Anda menggunakan CDN, bersihkan jalur favicon setelah penerapan. Beberapa CDN menyimpan respons 404 untuk /favicon.ico ketika file hilang pada permintaan pertama.
Beberapa tag <link rel="icon"> dapat membingungkan browser lama. Tempatkan favicon.ico terlebih dahulu, lalu varian PNG/SVG dengan atribut tipe dan ukuran eksplisit.
WordPress, Shopify, dan host statis masing-masing memasukkan tagnya sendiri. Lihat sumber halaman dan cari rel="icon" — tag duplikat atau yang diganti sering menjadi penyebab.
Peringatan konten campuran HTTPS memblokir URL favicon HTTP di halaman aman. Sajikan setiap ikon melalui HTTPS.
Untuk pengembangan lokal, beberapa browser menolak memperbarui favicon sampai Anda menghapus data situs untuk localhost.
Cara kerjanya
- 1
Verifikasi URL file
Buka /favicon.ico di tab baru — harapkan 200, bukan 404.
- 2
Periksa tag <head>
Lihat sumber; konfirmasikan satu tautan favicon.ico kanonik dan tidak ada kesalahan ketik.
- 3
Hancurkan cache sekali
Tambahkan ?v=2 ke href, terapkan, segarkan, lalu hapus kueri jika diinginkan.
Coba sekarang
Uji favicon langsung Anda
Penguji favicon langsungFAQ
Mengapa favicon saya berfungsi secara lokal tetapi tidak dalam produksi?+
Pembuatan produksi sering kali menghasilkan output ke subdirektori atau awalan CDN. Verifikasikan jalur yang diterapkan cocok dengan <link> href Anda dan bahwa file tersebut disertakan dalam output build.
Berapa lama hingga Google memperbarui favicon saya di hasil pencarian?+
Google dapat memerlukan waktu berhari-hari hingga berminggu-minggu setelah perayapan ulang. Pastikan ikon berukuran minimal 48×48, berbentuk persegi, dan dapat diakses publik dengan URL yang stabil.
Apakah adblock atau mode privasi menyembunyikan favicon?+
Jarang untuk ikon pihak pertama. Proxy favicon pihak ketiga dapat diblokir; ikon yang dihosting sendiri di domain Anda tidak terpengaruh.
Haruskah saya menghapus cache favicon browser?+
Hapus data situs untuk domain Anda di pengaturan browser, atau uji di jendela pribadi dengan cache dinonaktifkan.