Selasa, 20 Februari 2024

Cara Membuat Sekaligus Memasang Favicon di WordPress Tanpa Plugin

Info Menarik – Favicon adalah gambar kecil atau ikon yang berfungsi untuk mempresentasikan blog atau website. Biasanya ikon website ini akan tampil di samping judul website pada tab browser yang kita gunakan. Tidak hanya itu ikon sebuah website akan tampil juga di bookmark, histori browser, serta tempat lain yang memiliki fitur untuk menampilkan identitas website. Kemudian pada kesempatan ini saya akan share cara memasang favicon di WordPress.

Jika masih belum jelas, silakan lihat contoh favicon website Info Menarik yang ada pada gambar berikut ini:

Cara Membuat Memasang Favicon di WordPress 1

Jika kita lihat ukuran favicon ini memang kecil, namun meskipun begitu memasang favicon di website itu sangat penting. Favicon berfungsi untuk menujukkan identitas website Kamu agar terlihat lebih kredibel.

Favicon dapat berfungsi untuk memperkenalkan website Kamu kepada pengunjung. Ketika website memiliki ikon maka pengunjung akan lebih mudah mengenali website Kamu. Terlebih lagi jika ikon tersebut cukup unik maka visibilitas website Kamu akan menjadi lebih baik. Di mata pengunjung jika website tanpa favicon akan terlihat kurang profesional.

Cara Membuat Favicon di WordPress

Untuk membuat favicon di WordPress itu sangatlah mudah. Namun sebelum tahu bagaimana cara memasangnya, tentu saja Kamu harus sudah memiliki gambar yang akan Kamu jadikan ikon website.

Saat ini banyak program yang bisa kita jadikan untuk membuat favicon, diantaranya adalah Kamu bisa menggunakan program Photoshop atau CorelDRAW. Bahkan saat ini Kamu bisa membuat ikon website secara online.

Baca Juga: Cara Membuat Gambar Format ICO Menggunakan Program Adobe Photoshop

Perlu kita pahami bahwa ukuran favicon yang direkomendasikan WordPress adalah maksimal 512 pixel x 512 pixel. Artinya ukuran favicon ini harus kita buat dengan ukuran persegi. Ketika kita telah membuat favicon dengan ukuran di atas maksimal maka WordPress akan memotong (crop) secara otomatis.

Sedangkan file format yang bisa kita gunakan untuk ikon website adalah format JPEG, JPG, PNG, GIF, dan ICO. Jika Kamu ingin menggunakan ikon transfaran atau tidak terlihat backgroundnya, silakan gunakan file format PNG. Kemudian jika ingin menggunakan ikon animasi, gunakan format GIF.

Baca Juga: Cara Membuat Gambar Animasi Format GIF di Photoshop Lengkap Contoh

Cara Memasang Favicon di WordPress

Jika Kamu saat ini sudah memiliki gambar untuk ikon website, langkah selanjutnya adalah memasangnya di website. Untuk memasang favicon di WordPress bisa kita lakukan dalam berbagai macam cara. Silakan Kamu pilih cara mana yang termudah.

1. Menggunakan WordPress Customizer

Cara pertama yang dapat kita lakukan adalah melalui halaman dashboard WordPress atau dari menu Tampilan kemudian Sesuaikan. Tentunya untuk memasang ikon menggunakan WordPress Customizer adalah Kamu harus sudah login di dashboard menggunakan username dan password wp-admin.

Setelah masuk ke halaman dashboard silakan klik menu Tampilan kemudian sub-menu Sesuaikan. Pada halaman tersebut selanjutnya Kamu klik Identitas Situs.

Silakan unggah gambar yang sudah Kamu siapkan tadi dan nanti secara otomatis website Kamu akan memiliki favicon. Jika ukuran gambar di luar ketentuan, maka otomatis WordPress akan melakukan crop pada gambar.

Cara Membuat Memasang Favicon di WordPress 2

2. Menggunakan Cara Otomatis

Saat ini web browser akan otomatis mendeteksi file atau gambar yang kita tempatkan di direktori website dengan nama favicon.ico. Hanya file atau gambar yang memiliki file format ICO saja yang dapat dideteksi otomatis oleh browser. Kemudian selain file format ICO, juga nama file harus favicon, sehingga jika kita gabungkan dengan file format menjadi: favicon.ico.

Untuk menggunakan cara ini Kamu harus sudah memiliki gambar format ICO. Jika gambar yang Kamu miliki bukan format ICO, misal JPG atau PNG silakan convert dulu menggunakan program pengolah gambar seperti Photoshop. Selain itu Kamu juga bisa menggunakan tool online seperti ConvertICO.com.

