3 Cara Mudah Menambahkan Favicon WordPress di 2022 (Panduan Ramah Pemula)

Siap mempelajari semua yang ingin Anda ketahui tentang favicon WordPress Anda?

Jika Anda tidak familiar, favicon situs Anda adalah ikon kecil yang muncul di tab browser web Anda. Misalnya, inilah tampilan favicon kami di HeroThemes:

Anda juga akan melihat beberapa orang menyebut favicons sebagai "ikon situs". Jangan khawatir - mereka adalah hal yang sama.

Dalam posting ini, Anda akan belajar:

• Mengapa Anda harus peduli dengan sesuatu yang kecil seperti favicon WordPress Anda?
• Cara membuat favicon untuk situs WordPress Anda (dan ukuran serta format apa yang digunakan)
• Cara menambahkan favicon ke WordPress menggunakan tiga metode berbeda

Mengapa Anda Harus Peduli Tentang Favicon WordPress Anda

Saya tahu saya tahu. Gambar kecil yang hanya muncul di tab browser mungkin tidak akan membuat atau menghancurkan bisnis Anda. Tetapi ada dua alasan mengapa Anda harus meluangkan waktu untuk membuat favicon untuk WordPress.

Pertama, menggunakan favicon membantu branding dan membuat situs Anda menonjol di browser pengunjung Anda. Misalnya, tab mana yang menarik perhatian Anda pada tangkapan layar di bawah?

Ini HeroThemes dan Twitter, kan?

Ini penting karena orang suka membuka banyak tab ( tidak – Anda bukan satu-satunya yang menimbun tab! ). Bahkan di tahun 2009, orang-orang rata-rata memiliki 3+ tab, dengan lebih banyak di antara anak muda. Dan sementara saya tidak dapat menemukan data yang lebih baru, saya berani bertaruh bahwa rata-rata telah naik, bukan turun!

Selain memberi merek situs Anda di browser dan membuatnya menonjol, favicon Anda juga membantu pengguna seluler. Jika pengguna pernah menyimpan situs web Anda ke layar beranda mereka, favicon Anda akan muncul sebagai ikon di banyak perangkat .

Ketika Anda mempertimbangkan betapa mudahnya menambahkan favicon WordPress, manfaat itu pasti layak untuk Anda luangkan beberapa menit dari hari Anda.

Cara Membuat Gambar Favicon Dengan Ukuran Dan Format Yang Tepat

Sebelum Anda dapat mengikuti petunjuk langkah demi langkah di bagian selanjutnya tentang cara menambahkan favicon ke WordPress, Anda harus… benar-benar memiliki gambar yang ingin Anda gunakan untuk favicon Anda!

Dan itu berarti Anda perlu mengetahui dimensi dan format gambar yang tepat untuk favicon Anda.

Dengan berbagai perangkat, ini menjadi lebih rumit dari sebelumnya. Tetapi untuk mengatasi kerumitan itu, ada juga beberapa alat yang akan mengambil satu favicon starter dan secara otomatis memformatnya untuk semua perangkat yang berbeda.

Jadi untuk membuat favicon Anda, inilah yang Anda butuhkan:

• Sebuah gambar persegi. Ukuran favicon WordPress yang optimal adalah 512x512 px, meskipun sesuatu yang lebih kecil seperti 260x260 px masih dapat diterima. Semua metode yang akan saya tunjukkan akan mengubah ukurannya sesuai kebutuhan .
• Gambar png , yang merupakan taruhan terbaik Anda untuk web modern.

Untuk benar-benar membuat gambar Anda, Anda dapat menggunakan alat seperti Adobe Photoshop atau GIMP. Atau, Anda juga dapat menggunakan sesuatu seperti Favicon.io untuk menghasilkan gambar favicon dari teks atau emoji.

Jika Anda memiliki logo beresolusi tinggi, hal termudah untuk dilakukan adalah mengambil versi persegi dari logo Anda ( itulah yang kami gunakan di HeroThemes ).

Cara Menambahkan Favicon Ke WordPress (3 Metode)

Setelah Anda memiliki file gambar, Anda siap untuk menambahkan favicon itu ke situs WordPress Anda.

Di bawah ini, saya akan menunjukkan kepada Anda tiga cara berbeda untuk menambahkan favicon ke WordPress. Setiap metode sedikit berbeda , meskipun.

Untuk membantu Anda memilih salah satu yang tepat untuk situs Anda, berikut ini ikhtisar singkatnya:

• Tambahkan favicon dengan fungsionalitas inti WordPress – ini sangat sederhana dan memungkinkan Anda menambahkan favicon melalui Penyesuai WordPress. Satu-satunya downside adalah bahwa itu tidak akan menambahkan format favicon untuk semua perangkat. Namun, untuk sebagian besar situs, ini tidak masalah .
• Plugin RealFaviconGenerator WordPress – ini membuatnya sangat mudah untuk menambahkan favicon untuk semua perangkat . Satu-satunya kelemahan potensial adalah Anda harus tetap mengaktifkan plugin, yang mungkin tidak disukai beberapa orang.
• Metode manual RealFaviconGenerator – alih-alih menggunakan plugin, Anda dapat menggunakan situs web RealFaviconGenerator dan menambahkan kode secara manual. Metode ini menghilangkan kebutuhan untuk menjaga plugin tetap aktif, tetapi menjadi sedikit lebih rumit karena Anda harus menambahkan cuplikan kode ke header tema Anda.

Jika Anda seorang pemula, saya sarankan untuk tetap menggunakan salah satu dari dua metode pertama. Tetapi pengguna tingkat lanjut mungkin lebih suka metode ketiga.

