Ikon Kecil Dengan Dampak Besar

Favicon adalah ikon kecil yang ditampilkan di tab browser, daftar bookmark, riwayat browser, dan — sejak 2019 — di hasil penelusuran seluler Google. Gambar-gambar kecil ini memiliki bobot merek yang tidak proporsional. Penelitian menunjukkan bahwa pengguna membedakan tab yang terbuka terutama menggunakan pengenalan favicon, bukan teks tab. Favicon yang hilang atau umum membuat situs Anda lebih sulit ditemukan di antara banyak tab yang terbuka.

Ukuran dan Format Favicon

FormatUkuranDiperlukan Untuk
ICO16×16, 32×32Dukungan tab browser lama
PNG192×192Ikon layar beranda Android, PWA
PNG512×512Layar splash PWA, tampilan DPI tinggi
Ikon Sentuhan Apel180×180iOS "Tambahkan ke Layar Utama"
SVGDapat diskalakanPeramban modern — sangat jernih dalam ukuran apa pun

Koneksi Pencarian Google

Sejak 2019, Google menampilkan favicon situs web di samping URL dalam hasil penelusuran seluler. Favicon yang hilang menunjukkan ikon globe umum. Favicon yang berpiksel atau berkualitas rendah memberi sinyal kepada pengguna — dan berpotensi memberi sinyal kualitas kepada Google — bahwa suatu situs mungkin tidak dikelola dengan baik. Menjaga favicon Anda tetap segar dan terkini adalah pertimbangan SEO yang kecil namun nyata.

💡 Kiat Pro:Rancang favicon Anda agar berfungsi pada 16×16 piksel. Mulailah dengan desain vektor besar, lalu optimalkan secara khusus versi kecilnya — jangan hanya memperkecil skalanya. Detail yang terlihat bagus pada ukuran 256 piksel sering kali menjadi gumpalan berlumpur pada ukuran 16 piksel.

Cara Menambahkan Favicon ke Situs Web Anda

  1. Buat favicon Anda sebagai PNG 512×512 terlebih dahulu
  2. Hasilkan ICO (multi-ukuran: 16, 32, 48) menggunakan konverter
  3. Tempatfavicon.icodi direktori root situs Anda
  4. Tambahkan ke HTML Anda<kepala>: <link rel="icon" href="/favicon.ico">
  5. Tambahkan Ikon Apple Touch:<link rel="apple-touch-icon" href="/apple-touch-icon.png">
  6. Referensi ikon 192px dan 512px dimanifes.jsonuntuk dukungan PWA
Mengapa beberapa situs menampilkan favicon yang rusak?

Penyebab paling umum: jalur file yang salah dalam HTML, server mengembalikan 404 untuk favicon.ico, atau pembatasan CORS yang memblokir permintaan favicon lintas domain. Sebagian besar permintaan favicon cache browser dilakukan secara agresif — bersihkan cache browser Anda setelah melakukan perubahan favicon.

Siap mencobanya sendiri?

Pengambil Favicon Panduan Lainnya