Pengenalan
Biasanya situs web online mempunyai logo tersendiri dan biasanya logo tersebut juga dinamakan sebagai favicons. Jika Anda sama sekali belum tahu apa itu favicons, berikut ini adalah contohnya:
Mempunyai favicons di dalam website Anda tentu akan membuat lebih menarik daripada tak memiliki icon di browser, selain itu, website Anda akan semakin terlihat lebih profesional dimata para pengunjung.
Untuk tutorial kali ini, saya akan membahas beberapa cara yang termudah untuk menambahkan favicons ke dalam website Anda.
Anda dapat mengikuti panduan untuk menginstall plugin di WordPress di Artikel berikut ini.
Yang Harus Anda Persiapkan
Sebelum mengikuti langkah selanjutnya, yang harus Anda persiapkan adalah:
- Gambar berbentuk persegi yang akan Anda tambahkan untuk menjadi favicons situs web Anda.
- Akses ke file di situs web Anda.
Opsi 1 – Membiarkan browser secara otomatis mengambil favicon (tanpa harus mengubah code)
Beberapa web browser terbaru sudah dapat mendeteksi file favicon.ico yang berada di direktori website Anda dan secara otomatis akan menjadikannya sebagai favicon untuk situs web milik anda. Ini merupakan cara yang termudah untuk menggunakan favicon ke dalam situs web Anda.
1. Pertama, Anda harus mempunyai file gambar yang memiliki ukuran dimensi persegi 1:1 dalam bentuk format apapun (jpeg, bmp, gif, png) agar dapat tampil dengan normal pada web browser. Sebab, gambar yang tak berdimensi persegi akan membuat tampilan iconnya akan menjadi kurang menarik.
2. Langkah selanjutnya mengharuskan Anda untuk mengkonversi format gambar menjadi format .ico. Terdapat banyak tool online yang dapat Anda gunakan, namun, Contoh dalam tutorial kali ini saya akan menggunakan convertico.com
3. Usai anda membuka situs convertico.com Anda bisa melihat sebuah tombol. Tekanlah tombol tersebut untuk memiliih dan meng-upload file gambar dari komputer milik Anda.
Anda juga bisa menginstall webuzo di VPS dengan mengikuti tutorial berikut ini.
4. Tekan tombol dan pilihlah gambar yang Anda inginkan, selanjutnya gambar akan secara otomatis dikonversi dan berada di bagian kanan website, kemudian siap untuk di-download:
5. Downloadlah gambar Anda tersebut dengan menekan tombol panah bertulisan Download kemudian simpan file .ico di folder komputer Anda.
6. Sekarang, Ubahlah nama file tersebut menjadi favicon.ico, sebab browser hanya dapat mengenali nama file ini.
7. Langkah terakhir, unggah file tersebut ke dalam direktori dimana file website Anda berada. Untuk meng-uploadnya, Anda dapat menggunakan File Manager atau menggunakan aplikasi FTP. Di hosting Linux, direktori biasanya akan terdapat didalam folder public_html, namun bisa saja berbeda tergantung dengan konfigurasi yang Anda lakukan atau penyedia layanan hosting yang Anda gunakan. Dalam hal ini, sebaiknya Anda segera berkonsultasi dengan pihak hosting terlebih dahulu.
Saat file favicon.ico sudah berhasil di-upload bersama dengan file situs web Anda lainnya, browser akan segera mengenali file tersebut dan akan menampilkannya ke dalam browser.
PENTING: Jika Anda masih belum dapat melihat favicon yang baru, segera bersihkan cache browser Anda kemudian restart.
Anda juga bisa membaca tutorial untuk menyetting Robot.txt di Artikel berikut ini.
Opsi 2 – Memasang gambar umum dengan menggunakan kode website
Jika Anda merasa jika mengkonversi gambar ke format lain terasa sangat merepotkan, Anda dapat menggunakan gambar umum sebagai favicon untuk situs web Anda.
1. Pertama, Anda harus mempunyai file gambar yang memiliki ukuran dimensi persegi 1:1 dalam bentuk format apapun (jpeg, bmp, gif, png) agar dapat tampil dengan normal pada web browser. Sebab, gambar yang tak berdimensi persegi akan membuat tampilan iconnya akan menjadi kurang menarik.
2. Unggah/Upload file tersebut ke dalam file direktori dimana website Anda berada. Di hosting yang menggunakan Linux, direktori biasanya akan terdapat didalam folder public_html, namun bisa saja berbeda tergantung dengan konfigurasi yang Anda lakukan atau penyedia layanan hosting yang Anda gunakan. Dalam hal ini, sebaiknya Anda segera berkonsultasi dengan pihak hosting terlebih dahulu.
3. Sekarang, Anda hanya harus memilih gambar mana yang ingin Anda gunakan untuk menjadi favicon, di kode website Anda. Tambahkanlah baris perintah seperti berikut ini diantara tag <head></head> pada kode website Anda:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
PENTING: untuk type=”image/png”, gantilah png dengan bentuk format gambar Anda dan gantilah tulisan favicon.png dengan nama file gambar Anda.
Maka, Kode HTML-nya akan muncul seperti dibawah ini:
Gambar Anda akan segera muncul sebagai favicon pada situs web Anda.
PENTING: Apabila Anda tak dapat melihat favicon baru, bersihkanlah cache browser Anda kemudian restart.
Anda juga bisa mempercepat loading blog Anda dengan mengikuti panduan berikut ini.
Kesimpulan
Saya sudah menjelaskan 2 cara untuk membuat favicon ke dalam website Anda. Ini merupakan hal kecil dalam proses pembuatan website Anda, namun hal ini sangatlah membantu agar website Anda dapat tampil semakin menarik untuk para pengunjung.