Cara Menambahkan Favicon Ke WordPress Dengan Fungsi Inti

Yang ini sangat sederhana karena menggunakan fitur inti WordPress.

Untuk memulai, buka Penampilan → Sesuaikan di dasbor WordPress Anda untuk mengakses Penyesuai WordPress:

Setelah Anda berada di Penyesuai WordPress, klik opsi Identitas Situs :

Kemudian, temukan bagian Ikon Situs dan klik Pilih gambar untuk mengunggah gambar favicon Anda:

Itu akan membuka Perpustakaan Media WordPress biasa tempat Anda dapat mengunggah gambar seperti biasa.

Setelah Anda mengunggah gambar Anda, klik tombol Pilih :

Dari sana, WordPress akan memberi Anda opsi untuk memotong gambar favicon Anda, serta pratinjau langsung gambar Anda sebagai browser dan aplikasi.

Sesuaikan dengan cropping yang tepat lalu klik Crop Image :

Dan Anda sudah selesai! Pastikan untuk mengeklik opsi Terbitkan di bagian atas Penyesuai WordPress dan favicon Anda akan aktif.

Cara Menggunakan Plugin Favicon WordPress (Mencakup Lebih Banyak Perangkat)

Sekarang, saya akan menunjukkan cara menggunakan plugin favicon WordPress untuk mencapai efek yang sama.

Sekali lagi – perbedaan antara metode ini dan yang sebelumnya adalah plugin akan menambahkan favicon yang dioptimalkan untuk lebih banyak perangkat. Ini juga memberi Anda antarmuka yang memungkinkan Anda menyesuaikan tampilan favicon Anda untuk perangkat yang berbeda.

Anda dapat membuat favicon khusus untuk:

• iOS
• Android
• Windows Phone
• dll.

Anda tidak perlu ini – ini lebih tentang menutupi kasus tepi.

Untuk mengikuti metode ini, Anda harus menginstal plugin Favicon by RealFaviconGenerator gratis.

Setelah Anda mengaktifkan plugin, buka Appearance → Favicon . Gunakan tombol Select from the Media Library untuk mengunggah atau memilih favicon Anda dari WordPress Media Library.

Kemudian, klik Hasilkan favicon :

Setelah itu, plugin akan membawa Anda ke situs luar tempat Anda dapat mengubah tampilan favicon Anda untuk perangkat yang berbeda.

Setelah Anda selesai membuat tweak tersebut, gulir ke bawah dan klik tombol Generate your Favicons and HTML code :

Dan setelah Anda mengkliknya, Anda akan dibawa kembali ke dasbor WordPress Anda dan akan melihat pesan sukses, serta pratinjau favicon Anda di perangkat yang berbeda:

Itu dia! Anda sudah selesai. Pastikan plugin tetap aktif – jika tidak, favicon Anda akan hilang.

Cara Menambahkan Favicon Ke WordPress Secara Manual Menggunakan Alat RealFaviconGenerator Yang Sama

Sekali lagi, dengan metode plugin di atas, Anda harus membiarkan plugin tetap aktif untuk tetap menggunakan favicons Anda.

Jika itu masalah bagi Anda, Anda juga dapat menggunakan alat yang sama untuk melakukan semuanya secara manual.

Hasil akhirnya sama persis, Anda hanya perlu mengunggah gambar secara manual melalui FTP dan menambahkan beberapa kode ke bagian <head> situs Anda.

Saya akan memecah yang ini menjadi beberapa langkah karena ini sedikit lebih rumit…

Langkah 1: Hasilkan Paket Favicon Anda

Untuk memulai, kunjungi situs web RealFaviconGenerator dan klik Pilih gambar favicon Anda untuk mengunggah gambar favicon Anda:

Setelah Anda mengunggah gambar Anda, Anda akan melihat antarmuka yang sama dari plugin dan Anda akan dapat melalui dan menyesuaikan favicon Anda untuk perangkat yang berbeda.

Seperti dengan plugin, gulir ke bawah dan klik tombol Generate your Favicons and HTML code setelah Anda selesai membuat tweak:

Langkah 2: Unggah Paket Favicon Anda ke Situs Web Anda

Pada layar berikutnya, klik tombol untuk mengunduh paket Favicon Anda:

Kemudian, Anda perlu mengekstrak paket ini dan mengunggahnya ke folder root situs Anda menggunakan FTP ( jika Anda tidak yakin apa itu FTP, saya sarankan Anda tetap menggunakan metode plugin dari bagian sebelumnya ).

Pastikan Anda meletakkan semua file di folder root – ini tidak akan berfungsi sebaliknya.

Langkah 3: Tambahkan Cuplikan Kode Ke <head> Tema Anda

Untuk menyelesaikannya, Anda harus menambahkan cuplikan kode dari RealFaviconGenerator ke bagian <head> tema WordPress Anda:

Atau, Anda dapat menambahkan cuplikan kode berikut ke file functions.php di tema anak Anda ( Anda perlu menggunakan tema anak ):

/* Adds the favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE OF TEXT WITH FAVICON CODE
<?php
};

Metode mana pun baik-baik saja!

Setelah Anda melakukannya, Anda sudah selesai dan favicon Anda akan mulai bekerja.

Tambahkan Favicon WordPress Anda Sekarang

Hanya perlu beberapa menit untuk menambahkan favicon Anda dan memberi pengunjung Anda pengalaman yang lebih bermerek.

Dan inilah hal hebatnya:

Setelah Anda menambahkan favicon ke situs WordPress Anda, Anda tidak perlu memikirkannya lagi!

Apakah Anda memiliki pertanyaan lain tentang cara menambahkan favicon WordPress? Beri tahu kami di komentar dan kami akan membantu!