Pengenalan

Umumnya website yang online memiliki logo sendiri dan biasanya juga digunakan sebagai favicons. Jika Anda belum tahu apa itu favicons, ini contohnya:

Memiliki favicons di website Anda tentu lebih baik daripada tanpa icon di browser, selain itu, website Anda juga akan terlihat lebih profesional.

Dalam tutorial ini, kita akan mempelajari cara beberapa cara yang mudah untuk menambahkan favicons ke website Anda.

Yang Anda butuhkan

Sebelum memulai, yang Anda butuhkan adalah:

Gambar persegi yang ingin Anda tambahkan menjadi favicons untuk website Anda.
Akses ke file website Anda.

Opsi 1 – Membiarkan browser secara otomatis mengambil favicon (tanpa perlu mengubah code)

Kebanyakan web browser saat ini sudah bisa mendeteksi file favicon.ico yang terletak di direktori website Anda dan langsung menjadikannya sebagai favicon untuk website anda. Ini adalah cara yang paling mudah untuk menambahkan favicon ke website Anda.

1. Pertama, Anda harus memilii file gambar berukuran dimensi persegi 1:1 dalam format apapun (jpeg, bmp, gif, png) agar bisa tampil dengan normal di web browser. Tentunya, gambar yang tidak persegi juga bisa, hanya saja nanti tampilannya akan menjadi kurang profesional.

2. Opsi ini mengharuskan Anda untuk mengkonversi gambar menjadi format .ico. Ada banyak tool online yang bisa Anda gunakan, namun, dalam tutorial ini kita akan menggunakan convertico.com

3. Setelah membuka convertico.com Anda akan melihat sebuah tombol. Klik tombol tersebut untuk memilii dan meng-upload file gambar Anda.

4. Klik tombol dan pilih gambar yang Anda sukai, setelah itu gambar akan otomatis dikonversi dan muncul di bagian kanan website, siap di-download

5. Download gambar Anda dengan mengklik tombol panah Download dan simpan file .ico di komputer Anda.
6. Sekarang, ganti nama file menjadi favicon.ico, karen browser hanya akan mengenali nama ini.
7. Langkah terakhir, upload file tersebut ke direktori dimana file website Anda berada. Untuk meng-upload, Anda bisa menggunakan File Manager atau aplikasi FTP. Di hosting yang berbasis Linux, direktori biasanya adalah public_html, namun bisa juga berbeda tergantung konfigurasi Anda atau penyedia layanan hosting Anda. Dalam hal ini, sebaiknya Anda konsultasi dengan pihak hosting terlebih dahulu.

Ketika file favicon.ico selesai di-upload bersama dengan file website Anda lainnya, browser akan langsung mengenali file tersebut dan menampilkannya di browser.

PENTING: Jika Anda belum melihat favicon yang baru, bersihkan cache browser Anda dan restart.

Opsi 2 – Menggunakan gambar umum dan memanggilnya di dalam kode website

Jika Anda merasa bahwa mengkonversi gambar ke format lain terlalu repot, Anda bisa menggunakan gambar umum sebagai favicon untuk website Anda.

2. Upload file ke direktori dimana website Anda berada. Di hosting yang berbasis Linux, direktori biasanya adalah public_html, namun bisa juga berbeda tergantung konfigurasi Anda atau penyedia layanan hosting Anda. Dalam hal ini, sebaiknya Anda konsultasi dengan pihak hosting terlebih dahulu.

3. Sekarang, Anda harus menentukan gambar yang ingin Anda gunakan sebagai favicon, di kode website Anda. Tambahkan baris berikut ini diantara tag <head></head> di kode website Anda:

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

PENTING: Pada type=”image/png”, ganti png dengan format gambar Anda dan ganti favicon.png dengan nama file Anda.

Kode HTML-nya akan terlihat seperti ini:

Gambar Anda sekarang akan muncul sebagai favicon pada website.

PENTING: Jika Anda tidak melihat favicon baru, bersihkan cache browser Anda dan restart.

Kesimpulan

Kita telah mempelajari 2 cara untuk menambahkan favicon ke website Anda. Ini adalah hal kecil dalam proses pembuatan website Anda, namun cukup membantu agar website Anda tampil menarik bagi pengunjung.

Source:Hostinger