Pada halaman website, Kamu tinggal melakukan drop gambar ikon atau bisa juga dengan mengetikkan URL dari halaman ikon. Selanjutnya klik tombol Go dan format gambar akan berubah menjadi ICO.

Selanjutnya gambar format ICO tersebut Kamu unggah ke halaman direktori website. Biasanya halaman direktori ini berada di public_html.

3. Menggunakan Kode HTML

Selain kedua cara di atas, kemudian memasang favicon di WordPress itu bisa juga menggunakan kode HTML. Dengan cara ini Kamu tidak harus memikirkan convert gambar ke file format ICO. Karena cara ini bisa menggunakan gambar format JPEG, JPG, PNG, GIF, dan juga ICO.

Setelah gambar persegi untuk ikon siap kita gunakan, silakan upload gambar ke direktori website yang terdapat di public_html. Contoh saya menggunakan ikon format PNG dengan favicon seperti yang terlihat pada gambar berikut:

Selanjutnya Kamu pasang kode HTML berikut pada header.php tepatnya diantara <head></head>.

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
Pada type=”image/png”, silakan Kamu ubah atau sesuaikan dengan file format gambar. Kemudian pada favicon.png ubah dengan nama file yang Kamu unggah ke direktori website.

Jika setelah melakukan semua cara di atas namun belum melihat perubahan pada ikon website, silakan Kamu hapus cache browser kemudian muat ulang website dengan menekan tombol F5 pada keyboard.

Selamat mencoba dan semoga sukses …

About Info Menarik

Berbagi Info & Tips Trik Menarik tentang Android, EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

23 comments

  1. TLD yang beli di wordpress.com juga sama ya caranya Mas?

    • InfoMenarik

      Kalau domain yang migrasi menggunakan WordPress.com sama dengan blog WordPress yang masing gratisan mas.

  2. Iya nih, kadang saya sering gak jadikan .ico, soalnya .jpg pun bisa diupload jadi favicon.

    • InfoMenarik

      Betul, selain .jpg dan .ico, .gif dan .png juga bisa dijadikan favicon blog.

  3. Makasih banyak :)

  4. Terimakasih mas, artikel ini sungguh membantu saya.

    • InfoMenarik

      Sama-sama mas. Terimakasih atas kunjungannya.

  5. Wah sangat bermanfaat sekali buat saya pribadi, saya yakin artikel ini juga bermanfaat banyak terhadap pembaca lainnya seperti yang saya alami.
    Terimakasih bos atas infonya, sukses selalu ..!

    • InfoMenarik

      Ok bos sama-sama dan terimakasih sudah mau berkunjung … :)

  6. thaks much,blog ane jadi lebih cantik di bandingjan kemaren, ini komentar kok harus banyak kayya artikel saja

    • InfoMenarik

      Moderasi komentar dan pembatasan karakter komentar untuk menghindari komentar yang hanya numpang lewat sekedar mengucapkan “say hello” saja … :)

  7. Tahta Laksana

    Makasih mas, berhasil cara yang kedua di wp saya. matur nuhun.
    Sebelumnya saya pakai cara di blog sebelah ternyata malah blank warna putih doang website saya. Eh, pakai script ini berhasil.

    ok ! sudah panjang kali ya :D

  8. Yudiantara

    halo kawan, kok saya udah upload image nya and save tapi saya udah refresh favicon di wp saya kok masih default ya?
    saya pakai yang wp.com

    • InfoMenarik

      Padahal domain wp.com tidak seribet wp.org. Mungkin gambar yang mas upload tidak memenuhi syarat untuk favicon. Coba upload gambar lain dan refresh browser.

  9. Hm.. kayanya artikel ini perlu di update mas, soalnya di wordpress 4.3 keatas udah ada fasilitas ganti favicon sendiri di menu costumize

  10. bang klo ganti nama di samping favicon itu gmana ? soal nya pas buka blog saya masih [http:…] di tab menu nya di samping favicon nya. maaf terlalu nob :3

  11. saya kira harus pake plugin juga ternyata ada cara sederhana untuk memasang favicon. thanks informasinya nanti saya akan coba pasang dengan cara ini

  12. Kalo faviconnya masih belum berubah setelah diganti, kemungkinan besar karena pengaruh Cache Browser. Biasanya setelah saya hapus cache browser, dan cek lagi selalu berhasil.

  13. Terima kasih kakak…sukses berat

  14. Pak saya sudah mencoba berulang kali tapi tetap saja tidak muncul di hasil google pencarian

    • Coba clear cache dan history browser mas! Dan kalau memakai plugin cache atau menggunakan CDN, silakan clear cache juga!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.