HTML Favicon

Halo sobat, di artikel kali ini kami akan membagikan tutorial mengenai favicon, berikut adalah tutorialnya.

favicon adalah gambar kecil yang berada disamping judul halaman yang terletak di tab browser.

Bagaimana Cara Menambahkan Favicon di HTML ?

Favicon adalah gambar kecil yang terletak di sebelah kiri judul halaman pada tab browser.

Favicon adalah gambar yang sangat kecil, jadi disarankan membuat gambar yang 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.

Selanjutnya, tambahkan elemen <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.

Contoh Program 1 : Menambahkan Favicon

<!DOCTYPE html>

<html>

<head>

<title>Ini judul halaman</title>

</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.

Browser	ICO	PNG	GIF	JPEG	SVG
Chrome	Ya	Ya	Ya	Ya	Ya
Firefox	Ya	Ya	Ya	Ya	Ya
Opera	Ya	Ya	Ya	Ya	Ya
Edge	Ya	Ya	Ya	Ya	Ya
Safari	Ya	Ya	Ya	Ya	Ya

Rangkuman Artikel HTML Favicon

Elemen <link> dapat digunakan untuk menyisipkan favicon.

Tag HTML Link

Tag	Deskripsi
<link>	Mendefinisikan antara sebuah dokumen HTML dan sumber eksternal

Itulah tutorial mengenai favicon, semoga artikel kali ini bermanfaat, sampai jumpa di artikel selanjutnya, happy a nice day.

filesop.com

HTML Favicon | Tutorial HTML 21