Cara Menambahkan Favicon di WordPress: 5 Metode Biar Website Makin Profesional

Bayangkan seorang calon pembeli sedang membandingkan lima toko online sekaligus di browsernya. Semua tab terbuka berdampingan, judul halamannya terpotong, dan yang membedakan satu toko dari toko lain hanyalah ikon mungil di sisi kiri tab. Jika website Anda masih memakai ikon bawaan WordPress, atau bahkan belum punya ikon sama sekali, peluang untuk dikenali dan diklik kembali ikut mengecil. Kabar baiknya, memasang favicon di WordPress hanya butuh beberapa menit dan tidak memerlukan keahlian coding.

1. Apa Itu Favicon dan Mengapa Website Anda Membutuhkannya

Favicon adalah ikon kecil yang mewakili sebuah website. Anda bisa melihatnya di tab browser, di daftar bookmark, di riwayat penjelajahan, dan di pintasan layar utama ponsel saat seseorang menyimpan website Anda seperti aplikasi. Di WordPress, favicon dikenal dengan nama Site Icon. Begitu Anda mengunggah satu gambar, WordPress akan membuatkan sendiri berbagai ukuran turunannya untuk browser dan perangkat yang berbeda.

Meskipun kecil, favicon punya tiga fungsi penting. Pertama, pengenalan cepat: saat banyak tab terbuka dan judul halaman terpotong, pengunjung mengandalkan ikon untuk menemukan tab Anda. Kedua, kesan profesional: website dengan ikon sendiri terlihat lebih serius dan terurus. Ketiga, konsistensi branding: ikon yang selaras dengan logo dan warna usaha membuat website lebih mudah diingat di bookmark maupun layar ponsel.

Siapkan gambar yang tepat: WordPress meminta gambar kotak minimal 512 x 512 piksel dalam format PNG, agar tepinya tajam dan bisa transparan. Desainlah ikon untuk ukuran terkecil, yaitu 16 x 16 piksel di tab browser: satu huruf awal atau satu bentuk sederhana dengan kontras warna kuat jauh lebih mudah dikenali daripada logo lengkap yang berubah menjadi noda saat diperkecil. Uji juga di latar terang dan gelap, karena banyak browser memakai mode gelap. Dari satu unggahan itu, WordPress akan menurunkan sendiri ukuran lain yang dibutuhkan, seperti 32 x 32 piksel untuk tab, 180 x 180 piksel untuk perangkat Apple, dan 192 x 192 piksel untuk Android.

2. Menambahkan Favicon Lewat Site Icon di Customizer

Ini adalah cara paling direkomendasikan untuk kebanyakan pemilik website, karena tidak memerlukan plugin tambahan dan tidak menyentuh kode sama sekali. Jalurnya lewat menu Site Identity di Customizer, dan berlaku untuk tema klasik:

1. Masuk ke dasbor WordPress, lalu buka Appearance > Customize.
2. Klik Site Identity di panel sebelah kiri.
3. Pada bagian Site Icon, klik Select site icon (atau Change image jika sudah pernah memasang ikon).
4. Unggah gambar PNG kotak minimal 512 x 512 piksel, atau pilih dari Media Library jika gambarnya sudah pernah diunggah.
5. Jika muncul layar pemotongan gambar, atur areanya lalu klik Crop image. Jika gambar sudah pas, pilih Skip cropping.
6. Periksa pratinjau di panel kanan, lalu klik Publish di bagian atas panel untuk menyimpan.

Pada WordPress terbaru, pengaturan yang sama juga ada di Settings > General (baris Site Icon), sedangkan pengguna tema blok menemukannya di Appearance > Editor. Pilih satu jalur saja agar tidak terjadi pengaturan ganda.

3. Menambahkan Favicon Lewat Plugin

Plugin masuk akal dalam tiga situasi: pengaturan bawaan tidak muncul karena tema menyembunyikannya, Anda butuh ikon khusus per perangkat, atau Anda mengelola banyak website dan ingin prosesnya seragam. Salah satu yang paling sering dipakai adalah Favicon by RealFaviconGenerator, yang menghasilkan satu set ikon lengkap dari satu gambar sumber.

Langkahnya cukup sederhana:

1. Buka Plugins > Add New, cari nama pluginnya, lalu klik Install Now dan Activate.
2. Buka halaman pengaturan plugin tersebut dari menu dasbor.
3. Unggah gambar sumber berbentuk kotak dengan resolusi tinggi, idealnya 512 x 512 piksel atau lebih.
4. Periksa pratinjau ikon untuk tab browser, bookmark, dan layar ponsel.
5. Simpan pengaturan, lalu buka website Anda di tab baru untuk memeriksa hasilnya.

