Favicon HTML
Favicon adalah gambar kecil yang ditampilkan di sebelah judul halaman di tab browser.
Cara Menambahkan Favicon di HTML
Anda dapat menggunakan gambar apa pun yang Anda suka sebagai favicon Anda. Anda juga dapat membuat favicon sendiri di situs seperti https://favicon.cc .
Tip: Favicon adalah gambar kecil, jadi harus gambar sederhana dengan kontras tinggi.
Gambar favicon ditampilkan di sebelah kiri judul halaman di tab browser, seperti ini:
Untuk menambahkan favicon ke situs web Anda, simpan gambar favicon Anda ke direktori root server web Anda, atau buat folder di direktori root yang disebut gambar, dan simpan gambar favicon Anda di folder ini. Nama umum untuk gambar favicon adalah "favicon.ico".
Selanjutnya, tambahkan <link>elemen ke file "index.html" Anda, setelah <title>elemen, seperti ini:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>My Page
Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Sekarang, simpan file "index.html" dan muat ulang di browser Anda. Tab browser Anda sekarang akan menampilkan gambar favicon Anda di sebelah kiri judul halaman.
Dukungan Format File Favicon
Tabel berikut menunjukkan dukungan format file untuk gambar favicon:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
Ringkasan Bab
- Gunakan elemen HTML
<link>untuk menyisipkan favicon
Tag Tautan HTML
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .