Bagaimana Menambahkan Ikon Situs di HTML

Belajar bagaimana menambahkan ikon situs di HTML (Favicon).

Bagaimana Menambahkan Ikon Situs di HTML

Ikon situs (favicon) adalah gambar kecil yang ditampilkan di sebelah judul halaman di tab browser.

Anda dapat menggunakan gambar apapun yang Anda sukai sebagai ikon situs. Anda juga dapat membuat ikon situs sendiri di situs seperti https://favicon.cc.

Petunjuk:Ikon situs adalah gambar kecil, jadi ia harus menjadi gambar yang sederhana dan memiliki kontras tinggi.

Gambar ikon situs ditampilkan di sebelah kiri judul halaman tab browser, seperti yang ditunjukkan di bawah ini:

Contoh ikon situs web

Untuk menambahkan ikon situs ke situs Anda, simpan gambar ikon situs Anda di root server Web, atau buat folder bernama images di root directory dan simpan gambar ikon situs Anda di folder ini. Nama yang biasa digunakan untuk gambar ikon situs adalah "favicon.ico".

berikutnya, di berkas "index.html" <title> tambahkan satu di belakang elemen <link> Elemen, seperti yang ditunjukkan di bawah ini:

<!DOCTYPE html>
<html>
<head>
  <title>judul Halaman Saya</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>Ini adalah Judul</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>

Coba sendiri

Sekarang, simpan berkas "index.html" dan muat ulangnya di browser. Tab browser Anda sekarang harus menampilkan ikon situs Anda di sebelah kiri judul halaman.