Pernahkah Anda memperhatikan logo kecil di samping judul situs web pada tab browser? Atau melihat ikon aplikasi saat Anda menyimpan situs ke layar beranda ponsel? Itu adalah favicon. Favicon (kependekan dari favorites icon) adalah sebuah ikon kecil yang berperan besar dalam identitas visual dan profesionalisme sebuah situs web.
Meskipun ukurannya sangat kecil, favicon membantu pengguna mengenali dan membedakan situs web Anda dari tab lain yang terbuka. Ini adalah sentuhan kecil yang membuat situs Anda terasa lebih lengkap dan profesional.
Apa Itu Favicon dan Mengapa Penting?
Favicon adalah ikon yang biasanya berukuran 16×16 piksel, 32×32 piksel, atau ukuran kecil lainnya. Ikon ini muncul di berbagai tempat:
- Tab Browser: Di samping judul halaman.
- Bookmark atau Favorites: Saat Anda menyimpan situs web.
- Daftar Riwayat Penjelajahan: Di samping URL.
- Layar Beranda Ponsel: Saat pengguna menambahkan situs Anda ke layar utama.
Favicon memberikan kesan pertama yang kuat, memperkuat branding, dan memudahkan pengguna menemukan situs Anda di antara banyak tab yang terbuka.
Cara Membuat dan Memasang Favicon
Memasang favicon sangat mudah. Anda hanya perlu menyiapkan file gambar dan menambahkan satu baris kode di dalam tag <head> dokumen HTML Anda.
1. Siapkan File Favicon
Pilih atau buat gambar yang sederhana dan mudah dikenali. Format file yang paling umum adalah .ico, tetapi browser modern juga mendukung format lain seperti .png, .jpg, atau .svg. Format .ico adalah pilihan terbaik untuk kompatibilitas terluas.
Tips membuat favicon:
- Gunakan logo utama merek Anda.
- Pilih gambar dengan resolusi yang cukup tinggi, lalu ubah ukurannya menjadi 16×16 piksel atau 32×32 piksel.
- Pastikan desainnya tetap jelas dan mudah dikenali meskipun ukurannya kecil.
Jika Anda tidak memiliki aplikasi desain, banyak situs web generator favicon gratis yang bisa membantu Anda membuat file .ico dari gambar yang sudah ada.
2. Tambahkan Kode HTML
Setelah Anda memiliki file favicon (misalnya, favicon.ico), letakkan file tersebut di direktori utama situs web Anda. Kemudian, tambahkan baris kode ini di antara tag <head> dan </head>:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman Saya</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<h1>Selamat datang!</h1>
</body>
</html>
<link rel="icon"...>: Ini adalah tag yang menautkan dokumen HTML ke favicon.rel="icon": Atribut ini memberitahu browser bahwa file ini adalah ikon untuk situs web.type="image/x-icon": Ini adalah tipe MIME standar untuk file.ico. Jika Anda menggunakan.png, Anda bisa menggantinya dengantype="image/png".href="/favicon.ico": Ini adalah jalur (path) ke file favicon Anda. Jika file berada di folder lain, pastikan Anda menyesuaikan jalurnya.
Contoh Lanjutan (untuk Kompatibilitas Lebih Baik)
Untuk memastikan favicon Anda tampil dengan baik di berbagai perangkat dan resolusi, Anda bisa menambahkan beberapa tag <link> dengan ukuran berbeda.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Dengan langkah-langkah di atas, Anda telah berhasil memberikan sentuhan profesional pada situs web Anda dengan favicon. Ini adalah detail kecil yang menunjukkan perhatian Anda pada setiap aspek pengalaman pengguna, dan tentu saja, memperkuat identitas merek Anda di dunia digital.
