Gambar & Desain
Penyebab Favicon Tidak Muncul di Browser: Jalur File, Tag HTML & Pembersihan Cache
Buat paket favicon lengkap untuk seluruh perangkat: Hasilkan berkas
Buka Pembuat Favicon
favicon.ico multi-resolusi, ikon sentuh Apple iOS, dan ikon PWA Android langsung di peramban Anda.
Daftar Isi
1. Diagnosis Langsung: 5 Alasan Mengapa Favicon Anda Hilang
Sudah menambahkan berkas favicon tetapi tab peramban tetap menampilkan ikon bola dunia abu-abu default? Kegagalan menampilkan ikon situs web umumnya bermuara pada lima masalah teknis berikut:
- Penyimpanan Cache Peramban yang Sangat Agresif: Mesin peramban (terutama Google Chrome) menyimpan cache favicon dalam basis data lokal SQLite terpisah yang tidak terhapus hanya dengan menekan
Ctrl+F5biasa. - Resolusi Jalur Berkas Relatif (Relative Path Failure): Menggunakan jalur
href="favicon.ico"yang gagal ketika pengguna membuka sub-halaman (seperti/blog/artikel/). - Ketiadaan Berkas Root
/favicon.ico: Banyak bot penjelajah, aplikasi pembaca RSS, dan peramban desktop secara otomatis memintahttps://domain.com/favicon.icoterlepas dari tag HTML yang Anda tulis. - Format ICO Tidak Valid: Mengubah ekstensi berkas PNG menjadi
.icohanya dengan mengganti nama berkas (rename) tanpa konversi struktur biner internal yang sah. - MIME-Type Server yang Salah: Server mengirimkan berkas dengan header
Content-Type: text/plainalih-alihimage/x-icon.
2. Tiga Standar Ikon Web yang Wajib Disiapkan
| Tipe Ikon | Dimensi Rekomendasi | Nama Berkas Standar | Perangkat Sasaran |
|---|---|---|---|
| Multi-Resolution ICO | 16×16, 32×32, 48×48 px | favicon.ico |
Tab peramban desktop, bilah bookmark, riwayat penjelajahan |
| Apple Touch Icon | 180×180 px (PNG) | apple-touch-icon.png |
Layar beranda iPhone, iPad, dan bookmark Safari iOS |
| Manifest PWA Icons | 192×192 & 512×512 px (PNG) | icon-192.png, icon-512.png |
Layar beranda ponsel Android, Web App Manifest (PWA) |
3. Kode HTML Siap Produksi & Trik Cache-Busting
Sisipkan potongan kode berikut di dalam elemen <head> dokumen HTML Anda:
<!-- Favicon Klasik untuk Seluruh Browser -->
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<!-- Ikon Modern Format SVG (Skalabilitas Sempurna & Dark Mode) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<!-- Ikon Layar Beranda Apple iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest untuk Android PWA -->
<link rel="manifest" href="/site.webmanifest">Tips Memaksa Pembaruan Cache: Jika Anda memperbarui desain logo, tambahkan parameter query versi di belakang tautan ikon (contoh: /favicon.ico?v=2). Parameter ini memaksa peramban mengunduh berkas baru tanpa menunggu kedaluwarsa cache lokal pengguna.
Alat Terkait di GoToolstack
- Pembuat Paket Favicon: Unggah satu logo dan hasilkan seluruh berkas ICO dan PNG dalam satu paket ZIP.
- Kompres Gambar Online: Optimalkan ukuran gambar PNG sebelum diubah menjadi ikon.
- Ubah Ukuran Gambar: Sesuaikan dimensi gambar menjadi bujur sangkar 512×512 piksel.