Favicon merupakan logo merek. yang berukuran 512 piksel x 512 piksel dengan bentuk persegi.
Ada beberapa cara mengganti Favicon, adalah sebagai berikut :
1. Menggunakan WordPress Customizer
WordPress versi 4.3 atau yang lebih tinggi, bisa langsung menambahkan favicon melalui area admin. Berikut langkah-langkah untuk melakukannya:
- Buka Admin Dashboard
- Arahkan mouse ke Appearance -> Customize
- Pilih Site Identity
- Klik Select Image yang ada di bawah bagian Site Icon
- Unggah gambar ikon yang sudah disiapkan
- Klik Publish untuk menyimpan perubahan
Untuk menambahkan ke perangkat mobile, buka website dari ponsel dan pilih Add to Homescreen. Favicon muncul di layar utama.
2. Menggunakan Plugin
Menambahkan favicon di WordPress dengan plugin Favicon by RealFaviconGenerator. Plugin ini memiliki fitur yang beragam. Berikut cara membuat favicon menggunakan plugin tersebut :
- Buka Admin Dashboard
- Pilih Plugin -> Add New
- Ketik Favicon by RealFaviconGenerator di kotak pencarian
- Install dan aktifkan plugin
- Setelah aktivasi selesai, buka Appearance -> Favicon
- Unggah gambar yang ingin digunakan sebagai favicon. Gambar berukuran minimal 70 x 70 piksel. Lebih baik lagi, gunakan gambar berukuran lebih dari 260 x 260 piksel
- Setelah gambar diunggah, klik Generate Favicon
- Setelah itu, diarahkan ke situs RealFaviconGenerator
- Di website ini, cari dan klik opsi Generate your Favicon and HTML code
- Setelah itu akan diarahkan kembali ke website. Maka akan diberitahukan bahwa favicon sudah akan muncul
- Lihat tampilan favicon pada browser dan perangkat mobile.
3. Membuat Favicon secara Manual
ini merupakan cara secara manual dalam mengedit code.
- Akses file tema melalui FTP client atau File Manager
- Cari folder /wp-content/themes/your-theme
- Unggah favicon ke folder tema. Sebaiknya unggah favicon ke subfolder seperti Assets
- Ingat pathfile ini
- 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. setelah baris href=”‘.get_template_directory_uri() adalah path ke favicon. 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');
4. Memasang Favicon di Website secara Otomatis
Sebagian besar web browser sudah bisa mendeteksi file favicon.ico yang terletak di direktori website dan langsung menggunakan. Cara ini merupakan yang paling mudah untuk menambahkan favicon ke website.
- Siapkan gambar berdimensi persegi 1:1 dalam format .jpeg, .bmp, .gif, atau png. Bentuk persegi sangat disarankan karena terlihat paling profesional.
- Konversikan gambar menjadi format .ico. gunakan website convertico.com untuk mengonvert image jadi ico
- Buka convertico.com, lalu klik tombol untuk memilih dan mengunggah file.
Untuk mengunggah file ini, gunakan File Manager atau aplikasi FTP. Pada hosting berbasis Linux, direktori public_html. Setelah file favicon.ico beserta file website lain selesai diunggah, browser akan menampilkan di browser.
5. Cara Membuat Favicon di HTML
Berikut adalah cara menambahkan favicon di HTML:
- Siapkan gambar berdimensi persegi 1:1 dalam format .jpeg, .bmp, .gif, atau .png.
- Unggah file ke direktori tempat website berada. Pada hosting berbasis Linux, direktori public_html.
- Masukkan gambar yang ingin digunakan pada kode website. Tambahkan baris berikut ini di antara tag <head></head> dalam kode website:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
Kode HTML terlihat seperti ini:
Favicon adalah hal yang penting untuk website agar terlihat lebih kredibel dan profesional. Silahkan gunakan cara yang mudah bagi pengguna untuk menganti favicon tersebut di website.
