Mengenal Favicon dan Struktur Layout pada Website
16 May 2025
Ulasan mengenai favicon serta pengaturan layout halaman web.
A. Pengertian Favicon
Favicon (singkatan dari favorite icon) adalah ikon berukuran kecil yang tampil di tab browser, daftar bookmark, dan kadang di samping alamat URL. Biasanya favicon menampilkan logo mini atau inisial merek/website. Ukuran umumnya 16×16 piksel atau 32×32 piksel, dengan format populer seperti .ico, .png, atau .svg.
B. Manfaat Favicon
- Sebagai Identitas Visual
- Mempermudah pengunjung mengenali dan mengingat situs.
- Memperkuat branding, terutama saat banyak tab terbuka.
- Meningkatkan Kesan Profesional
- Situs tanpa favicon kerap terlihat kurang rapi atau belum selesai.
- Muncul di Bookmark & Shortcut
- Ikon ini juga muncul ketika pengguna menyimpan halaman sebagai bookmark atau membuat pintasan di layar utama ponsel.
C. Format & Ukuran Umum
Format File Favicon
| Format | Keterangan |
|---|---|
| .ico | Format klasik, kompatibel dengan hampir semua browser. |
| .png | Gambar lebih tajam, mendukung transparansi. |
| .svg | Cocok untuk resolusi tinggi, dapat diskalakan tanpa pecah. |
Ukuran Favicon
| Ukuran | Catatan Penggunaan |
|---|---|
| 16×16 piksel | Ukuran dasar, tampil di tab browser. |
| 32×32 piksel | Versi resolusi lebih tinggi, cocok layar modern. |
| 48×48+ piksel | Untuk ikon shortcut di homescreen atau favicon adaptif. |
Contoh Gambar Favicon
D. Apa yang Dimaksud dengan Layout Website
Layout website adalah susunan elemen-elemen desain pada halaman web. Layout yang terencana baik membuat halaman mudah dibaca, menarik, dan memandu pengunjung menjelajah konten dengan nyaman.
E. Tujuan Pengaturan Layout
- Mengatur Fokus Pengguna
- Elemen penting seperti tombol, menu navigasi, atau judul dapat ditempatkan di posisi strategis.
- Mendukung Desain Responsif
- Layout harus menyesuaikan tampilan di berbagai perangkat, seperti komputer, tablet, atau ponsel.
- Meningkatkan Kenyamanan Pengguna
- Membantu pengunjung menemukan informasi dengan cepat dan mudah.
F. Struktur Dasar Layout Website
G. Bagian Penting Layout Website
| Komponen | Penjelasan |
|---|---|
| Header | Biasanya berisi logo, nama situs, serta navigasi utama. |
| Navigasi (Navbar) | Menu horizontal atau vertikal untuk berpindah antar halaman. |
| Konten Utama | Area isi utama: artikel, berita, produk, atau informasi penting lainnya. |
| Sidebar | Ruang tambahan: menu navigasi, iklan, form pencarian, atau tautan artikel terkait. |
| Footer | Bagian bawah: hak cipta, tautan penting, info media sosial, atau kontak pemilik situs. |
Contoh Gambar Layout Website
