Kalau lo sering browsing, pasti pernah lihat ikon kecil di tab browser, kan? Nah, itu namanya favicon! Favicon ini bukan cuma pemanis doang, tapi juga bikin website lo lebih profesional dan gampang dikenali. Yuk, kita bahas tuntas cara bikin dan pasang favicon di website lo!
Apa Itu Favicon?
Favicon (singkatan dari favorite icon) adalah ikon kecil yang muncul di tab browser, bookmark, dan history. Biasanya favicon berukuran 16×16 px atau 32×32 px, tapi bisa juga lebih besar tergantung kebutuhan.
Kalau lo sering buka banyak tab sekaligus, favicon ini berguna banget buat ngenalin website tanpa harus baca judulnya. Jadi, jangan sampai skip fitur kece ini di website lo!
Cara Membuat Favicon
Lo bisa bikin favicon pakai software desain seperti:
- Adobe Photoshop
- Canva
- Favicon Generator (cari aja di Google, banyak yang gratis!)
Biasanya favicon dibuat dalam format .ico, tapi bisa juga pakai .png, .jpg, atau .svg. Supaya hasilnya tajam dan keren, pastikan desainnya simpel dan jelas.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Ini adalah judul</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>Ini adalah header</h1>
<p>Ini adalah paragraf</p>
</body>
</html>
Hasilnya:
Cara Pasang Favicon di HTML
Setelah bikin favicon, sekarang saatnya pasang ke website lo. Caranya gampang banget!
1. Simpan favicon di root folder website
Contoh: favicon.ico langsung disimpan di folder utama website.
2. Tambahkan kode HTML berikut di <head>:
<link rel="icon" type="image/x-icon" href="favicon.ico">
Kalau favicon lo pakai format lain, tinggal ganti type-nya. Misalnya:
<link rel="icon" type="image/png" href="favicon.png">
3. Cek di browser!
Kalau favicon belum muncul, coba:
- Clear cache browser
- Pastikan path favicon benar
- Pakai incognito mode buat ngecek
Favicon untuk Perangkat Apple & Android
Supaya favicon lo tampil keren di semua perangkat, tambahkan juga versi untuk Apple dan Android.
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<meta name="theme-color" content="#ffffff">
Dengan ini, kalau website lo disimpan di home screen HP, ikon yang muncul bakal lebih estetik!
Kesimpulan
Favicon itu kecil, tapi punya efek besar buat branding website. Selain bikin website lo lebih gampang dikenali, favicon juga ngasih kesan profesional. Jadi, jangan lupa buat dan pasang favicon di website lo!
Udah siap bikin favicon sendiri? Yuk, cobain sekarang dan lihat perubahan kece di website lo!
Komentar