Cara Menambahkan Icon di Address Bar / Title Bar

Assalamualaikum Warahmatullahi Wabarakatuh..
     Pada tutorial kali ini SkripKu Dotkom akan membahas bagaimana cara menambahkan icon di title bar. Contohnya seperti ini:
     Mungkin artikel seperti ini sudah agak mainstream, tapi enggak apa-apa lah dibahas juga disini, sekalian buat ngejawab salah satu pertanyaan teman saya. Bagaimana caranya? ternyata cukup mudah, kita cukup menambahkan tag dan atribut berikut di antara tag <head> dan </head> :

<link rel="icon" href="skripku.ico" type="image/x-icon">
  Info:
  • Silahkan ganti skripku.ico menjadi gambar yang akan dijadikan icon web kita.
  • Ekstensi file-nya tidak harus .ico, sebagai alernatif lain kita bisa menggunakan .png, .gif, dll. Tapi yang paling umum digunakan memang .ico
  • Usahakan juga gambarnya harus berbentuk persegi (memiliki lebar dan tinggi yang sama) dan juga ukuran gambarnya jangan yang gede-gede, ukuran 20x20 piksel juga sudah cukup. Soalnya kalau gambarnya gede, nanti bakal kurang enak dilihatnya.

Contoh

     Saya punya 1 file html dan 1 file ico yang akan saya jadikan icon di file html tadi.
Isi dari index.html adalah seperti ini:

<!DOCTYPE html>
<html>
 <head>
  <title>SkripKu Dotkom</title>
  <link rel="icon" href="xampp.ico" type="image/x-icon">
 </head>
 <body>
  <p>Welcome to <a href="http://skripku.com/">SkripKu Dotkom</a></p>
 </body>
</html> 
Jika file index.html tadi dibuka dibrowser, maka hasilnya kurang lebih seperti ini:
Silahkan coba contoh diatas, atau anda bisa mendownload contoh penggunaannya dengan mengklik tombol dibawah:

Mudah kan? Sekian tutorial singkat kali ini,
Semoga bermanfaat,
Wassalamualaikum Warahmatullahi Wabarakatuh..

4 komentar


EmoticonEmoticon