Tampilan website menjadi suatu hal yang paling penting untuk kita optimasi saat membuat website. Hal ini karena tampilan website menjadi satu hal yang paling menarik saat orang-orang mengunjungi website pertama kali.
Dalam hal ini, kita bisa menambahkan favicon di html untuk mengoptimasi tampilan website kita itu. Namun, kita perlu mengetahui bagaimana cara membuat favicon di html sebelumnya agar bisa melakukan hal ini dengan benar.
Sebelum masuk ke pembahasan tersebut, lebih bagus apabila kita mengetahui terlebih dahulu mengenai apa itu favicon. Ini juga menjadi hal penting yang harus kita ketahui agar lebih tertarik untuk menambahkan favicon pada website milik kita. Langsung saja, berikut pembahasan mengenai apa itu Favicon. Simak selengkapnya!
Apa itu Favicon di HTML?
Sebelum masuk ke pembahasan terkait bagaimana cara membuat favicon di HTML, kita perlu mengetahui terlebih dahulu apa itu favicon. Favicon adalah sebuah icon dari suatu website yang muncul pertama kali sebelum konten website ditampilkan.
Favicon sendiri biasanya terletak di sebelah kiri pada tab bar di browser kita. Disitulah kita bisa melihat favicon yang sangat ikonik pada setiap website berada. Nah, ikon yang disebut favicon itulah yang akan kita pelajari bagaimana cara membuat nya di HTML pada artikel kali ini.
Namun, sebelum masuk ke cara membuatnya, kita perlu memahami apa manfaat dari favicon ini. Langsung saja, berikut pembahasannya!
Cara Membuat Favicon di HTML
Setelah memahami sedikit informasi terkait favicon dan juga manfaatnya serta persiapan yang harus kita lakukan, akhirnya sekarang kita sampai di pembahasan utama terkait bagaimana cara membuat favicon di HTML. Pada tutorial kali ini, kita akan membuat favicon sederhana di HTML yang bisa dengan mudah semua orang pahami dan ikuti meskipun masih sangat pemula. Langsung saja, berikut cara pembuatannya!
1. Membuat Folder Utama Untuk Website Kita
Cara pertama yang harus kita lakukan dalam proses membuat favicon di HTML ini adalah membuat folder utama untuk website kita kali ini. Favicon akan kita letakkan pada website kita. Karena kita asumsikan bahwa sebelumnya kita sama sekali belum memiliki website, maka kita akan membuat website baru yang sangat sederhana.
Untuk membuat website baru semacam ini tentunya kita butuh folder utama. Selain untuk merapikannya, kita juga bisa lebih mudah ketika ingin memanggil gambar yang ingin kita gunakan sebagai favicon nantinya.
Langsung saja, silahkan buat folder dengan nama membuat-favicon yang bisa kita letakkan pada direktori This PC -> Documents.
Nah, kita bisa memperhatikan gambar di atas. Pada tutorial kali ini, kita akan membuat folder pada direktori tersebut. Hal yang perlu kita ketahui adalah kita bisa membuat folder ini di manapun. Jadi, kita tidak harus membuatnya tepat sesuai seperti yang ada pada tutorial kali ini.
Hal yang perlu kita perhatikan adalah semudah apa folder ini untuk bisa kita akses. Pastikan kita membuat folder dan meletakkannya pada direktori yang mudah kita akses. Sehingga kita bisa dengan mudah menemukan file nya ketika ingin membukanya baik di code editor maupun di browser nantinya.
2. Mengisi Folder Dengan File HTML Dan Gambar Favicon
Cara membuat favicon di HTML yang berikutnya adalah mengisi folder dengan file HTML dan juga gambar yang akan kita gunakan sebagai favicon nantinya. Ini menjadi hal yang penting untuk kita perhatikan agar mempermudah langkah berikutnya.
Pastikan file HTML dan gambar favicon berada di satu folder yang sama yaitu folder utama dengan nama membuat-favicon ini.
Langsung saja, kita masuk ke pembuatan file HTML nya. Kita bisa langsung menuju ke folder yang sudah kita buat sebelumnya. Kita akan menemukan folder yang benar-benar kosong saat kita membukanya.
Nah, pada bagian yang kosong itu, silahkan klik kanan dan pilihlah menu New. Setelah itu kita akan dihadapkan pada beberapa pilihan jenis file. Nah, silahkan pilih saja Text Document.
Setelah memilih Text Document, maka kita akan mendapatkan sebuah file dengan format txt. Nah, silahkan ganti nama beserta formatnya sehingga menjadi file dengan nama index.html seperti pada gambar berikut ini.
Kemudian silahkan tekan enter. Biasanya akan muncul sebuah peringatan yang memperingatkan bahwa format file telah berubah. Silahkan tekan saja pilihan yes ketika muncul peringatan seperti itu. Dengan begitu, kita sudah berhasil membuat file index.html pada folder utama kita ini.
Tidak selesai sampai disitu, sekarang saatnya untuk memindahkan gambar yang sudah kita siapkan sebelumnya agar berada di direktori yang sama dengan file index.html kita ini.
Seperti yang sudah disampaikan sebelumnya, ini penting untuk kita lakukan agar mempermudah pemanggilan gambar melalui kode html nantinya. Untuk itu, silahkan ambil gambar yang sudah kita siapkan dan tempatkan tepat berada folder membuat-favicon.
Silahkan fokus pada gambar di atas. Pastikan nama file gambar yang akan kita gunakan, sama dengan yang tertera pada gambar. Atau lebih tepatnya, gambar yang akan kita gunakan harus memiliki nama favicon.ico.
Ini untuk mempermudah kita dalam mengikuti langkah berikutnya nantinya. Perbedaan nama file seringkali menjadi penyebab utama gagalnya menampilkan favicon saat proses eksekusi nanti.
Nah, bagi kita yang hanya memiliki file dengan format selain ico, kita memiliki dua opsi. Kita bisa menggunakan file itu begitu saja yang menandakan bahwa nama file akan berbeda nantinya saat pemanggilan favicon. Atau kita juga bisa menggunakan software maupun tools online untuk melakukan konversi dari gambar kita ke format ico.
3. Menambahkan Sedikit Kode HTML Sederhana
Setelah selesai berurusan dengan merapikan struktur folder yang akan kita gunakan, sekarang saatnya kita lanjut ke cara membuat favicon di HTML yang berikutnya.
Saat ini kita memiliki file HTML namun masih belum ada isinya sama sekali. Ini membuat kita belum bisa melihat tampilan website kita di browser. Saat membuka file index.html kita, kita hanya akan melihat tampilan putih kosong saja pada browser.
Untuk itu, kita perlu menambahkan sedikit kode HTML sederhana agar kita bisa menampilkan sedikit konten pada file index.html. Kita bisa menyalin kode berikut ini dan meletakkannya langsung pada file index.html yang kita buka melalui code editor favorit masing-masing. Berikut kode yang bisa kita gunakan.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Favicon</title>
</head>
<body>
<h2>Belajar Membuat Favicon Bersama Makinrajin.com</h2>
</body>
</html>
Penjelasan Kode Program :
Ini merupakan struktur standar dari sebuah kode html. Terdapat DOCTYPE untuk menunjukan identitas dari dokumen html ini. Kemudian tag html yang membungkus seluruh kode html di dalamnya.
Selain itu ada juga tag head yang di dalamnya terdapat title. Tag title ini akan berisi teks yang nantinya akan muncul di tab bar bersamaan dengan favicon. Yang terakhir ada tag body yang berisi teks dengan tag heading h2 sebagai format penulisan yang akan dimunculkan pada browser sebagai konten website.
Nah, setelah menyalin dan menempelkannya pada file index.html, sekarang tampilan pada browser akan berubah. Tidak lagi putih, pada browser akan terlihat tulisan yang tadi kita letakkan pada tag body lengkap dengan title yang muncul di tab bar.
Namun, perhatikanlah bagian yang ditunjuk dengan panah merah pada gambar di atas. Di situ kita masih belum menemukan adanya favicon sesuai dengan gambar yang kita gunakan. Nah, selanjutnya, kita perlu menambahkan favicon di dalam file html kita.
4. Menambahkan Favicon di Dalam File HTML
Seperti yang sudah kita bahas sebelumnya, kita perlu menambahkan favicon ini untuk mengubah icon pada tab bar di browser. Nah, sekarang saatnya kita untuk menambahkan bagian paling penting pada tutorial kita kali ini.
Untuk menambahkannya, ada dua cara yang bisa kita gunakan. Pertama, kita akan memanfaatkan gambar yang sudah kita siapkan dan sudah kita letakkan tepat berada di satu folder yang sama dengan index.html kita. Ini bisa kita sebut sebagai cara menambahkan favicon secara offline. Berikut selengkapnya!
Menambahkan Favicon di HTML Secara Offline
Cara membuat favicon di HTML secara offline ini berarti kita harus benar-benar menggunakan file yang kita simpan sendiri. Kita harus memahami letak dari file itu agar tidak salah dalam memanggilnya nanti.
Nah, untuk melakukannya, kita bisa menyalin kode berikut ini dan letakkan saja pada baris 5 tepat di bawah tag title dan di atas penutup dari tag head pada file index.html kita. Berikut kode yang bisa kita gunakan.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">Penjelasan Kode Program :
Kode itu memanfaatkan tag link dari html yang berguna untuk menghubungkan file lain ke dalam file html kita ini. Nah, dalam penggunaanya, juga turut serta kita gunakan atribut rel disana. Atribut rel ini berfungsi sebagai relasi dari file yang akan kita gunakan di HTML kita ini. Karena dalam hal ini kita akan menggunakannya sebagai favicon, maka bisa kita tulis shortcut icon sebagai value dari atribut rel.
Kemudian atribut href berfungsi untuk memberi tahu file mana yang akan kita gunakan.
Pada atribut href, pastikan nama file nya sesuai dengan file yang akan kamu gunakan. Perhatikan besar kecil hurufnya beserta formatnya. Pastikan sama persis agar favicon bisa berfungsi dengan benar.
Selanjutnya ada atribut type yang menunjukan jenis dari file yang akan kita gunakan di HTML kita ini. Karena merupakan sebuah icon, kita bisa memberikan value image/x-icon pada atribut type ini.
Setelah menyalin dan meletakkannya, maka kita akan mendapatkan isi file index.html seperti berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Favicon</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h2>Belajar Membuat Favicon Bersama Makinrajin.com</h2>
</body>
</html>
Menambahkan Favicon di HTML Secara Online
Cara sebelumnya membahas mengenai bagaimana kita bisa membuat favicon di HTML menggunakan file yang kita simpan secara lokal di satu folder yang sama dengan index.html kita. Nah, selain cara itu, sebenarnya kita juga bisa menggunakan url untuk sebagai isi dari atribut href pada tag link. Berikut contoh kode penggunaannya yang juga bisa kita gunakan untuk menggantikan cara offline sebelumnya.
<link rel="shortcut icon" href="https://i0.wp.com/makinrajin.com/wp-content/uploads/2020/12/Makinrajin-Favicon-1.jpg" type="image/x-icon">Penjelasan Kode Program :
Perbedaan dengan cara menambahkan favicon di HTML secara offline adalah terletak pada isi dari atribut href nya. Pada cara offline, kita mengisinya dengan letak dari file yang kita gunakan secara lokal. Sedangkan pada cara online ini, kita menggantinya dengan menggunakan url dari gambar yang akan kita gunakan sebagai favicon.
Setelah menyalin dan meletakkannya, maka kita akan mendapatkan isi file index.html seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Favicon</title>
<link rel=”shortcut icon” href=”https://i0.wp.com/makinrajin.com/wp-content/uploads/2020/12Makinrajin-Favicon-1.jpg” type=”image/x-icon”>
</head>
<body>
<h2>Belajar Membuat Favicon Bersama Makinrajin.com</h2>
</body>
</html>
5. Mengecek Hasilnya Pada Browser
Setelah berhasil menambahkan kode program untuk membuat favicon di HTML, sekarang saatnya untuk mengecek apakah kode tersebut bisa berjalan dengan baik atau tidak. Jika berhasil, maka kita akan melihat bagian sebelah kiri dari tab bar pada browser akan berubah menjadi icon yang kita jadikan favicon. Berikut contoh hasil tampilan yang benar.
Perhatikan pada bagian yang ditunjuk panah merah pada gambar. Terlihat logo sudah bisa berubah pada bagian itu. Ini menandakan favicon sudah berjalan dan berhasil kita buat.
Itulah Dia Cara Membuat dan Menambahkan Favicon di HTML
Bagi kita yang mengalami kegagalan, pastikan kembali langkah-langkah yang sudah dilakukan. Jangan sampai ada bagian yang terlewat apalagi pada saat pemindahan file gambar dan juga pemanggilannya.
Kemudian jika kita menggunakan cara menambahkan favicon di HTML secara online, pastikan juga kita sudah terkoneksi dengan internet yang stabil. Nah, ketika kita sudah yakin mengikuti langkah-langkah pembuatannya secara urut dan benar, kita pasti akan mendapatkan hasil yang sesuai dengan yang kita inginkan.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development