Cara Membuat Favicon WordPress

Favicon adalah ikon kotak kecil yang mewakili website Anda dan biasanya muncul di samping judul website di tab browser. Favicon juga muncul di riwayat browser, bookmark, dan lokasi di mana website Anda memerlukan identitas visual.

Detail sekecil ini sangat penting untuk identitas online Anda. Selain pengertiannya, kami juga akan membahas tentang cara membuat favicon di situs WordPress Anda.

Mengapa Penting Bagi Anda untuk Menambahkan Favicon ke Situs?

Pada dasarnya favicon adalah ID website Anda. Oleh karena itu, harus logo website Anda sendiri yang muncul di sana. Mengabaikan kehadiran favicon di website adalah sebuah kesalahan besar.

Berikut beberapa alasan mengapa favicon sangat penting untuk website Anda.

• Berfungsi Sebagai Pengenalan Merek (Brand Recognition)

Sebagian besar pengguna cenderung membuka banyak tab di browser mereka. Tanpa favicon, Anda hanya akan melihat halaman atau nama postingan di tab browser. Selain itu, jika Anda membuka lebih dari 20 tab, ukuran tab akan menjadi lebih pendek. Alhasil, Anda akan sulit dalam mengidentifikasi tab mana yang mewakili situs mana.

Dengan membuat favicon, pengunjung situs lebih mudah dalam mengenali setiap tab. Jika favicon Anda menonjol, tidak hanya visibilitas yang akan meningkat, tetapi juga user experience.

• Membangun Kepercayaan

Jika tidak ada favicon, Anda memberikan kesan pertama yang buruk kepada pengunjung situs. Website tanpa favicon terlihat tidak profesional. Jika Anda membuat website hanya untuk blogging harian, tidak memiliki favicon mungkin bukan masalah besar. Namun pemasangan favicon menjadi suatu keharusan ketika Anda menjalankan website perusahaan atau toko online. Pengunjung situs tidak akan lagi memercayai proses transaksi yang terjadi di website yang tidak terlihat profesional.

• Meningkatkan Pengalaman Mobile

Sekarang ini merupakan era mobile experience. Untuk memuaskan mobile user, tidak cukup dengan hanya memiliki website yang responsif, terutama ketika aplikasi website sedang naik daun.

Pengguna dapat dengan mudah membuat bookmark website di smartphone. Mereka bahkan tidak perlu lagi mengetik URL!

Pada situasi ini, memiliki favicon yang dibuat dengan baik akan memberikan Anda dua keuntungan dalam cara yang berbeda. Pertama, favicon akan digunakan sebagai ikon aplikasi dan yang kedua, orang yang menggunakan aplikasi website Anda akan mengingat ikon Anda. Karenanya, favicon sangan berkaitan dengan website Anda.

Cara Membuat Favicon WordPress

Umumnya, favicon adalah logo merek Anda. Untuk gambar, WordPress akan menyarankan Anda menggunakan dimensi kotak dengan ukuran 512px 512px.

Anda bisa menggunakan gambar berukuran lebih besar, tapi kemungkinan besar Anda akan diminta untuk memotongnya (crop) agar sesuai dengan ukuran favicon WordPress yang ditetapkan.

Untuk membuat gambar dengan ukuran tepat 512 pixels x 512 pixels, Anda dapat menggunakan berbagai software editing gambar, seperti Adobe Photoshop (berbayar) and Gimp (gratis) atau generator favicon online.

Meskipun Anda dapat memilih warna latar belakang untuk favicon WordPress, warna transparan lebih disukai. Anda dapat menggunakan format file .jpeg, .ico, .gif atau .png (pastikan Anda menggunakan format .png jika menggunakan latar belakang transparan).

Setelah gambar Anda siap, tambahkan ke situs WordPress menggunakan salah satu dari tiga cara ini.

1. Membuat Favicon WordPress dengan WordPress Customizer

Dimulai dari WordPress versi 4.3, Anda dapat dengan mudah menambahkan favicon WordPress melalui admin area. Berikut langkah-langkah untuk melakukannya:

1. Buka Admin Dashboard Anda

2. Arahkan mouse Anda ke Appearance -> Customize

3. Pilih Site Identity

4. Klik Select Image yang ada di bawah bagian Site Icon

5. Upload favicon yang sudah Anda siapkan

6. Klik Publish untuk menyimpan perubahan

Jika langkah-langkahnya dilakukan dengan benar, favicon akan muncul di samping judul website Anda. Untuk menambahkan favicon ke perangkat mobile, buka website Anda dari ponsel dan pilih Add to Homescreen.

Favicon akan muncul pada layar beranda.

2. Membuat Favicon WordPress dengan Plugin

Anda juga dapat menambahkan favicon ke WordPress dengan bantuan plugin bernama Favicon by RealFaviconGenerator. Selain mudah digunakan, plugin ini kaya akan fitur. Berikut langkah-langkah yang diperlukan untuk menambahkan favico dengan plugin.

1. Buka Admin Dashboard

2. Pilih Plugin -> Add New

3. Ketik Favicon by RealFaviconGenerator pada kotak pencarian

4. Install dan aktifkan plugin

5. Setelah aktivasi, buka Appearance -> Favicon

6. Upload gambar yang ingin Anda tetapkan sebagai favicon. Anda tidak perlu mengedit gambar menggunakan software editing. Plugin akan melakukannya untuk Anda. Pastikan gambar setidaknya berukuran 70 x 70 px. Bahkan lebih baik jika di atas 260 x 260 px.

7.  Setelah upload gambar, klik opsi Generate Favicon

8. Setelah mengklik opsi tersebut, Anda akan diarahkan ke situs RealFaviconGenerator.

9. Di website RealFaviconGenerator, cari dan klik opsi Generate your Favicon and HTML code.

10. Setelah itu, Anda akan diarahkan kembali ke website Anda. Anda akan mendapatkan pemberitahuan bahwa pengaturan favicon berhasil.

11.  Periksa tampilan favicon pada browser dan perangkat mobile.

3. Membuat Favicon WordPress Secara Manual

Kami menyarankan Anda untuk mengetes cara ini pada komputer sebelum dionlinekan.

1. Akses file tema melalui FTP client atau File manager

2. Cari folder /wp-content/themes/your-theme

3. Upload favicon ke folder tema. Disarankan untuk menguploadnya ke subfolder seperti Assets

4. Ingat path file ini

5. Cari file bernama function.php dan tambahkan kode berikut ini

function add_favicon() {
  echo '<link rel="shortcut icon" type="image/png" href="'.get_template_directory_uri().'/assets/favicon.png" />';
}
 
add_action('wp_head', 'add_favicon');

6. Baris setelah href=”’.get_template_directory_uri() adalah path ke favicon Anda. Pastikan Anda juga memiliki nama file yang tepat. Jika Anda menggunakan format file .ico, maka hasilnya akan seperti ini:

function add_favicon() {
  echo '<link rel="shortcut icon" type="image/png" href="'.get_template_directory_uri().'/assets/favicon.ico" />';
}
 
add_action('wp_head', 'add_favicon');

Kesimpulan

Memilki favicon di website adalah suatu keharusan! Apalagi cara membuat favicon dan mengaplikasikannya ke WordPress sangatlah mudah.

Favicon mewakili identitas website Anda. Meskipun hanya memiliki ruang yang sedikit di website, detail kecil ini berperan penting dalam meningkatkan pengenalan merek dan user experience di situs Anda.