Kamu baru saja ganti favicon website — ikon kecil yang muncul di tab browser. File sudah diupload, cache Cloudflare sudah di-purge, tapi di browser masih muncul ikon lama. Frustrasi? Tenang, ini bukan bug servermu. Masalahnya ada di favicon cache browser yang cara kerjanya berbeda dengan cache halaman biasa. Browser menyimpan favicon secara terpisah, lebih agresif, dan tidak ikut terhapus saat kamu clear cache biasa. Artikel ini menjelaskan kenapa itu terjadi dan cara mengatasinya di Chrome dan Safari — tanpa hapus history browsing kamu.

Purge Cloudflare saja tidak cukup. Cache favicon disimpan di browser lokal kamu, bukan di server atau CDN. Jadi meskipun servermu sudah update, browser tetap pakai versi lama sampai cache lokalnya dibersihkan.

Kenapa Favicon Tidak Mau Berubah?

Browser memperlakukan favicon berbeda dari aset halaman lainnya. Saat kamu buka sebuah website, browser menyimpan favicon ke dalam database cache khusus — terpisah dari cache HTML, CSS, dan gambar biasa. Cache ini dirancang untuk persisten: tujuannya supaya ikon tab tidak perlu di-download ulang setiap kamu buka tab baru. Efeknya, meskipun file favicon di server sudah diganti dan cache CDN sudah di-purge, browser tetap menampilkan versi lama dari cache lokalnya. Ada tiga penyebab utama:

Cache favicon browser terpisah

Chrome, Safari, dan Firefox masing-masing punya database cache favicon tersendiri yang tidak ikut dihapus saat kamu clear cache biasa atau bahkan hard reload.

Tidak ada versioning di URL favicon

Kalau tag favicon di HTML tidak pakai query string versi (seperti ?v=2), browser tidak tahu ada perubahan dan terus pakai file yang sudah di-cache.

Inline SVG favicon hardcoded

Beberapa developer menggunakan favicon inline SVG langsung di HTML (bukan file eksternal). Kalau HTML-nya belum diupdate, favicon lama akan terus ditampilkan meski file .ico dan .png sudah diganti.

Solusi Terbaik: Version Query String di HTML

Sebelum masuk ke cara hapus cache browser, pastikan kamu sudah menerapkan versioning di tag favicon. Ini adalah fix permanen yang mencegah masalah ini terulang di masa depan. Caranya tambahkan ?v=2 (atau angka apapun) di akhir URL favicon:

HTML — Tag favicon dengan versioning
<link rel="icon" type="image/x-icon" href="/favicon.ico?v=2">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png?v=2">
<link rel="apple-touch-icon" href="/favicon.png?v=2">
Setiap kali ganti favicon, cukup naikkan angka versinya: ?v=3, ?v=4, dst.
Cek juga inline SVG favicon! Kalau di HTML ada tag seperti <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,...">, tag ini mengoverride file favicon eksternal kamu. Hapus atau ganti dengan tag yang mengarah ke file .png atau .ico.

Cara Hapus Favicon Cache di Google Chrome

Chrome menyimpan favicon cache sebagai bagian dari "Cached images and files". Cara paling aman tanpa hapus history:

STEP 1
Buka Clear Browsing Data — Tekan Cmd + Shift + Delete (Mac) atau Ctrl + Shift + Delete (Windows). Pastikan pilih tab Basic.
STEP 2
Pilih "Cached images and files" saja — Jangan centang Browsing history, Cookies, atau data lainnya. Centang hanya Cached images and files. Pilih time range "All time".
STEP 3
Clear data & tutup semua tab — Klik Clear data. Setelah selesai, tutup semua tab yang membuka website tersebut.
STEP 4
Test di Incognito — Buka tab Incognito (Cmd+Shift+N) dan akses websitemu. Incognito selalu pakai favicon fresh karena tidak ada cache lokal.

Cara Hapus Favicon Cache di Safari (Tanpa Hapus History)

Safari adalah browser paling "bandel" soal favicon cache. Berbeda dari Chrome, Safari menyimpan favicon cache di lokasi sistem yang dilindungi macOS, sehingga tidak bisa dihapus lewat UI Settings biasa. Solusinya via Terminal — tapi aman, karena hanya menghapus folder cache favicon, bukan history atau data login kamu.

STEP 1
Quit Safari sepenuhnya — Tekan Cmd + Q untuk menutup Safari sepenuhnya — bukan sekadar menutup jendela. Ini penting agar file cache tidak sedang dipakai.
STEP 2
Buka Terminal — Buka Terminal via Spotlight (Cmd + Space → ketik "Terminal") atau dari Applications → Utilities → Terminal.
STEP 3
Jalankan perintah hapus cache — Copy-paste perintah berikut dan tekan Enter. Perintah ini hanya menghapus folder cache fsCachedData milik Safari — aman untuk history, password, dan cookies kamu.
STEP 4
Buka Safari & test — Buka kembali Safari dan akses websitemu. Favicon baru seharusnya sudah muncul.
TERMINAL — macOS Safari favicon cache
rm -rf ~/Library/Caches/com.apple.Safari/fsCachedData
Tidak perlu sudo. Jalankan saat Safari sudah Quit (Cmd+Q) sepenuhnya.
Kenapa tidak pakai sudo? Folder fsCachedData ada di home directory kamu sendiri (~/Library), bukan di folder sistem. Justru kalau pakai sudo rm -rf ~/Library/Safari/Favicon Cache, akan muncul "Operation not permitted" karena Safari dilindungi SIP (System Integrity Protection). Path yang benar adalah ~/Library/Caches/com.apple.Safari/fsCachedData.

