Cara Membuat Favicon WordPress

Favicon adalah ikon kotak kecil yang merepresentasikan website Anda dan biasanya muncul di samping judul website di tab browser. Favicon juga muncul di histori browser, bookmark, dan lokasi lain yang menampilkan identitas visual website. Pada contoh di bawah ini, logo ‘H’ berwarna ungu adalah favicon Hostinger.

Meskipun ukurannya kecil, detail ini sangat penting untuk identitas online Anda. Dalam artikel ini, kami akan membahas pengertian dan cara membuat favicon di situs WordPress.

Mengapa Situs Anda Perlu Memiliki Favicon?

Pada dasarnya, favicon berperan sebagai identitas website. Jadi, ketika orang-orang mengunjungi situs Anda, logo inilah yang nantinya mereka lihat di bagian tab browser. Akan sangat disayangkan jika situs Anda tidak memiliki favicon, karena pengunjung mungkin menganggap situs Anda kurang kredibel.

Berikut beberapa alasan mengapa favicon sangat penting untuk website Anda:

• Berfungsi untuk Memperkenalkan Merek (Brand Recognition)
  Beberapa pengguna sering kali membuka banyak tab di browser mereka. Tanpa favicon, mereka hanya akan melihat halaman atau nama postingan Anda di tab browser. Selain itu, jika membuka lebih dari 20 tab, ukuran tab akan menjadi lebih pendek. Akibatnya, pengunjung akan kesulitan mengidentifikasi situs-situs yang mereka buka di tab tersebut.
  Dengan memberikan favicon, pengunjung situs pun akan lebih mudah mengenali setiap tab. Jika favicon Anda cukup unik, visibilitas dan user experience website Anda pun akan menjadi lebih baik.

• Membangun Kepercayaan
  Tanpa adanya favicon, kesan pertama yang Anda berikan kepada pengunjung situs mungkin akan kurang baik. Website yang tidak memiliki favicon terlihat tidak profesional. Jika website Anda hanya difungsikan untuk blogging harian, hal ini mungkin bukan masalah besar. Akan tetapi, untuk website perusahaan atau toko online, favicon memiliki peran yang sangat penting.
  Pengunjung pasti akan merasa ragu untuk melakukan transaksi di website yang terlihat tidak profesional.

• Meningkatkan Pengalaman Mobile
  Saat ini, hampir semua pengguna memanfaatkan smartphone mereka untuk mengunjungi website. Situs yang responsif saja belum cukup untuk meningkatkan mobile experience, terutama dengan semakin populernya aplikasi web di era teknologi seluler seperti sekarang ini.
  Pengguna bisa dengan mudah membuat bookmark website di smartphone mereka sehingga tidak perlu lagi mengetik URL.
  Nah, untuk situasi seperti ini, memiliki favicon yang didesain dengan baik bisa menguntungkan Anda dari berbagai sisi. Pertama, favicon bisa digunakan sebagai ikon aplikasi, dan yang kedua, pengguna akan mengingat ikon Anda. Jadi, mereka akan mengaitkan favicon ini dengan website Anda dalam ingatannya.
  

Cara Membuat Favicon WordPress

Umumnya, favicon merupakan logo merek Anda. Untuk gambar, ukuran favicon website yang direkomendasikan oleh WordPress adalah 512 piksel x 512 piksel dengan bentuk persegi.

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

Untuk membuat gambar dengan ukuran tepat 512 piksel x 512 piksel, ada banyak sekali software editing gambar yang bisa digunakan, seperti Adobe Photoshop (berbayar) dan Gimp (gratis), atau Anda juga bisa mencoba cara membuat favicon online menggunakan generator.

Kemudian, meskipun Anda bisa memilih warna latar belakang untuk favicon WordPress, warna transparan akan terlihat jauh lebih efektif. Anda bisa menggunakan format file .jpeg, .ico, .gif, atau .png (pastikan Anda menggunakan format .png jika menggunakan latar belakang transparan).

Jika gambar sudah siap, tambahkan ke situs WordPress Anda menggunakan salah satu cara di bawah ini. Poin-poin yang kami jelaskan di bawah ini juga bisa Anda gunakan sebagai cara mengganti icon blog atau website Anda.

1. Cara Membuat Favicon dengan WordPress Customizer

Jika sudah menggunakan WordPress versi 4.3 atau yang lebih baru, Anda bisa menambahkan favicon WordPress dengan mudah melalui area admin. Berikut langkah-langkah untuk melakukannya:

1. Buka Admin Dashboard Anda
2. Arahkan mouse ke Appearance -> Customize
3. Pilih Site Identity
4. Klik Select Image yang ada di bawah bagian Site Icon
5. Unggah favicon yang sudah Anda siapkan
6. Klik Publish untuk menyimpan perubahan

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

Favicon kini akan muncul di layar utama Anda.

2. Cara Membuat Favicon dengan Plugin

Anda juga bisa menambahkan favicon ke WordPress dengan bantuan plugin bernama Favicon by RealFaviconGenerator. Selain mudah digunakan, plugin ini memiliki fitur yang beragam. Berikut cara membuat favicon menggunakan plugin yang dimaksud:

1. Buka Admin Dashboard
2. Pilih Plugin -> Add New
3. Ketik Favicon by RealFaviconGenerator di kotak pencarian
4. Install dan aktifkan plugin
5. Setelah aktivasi selesai, buka Appearance -> Favicon
6. Unggah gambar yang ingin digunakan sebagai favicon. Anda tidak perlu mengeditnya karena plugin ini akan melakukannya untuk Anda. Pastikan gambar berukuran minimal 70 x 70 piksel. Lebih baik lagi, gunakan gambar berukuran lebih dari 260 x 260 piksel
7. Setelah gambar diunggah, klik Generate Favicon
8. Setelah itu, Anda akan diarahkan ke situs RealFaviconGenerator

9. Di website ini, cari dan klik opsi Generate your Favicon and HTML code
10. Anda kemudian akan diarahkan kembali ke website Anda. Jika berhasil, pemberitahuan yang mengatakan bahwa favicon Anda sudah siap akan muncul
11. Lihat tampilan favicon pada browser dan perangkat mobile.

3. Cara Membuat Favicon secara Manual

Sebelum mengonlinekan favicon dengan cara ini, sebaiknya lakukan tes terlebih dahulu menggunakan komputer.

1. Akses file tema melalui FTP client atau File Manager
2. Cari folder /wp-content/themes/your-theme
3. Unggah favicon Anda ke folder tema. Sebaiknya unggah favicon ke subfolder seperti Assets
4. Ingat pathfile ini
5. Cari file bernama function.php dan tambahkan kode berikut

   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 sudah memasukkan nama file yang tepat. Jika menggunakan format file .ico, 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

Nah, jadi, favicon adalah hal yang sangat penting dan wajib untuk website Anda agar terlihat lebih kredibel dan profesional. Terlebih lagi, ada banyak cara untuk membuat favicon dan semuanya bisa dilakukan dengan sangat mudah untuk situs WordPress Anda.

Dari segi fungsi, favicon berperan untuk merepresentasikan identitas website. Meskipun hanya ditampilkan dalam ukuran kecil pada website, detail ini mampu memperkenalkan merek Anda secara lebih luas serta meningkatkan user experience agar pengunjung tidak meragukan kredibilitas website Anda. Selamat mencoba!