Hai semuanya, kali ini saya akan memberikan Tutorial Cara Membuat Favicon dengan Html. Tahukah kamu apa itu Favicon ? Jika belum mengetahui apa itu favicon, mari kita bahas dibawah ini.
Favicon merupakan singkatan dari Favorite Icon, yaitu sebuah gambar icon yang muncul di website. Favicon juga bisa disebut sebagai shortcut icon ataupun icon website. Favicon ini muncul di sebelah kiri website yang sedang diakses dan ukuran nya pun kecil. Contohnya seperti dibawah ini
Itulah yang dinamakan favicon. Untuk Cara Membuat Favicon nya, simak tutorial nya dibawah ini.
1. Siapkan sebuah gambar yang akan dijadikan untuk favicon website
2. Kemudian kamu bisa searching di browser Favicon Generator. Contoh disini saya menggunakan website https://favicon.io.
3. Jika sudah, pilih bagian Image
4. Kemudian kamu upload gambar yang akan kamu jadikan favicon dan klik download
5. Hasil download nya berupa file zip, jadi kamu harus mengekstrak nya terlebih dahulu. Karena kita ingin favicon, jadi yang kita butuhkan hanya file dengan ekstensi .ico. Contohnya seperti dibawah ini
6. Kemudian kita buat file html. Contoh saya membuatnya dengan nama index.html
7. Contoh codingan untuk menampilkan favicon nya seperti dibawah ini
<link rel="icon" type="image/x-icon" href="favicon.ico">
8. Codingan favicon nya bisa kamu letakkan di dalam tag <head>, seperti dibawah ini
<!DOCTYPE html> <html> <head> <title>Contoh Website dengan Favicon</title> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <h1>Ini Contoh Heading</h1> <p>Ini Contoh Paragraf</p> </body> </html>
9. Contoh diatas saya menyimpan file index.html dan file favicon nya di dalam folder yang sama, jadi hanya perlu memanggil nama file nya. Jika kamu menyimpan nya di folder yang berbeda, kamu bisa sesuaikan path nya. Hasilnya seperti dibawah ini
Jika kamu masih bingung, silahkan bertanya di kolom komentar yang sudah disediakan.