Favicon untuk WordPress
WordPress menyebut favicon sebagai Ikon Situs dan telah mendukungnya secara asli sejak versi 4.3. Anda dapat mengunggah satu dari Customizer dalam waktu kurang dari satu menit, atau menggantinya secara terprogram di functions.php tema Anda untuk kontrol penuh. Gunakan favicon generator untuk membuat ikon siap produksi sebelum Anda mengunggah, dan ikuti WordPress favicon tutorial untuk panduan lebih detail.
WordPress secara asli menangani injeksi favicon melalui fitur Ikon Situs, yang diperkenalkan di WordPress 4.3. Saat Anda mengupload gambar di Customizer, WordPress otomatis memotongnya, menghasilkan varian yang lebih kecil, dan memasukkan tag `<link rel='icon'>` dan `<link rel='apple-touch-icon'>` yang benar di setiap halaman. Tidak diperlukan perubahan plugin atau kode untuk sebagian besar situs.
Untuk mengakses pengaturan Ikon Situs, masuk ke dasbor admin WordPress Anda dan navigasikan ke Penampilan > Sesuaikan. Di sidebar kiri, klik Identitas Situs. Anda akan melihat bidang unggah Ikon Situs di dekat bagian bawah panel. Klik Pilih Gambar, unggah ikon Anda, potong jika diminta, dan klik Publikasikan. Favicon Anda langsung ditayangkan saat halaman berikutnya dimuat.
WordPress memerlukan ukuran gambar minimal 512×512 piksel untuk Ikon Situs. Unggah kotak PNG dengan resolusi tersebut atau lebih besar — WordPress akan menghasilkan varian yang lebih kecil (16×16, 32×32, 180×180) secara otomatis dari sumbernya. Jangan pernah mengunggah gambar kecil dan mengharapkan WordPress untuk meningkatkannya; hasilnya akan menjadi ikon buram di tab browser.
PNG adalah format yang direkomendasikan untuk unggahan favicon WordPress. Platform ini juga mendukung JPEG dan GIF, tetapi JPEG tidak mendukung transparansi dan GIF memberikan kompresi yang buruk untuk logo fotografi. PNG dengan latar belakang transparan memastikan ikon Anda terlihat bersih terhadap tema browser apa pun, termasuk bilah tab mode gelap.
Jika tema Anda menggunakan editor situs Gutenberg (Pengeditan Situs Lengkap), jalur Ikon Situs mungkin sedikit berbeda. Lihat di bawah Appearance > Editor > Styles atau gunakan pengaturan blok logo situs. Beberapa tema blok juga menampilkan bidang favicon di panel Pengaturan Global. Fungsi WordPress yang mendasarinya sama — hanya jalur UI admin yang berubah.
Untuk kontrol tingkat lanjut — misalnya, menyajikan favicon yang berbeda pada subdirektori toko versus blog — Anda dapat mengganti URL Ikon Situs secara terprogram. Tambahkan ini ke functions.php tema Anda atau plugin khusus situs: `add_filter('get_site_icon_url', function($url, $size, $blog_id) { return 'https://example.com/custom-favicon.png'; }, 10, 3);`. Ini melewati Customizer sepenuhnya dan memungkinkan Anda menyajikan ikon apa pun dari URL mana pun.
Beberapa plugin pembuat halaman (Elementor, Divi, Beaver Builder) menambahkan pengaturan faviconnya sendiri yang dapat bertentangan dengan WordPress Customizer. Periksa panel pengaturan situs pembuat halaman Anda dan hapus semua penggantian favicon di sana, lalu atur ulang melalui WordPress Customizer asli. Memiliki dua tag favicon yang bersaing pada halaman yang sama dapat memberikan hasil yang tidak konsisten di seluruh browser.
Instalasi multisitus WordPress mengharuskan setiap subsitus memiliki Ikon Situs yang ditetapkan secara individual. Pengaturan admin jaringan tidak mengalir ke subsitus. Jika Anda ingin favicon dibagikan di seluruh jaringan, gunakan pendekatan filter terprogram dan kaitkan ke URL ikon situs di tingkat jaringan menggunakan plugin yang harus digunakan (mu-plugins).
Plugin caching seperti WP Rocket, W3 Total Cache, atau LiteSpeed Cache dapat menunda pembaruan favicon. Setelah mengubah Ikon Situs Anda, hapus semua lapisan cache: cache objek WordPress, cache halaman, cache CDN, dan cache browser Anda. Jika ikon lama tetap ada, tambahkan `?v=2` ke tautan favicon secara manual di HTML atau tunggu hingga cache TTL kedaluwarsa.
Untuk memeriksa apakah WordPress mengeluarkan tag favicon yang benar, klik kanan situs Anda di browser, pilih Lihat Sumber Halaman, dan cari `rel='icon'`. Anda akan melihat entri favicon.ico dan entri apple-touch-icon yang mengarah ke gambar yang Anda unggah. Jika salah satunya tidak ada, tema Anda mungkin menggantikan `wp_head()` — pastikan `<?php wp_head(); ?>` dipanggil di header.php tema Anda.
Plugin SEO WordPress pihak ketiga seperti Yoast SEO dan Rank Math menyertakan metadata sosial dan skemanya sendiri tetapi tidak mengganggu Ikon Situs. Namun, jika Anda memasang plugin khusus favicon bertahun-tahun yang lalu sebelum WordPress menambahkan dukungan asli, plugin tersebut sekarang mungkin mengalami konflik. Nonaktifkan semua plugin favicon lama sebelum menggunakan opsi bawaan Customizer.
Untuk situs yang dihosting WordPress.com (bukan WordPress.org yang dihosting sendiri), jalur favicon ada di Situs Saya > Pengaturan > Umum > Ikon Situs. Langkah-langkahnya hampir sama dengan alur Customizer yang dihosting sendiri, namun pengeditan tema dan plugin terbatas tergantung pada paket Anda. Unggah 512×512 PNG dan simpan — WordPress.com menangani semua pengubahan ukuran dan injeksi tag.
Setelah mengatur favicon Anda, verifikasi berfungsi dengan benar menggunakan favicon tester dengan memasukkan URL situs Anda. Ini mengonfirmasi bahwa ikon dapat diakses publik dan muncul di jalur yang diharapkan. Periksa juga best favicon size untuk memahami resolusi mana yang dihasilkan WordPress dan apakah Anda perlu menambahkannya secara manual untuk dukungan PWA.
Cara kerjanya
- 1
Hasilkan favicon 512×512
Gunakan [favicon generator](tool:favicon-generator) dengan logo Anda PNG atau SVG sebagai sumbernya. Unduh paket lengkap — Anda memerlukan minimal sumber PNG untuk pengunggah WordPress.
- 2
Buka WordPress Customizer
Di admin WordPress Anda, buka Penampilan > Sesuaikan > Identitas Situs. Gulir ke bagian Ikon Situs di bagian bawah.
- 3
Unggah dan potong ikon Anda
Klik Pilih Gambar, unggah 512×512 PNG Anda, dan konfirmasi pemotongan. WordPress akan menghasilkan varian 16, 32, dan 180 piksel dari sumber Anda secara otomatis.
- 4
Klik Publikasikan
WordPress memasukkan tag tautan favicon ke setiap halaman di situs Anda. Perubahan ini langsung berlaku pada pemuatan halaman berikutnya yang tidak di-cache.
- 5
Hapus cache Anda dan verifikasi
Hapus semua cache plugin caching (WP Rocket, LiteSpeed, dll.) dan CDN Anda. Buka situs di jendela browser pribadi dan konfirmasikan favicon muncul di tab. Gunakan [favicon tester](utility:favicon-tester) untuk pemeriksaan eksternal cepat.
Coba sekarang
Hasilkan favicon siap WordPress
Pembuat FaviconFAQ
Di mana pengaturan favicon di WordPress?+
Penampilan > Sesuaikan > Identitas Situs > Ikon Situs. Dalam tema Pengeditan Situs Lengkap, mungkin berada di bawah Appearance > Editor > Styles. Unggah 512×512 PNG dan klik Publikasikan — WordPress menghasilkan semua ukuran yang diperlukan secara otomatis.
Berapa ukuran favicon yang dibutuhkan WordPress?+
Minimal 512×512 piksel, persegi. WordPress menghasilkan varian 16×16, 32×32, dan 180×180 dari gambar sumber Anda. Mengunggah gambar yang lebih kecil menghasilkan favicon buram pada ukuran lebih besar.
Mengapa favicon WordPress saya tidak diperbarui setelah saya mengubahnya?+
Browser dan plugin caching melakukan cache favicon secara agresif. Hapus cache halaman WordPress Anda, cache CDN Anda, lalu buka situs di jendela browser pribadi/penyamaran. Jika ikon lama masih muncul, tambahkan ?v=2 ke URL favicon di header.php tema Anda untuk memaksa pengambilan baru.
Apakah saya memerlukan plugin untuk menambahkan favicon di WordPress?+
Tidak. Fitur Ikon Situs bawaan (Penampilan > Kustomisasi > Identitas Situs) menangani 99% kasus penggunaan tanpa plugin apa pun. Plugin favicon lama sebelum WordPress 4.3 sebenarnya dapat menimbulkan konflik — nonaktifkan plugin tersebut jika Anda sudah menginstalnya.
Bisakah saya menggunakan favicon berbeda di halaman berbeda?+
Ya, dengan PHP. Gunakan filter get_site_icon_url di functions.php untuk mengembalikan URL ikon yang berbeda berdasarkan tag kondisional seperti is_shop() atau is_category(). Customizer tidak dapat melakukan ini secara asli.
Apakah WordPress mendukung favicon SVG?+
Pengunggah Ikon Situs Customizer tidak menerima SVG karena pembatasan keamanan SVG di WordPress. Untuk menambahkan favicon SVG, enqueue secara manual menggunakan wp_head atau tambahkan tag tautan langsung ke header.php tema Anda di samping tag Ikon Situs standar.
Tema WordPress saya tidak menampilkan favicon yang saya atur — mengapa?+
Tema Anda mungkin tidak memanggil wp_head() di header.php, yang diperlukan agar WordPress dapat memasukkan tag faviconnya. Periksa apakah `<?php wp_head(); ?>` muncul di header.php tema Anda tepat sebelum tag penutup `</head>`. Tema yang lebih lama atau kodenya buruk terkadang menghilangkan kaitan ini.