Perbandingan Cara Clear Favicon Cache per Browser

Browser Cara Clear Cache Hapus History? Tingkat Kesulitan
Chrome (Mac/Win) Cmd+Shift+Del → Cached images only ❌ Tidak ✅ Mudah
Safari (Mac) Terminal: rm -rf ~/Library/Caches/com.apple.Safari/fsCachedData ❌ Tidak ⚠️ Butuh Terminal
Firefox (Mac/Win) Ctrl+Shift+Del → Cache only ❌ Tidak ✅ Mudah
Edge (Mac/Win) Ctrl+Shift+Del → Cached images only ❌ Tidak ✅ Mudah

Studi Kasus Nyata

Studi Kasus: Kasus: Favicon Baru Tidak Muncul Meski Cloudflare Sudah Di-purge
Sebuah website Indonesia mengganti favicon dari ikon owl (latar hijau) ke logo baru (huruf IP, latar putih). File favicon.png dan favicon.ico di server sudah diganti, Cloudflare sudah di-purge — tapi di Chrome masih muncul favicon lama, dan Safari malah menampilkan favicon inline SVG hardcoded yang berbeda sama sekali. Investigasi menemukan dua masalah: (1) dashboard/index.html masih pakai tag favicon inline SVG dengan warna hardcoded, bukan merujuk ke file eksternal; (2) tidak ada versioning ?v= di tag favicon index.php. Solusi: ganti tag inline SVG ke file eksternal + tambah ?v=2, lalu hapus favicon cache Safari via Terminal. Hasilnya: favicon baru muncul konsisten di semua browser.
Kalau websitemu menggunakan Cloudflare, pastikan kamu juga cek DNS Lookup untuk verifikasi bahwa perubahan sudah propagasi. Dan gunakan My Connection Info untuk melihat detail browser dan koneksimu saat ini.

FAQ — Pertanyaan yang Sering Ditanyakan

Browser menyimpan favicon di cache terpisah yang tidak otomatis diperbarui meski file server sudah diubah. Solusinya: tambahkan query string versi di tag favicon di HTML (contoh: <code>href="/favicon.png?v=2"</code>) dan hapus favicon cache browser secara manual.
Tidak cukup. Purge Cloudflare hanya membersihkan cache di server/CDN, bukan di browser pengunjung. Cache favicon tersimpan lokal di device masing-masing pengguna dan harus dibersihkan secara terpisah.
Quit Safari dulu (Cmd+Q), lalu buka Terminal dan jalankan: <code>rm -rf ~/Library/Caches/com.apple.Safari/fsCachedData</code>. Perintah ini hanya menghapus folder cache favicon, bukan history, password, atau cookies.
Inline SVG favicon adalah favicon yang dibuat langsung di tag HTML menggunakan data URI, bukan file eksternal. Contohnya: <code>&lt;link rel="icon" type="image/svg+xml" href="data:image/svg+xml,..."&gt;</code>. Ini mengoverride file favicon eksternal, jadi meski file <code>.ico</code> atau <code>.png</code> sudah diganti, yang tampil tetap SVG hardcoded di HTML sampai tag tersebut dihapus.
Tidak. Query string versi di favicon tidak mempengaruhi SEO sama sekali. Favicon bukan elemen yang diindeks oleh Google. Teknik ini murni untuk cache busting — memaksa browser mengunduh ulang aset ketika ada perubahan.
Karena macOS SIP (System Integrity Protection) melindungi aplikasi Safari dari modifikasi langsung, bahkan oleh root. Path yang benar untuk favicon cache Safari adalah <code>~/Library/Caches/com.apple.Safari/fsCachedData</code> (bukan <code>~/Library/Safari/Favicon Cache</code>), dan tidak perlu sudo karena ada di home directory kamu sendiri.

Kesimpulan

Favicon yang "bandel" tidak mau berubah adalah masalah cache browser, bukan masalah server. Solusi paling ampuh: tambahkan ?v=2 di tag favicon di HTML kamu, lalu hapus favicon cache browser secara spesifik — bukan clear all history. Di Chrome cukup Cmd+Shift+Delete → cached images, di Safari gunakan perintah Terminal rm -rf ~/Library/Caches/com.apple.Safari/fsCachedData tanpa harus hapus history. Kalau kamu punya website sendiri dan sering update aset visual, pelajari juga cara kerja DNS dan cek koneksi kamu via My Connection Info.

COBA SEKARANG
Cek DNS & Cache Website Kamu
→ Cek DNS & Cache Website Kamu