Halo sobat, di artikel kali ini kami akan membagikan tutorial mengenai
favicon, berikut adalah tutorialnya.
favicon, berikut adalah tutorialnya.
HTML Favicon
favicon adalah gambar kecil yang berada disamping judul halaman yang terletak
di tab browser.
di tab browser.
Bagaimana Cara Menambahkan Favicon di HTML ?
Favicon adalah gambar kecil yang terletak di sebelah kiri judul halaman pada
tab browser.
tab browser.
Favicon adalah gambar yang sangat kecil, jadi disarankan membuat gambar yang
sangat sederhana dengan warna yang mencolok.
sangat sederhana dengan warna yang mencolok.
Tidak ada ketentuan khusus dalam memberi nama gambar favicon tapi umumnya
diberi nama “favicon.ico”. Untuk menambahkan gambar favicon kita bisa meletakan gambar di direktori
akar server web atau buat folder gambar di direktori akar tersebut dan simpan
gambar favicon di dalamnya.
diberi nama “favicon.ico”. Untuk menambahkan gambar favicon kita bisa meletakan gambar di direktori
akar server web atau buat folder gambar di direktori akar tersebut dan simpan
gambar favicon di dalamnya.
Selanjutnya, tambahkan elemen
<link>
setelah elemen
<title>
pada file “index.html”.
<link>
setelah elemen
<title>
pada file “index.html”.
Selanjutnya simpan file “index.html”, dan muat ulang browser kita maka kita akan melihat gambar favicon berada di
samping kiri tab judul halaman.
samping kiri tab judul halaman.
Contoh Program 1 : Menambahkan Favicon
<!DOCTYPE html>
<html>
<head>
<title>Ini judul halaman</title>
<link rel=“icon” type=“image/x-icon” href=“favicon.ico”>
</head>
<body>
<h1>Ini judul</h1>
<p>Ini paragraf</p>
</body>
</html>
Hasil Program 1
Penjelasan Program 1
- Di baris 4 kita membuat judul halaman.
- Di baris 5 kita menampilkan favicon.
- Di baris 9 kita membuat judul.
- Di baris 10 kita membuat paragraf.
Format Favicon Yang Didukung Browser
Berikut adalah beberapa format file yang didukung browser untuk dijadikan
favicon.
favicon.
| Chrome |
Rangkuman Artikel HTML Favicon
-
Elemen
<link>
dapat digunakan untuk menyisipkan favicon.
Tag HTML Link
| <link> |
Itulah tutorial mengenai favicon, semoga artikel kali ini bermanfaat, sampai
jumpa di artikel selanjutnya, happy a nice day.
jumpa di artikel selanjutnya, happy a nice day.
Komentar