Alternatifnya, Anda bisa membuat favicon lewat generator online gratis seperti favicon.io. Namun, pasang satu plugin favicon saja: dua plugin sefungsi berisiko saling menimpa. Jika Site Icon bawaan sudah mencukupi, Anda tidak membutuhkan plugin sama sekali.

4. Menambahkan Favicon Lewat Tema dan Page Builder

Sejumlah tema populer menyediakan pengaturan identitasnya sendiri, misalnya di panel Theme Options atau Customize dengan label Site Icon atau Favicon. Jika memakai page builder seperti Elementor, pengaturannya biasanya ada di Site Settings > Site Identity. Jalur ini praktis bagi Anda yang sudah mengutak-atik tampilan lewat tema atau builder tersebut.

Yang wajib diperhatikan: jangan mengaktifkan dua sumber favicon sekaligus. Jika tema sudah memasang ikon sendiri, pengaturan itu bisa mengalahkan Site Icon bawaan WordPress, atau sebaliknya, sehingga ikon yang tampil berubah-ubah tergantung halaman. Tentukan satu sumber saja sebagai patokan dan kosongkan pengaturan favicon di tempat lain. Setelah menyimpan, bersihkan cache tema bila ada, agar perubahan langsung terlihat.

5. Favicon Tidak Muncul? Atasi Dulu Masalah Cachenya

Ini keluhan paling umum, dan biasanya favicon Anda sebenarnya sudah terpasang dengan benar — penyebabnya hampir selalu cache. Browser menyimpan favicon sangat agresif, sehingga ikon lama bisa bertahan berhari-hari setelah gambar diganti. Sebelum mengulang unggahan, jalankan pemeriksaan berikut:

• Muat ulang paksa: tekan Ctrl + Shift + R di Windows atau Cmd + Shift + R di Mac.
• Uji di jendela privat: buka website di mode incognito atau browser lain. Jika ikon muncul di sana, pengaturan Anda benar dan masalahnya memang cache.
• Hapus cache browser: bersihkan bagian Cached images and files saja, tidak perlu menghapus riwayat atau kata sandi.
• Bersihkan cache website: jika memakai plugin cache atau CDN seperti Cloudflare, lakukan purge cache setelah mengganti ikon.
• Buka langsung URL ikonnya: jika berkas ikon bisa dibuka langsung, berarti berkasnya tidak bermasalah. Periksa juga protokolnya: website HTTPS yang memuat ikon lewat HTTP bisa diblokir diam-diam oleh browser.
• Beri waktu untuk pengunjung lama: pengunjung lama mungkin masih melihat ikon lama sampai cache mereka kedaluwarsa. Ini normal.

Jika ikon tetap tidak muncul setelah semua langkah itu, periksa sumber halaman website Anda: seharusnya ada baris penanda ikon di dalam <head>. Jika baris itu tidak ada, kemungkinan ada tema atau plugin yang menghapusnya — periksa pengaturan tema atau nonaktifkan sementara plugin yang mencurigakan.

Contoh Nyata: Website Toko UMKM yang Baru Memasang Favicon

Ambil contoh toko batik rumahan di Yogyakarta yang baru membuat website katalog di WordPress. Awalnya tab websitenya hanya menampilkan ikon bawaan, sehingga pelanggan yang membuka banyak tab toko sekaligus sering salah klik. Pemiliknya lalu memakai satu huruf awal nama usahanya — huruf L putih di atas latar kotak warna terakota yang sama dengan kemasan produknya — bukan logo batik lengkap, karena motif batik akan hilang saat diperkecil. Gambar kotak 512 x 512 piksel itu diunggah lewat Appearance > Customize > Site Identity, lalu Publish diklik. Saat pertama dicek ikon belum berubah, tetapi di jendela privat ikon baru langsung terlihat: terbukti masalahnya hanya cache. Kini pelanggan bisa menemukan tab toko itu dalam sekejap.

Kesimpulan

Memasang favicon di WordPress jauh lebih mudah daripada yang dibayangkan banyak pemilik website. Mulailah dari jalur bawaan, yaitu Site Icon di Customizer (atau Settings > General pada WordPress terbaru): gratis, tanpa plugin, dan sudah menghasilkan semua ukuran yang dibutuhkan. Gunakan plugin hanya bila pengaturan bawaan tidak tersedia atau Anda butuh ikon khusus per perangkat, dan manfaatkan pengaturan tema atau page builder bila website Anda memang dibangun di sana — dengan catatan, pilih satu sumber saja. Ikon yang sederhana dan kontras selalu menang atas logo yang rumit, dan bila ikon baru belum tampil, jangan panik: bersihkan cache, uji di jendela privat, dan beri waktu. Dengan ikon yang tepat, website UMKM Anda terlihat lebih profesional dan mudah ditemukan kembali.