Favicon and Layout In Website
09 May 2025
Penjelasan tentang Favicon dan Layout.
A. Apa itu Favicon
Favicon (singkatan dari favorite icon) adalah ikon kecil yang muncul di tab browser, bookmark, dan kadang-kadang di samping URL. Biasanya favicon mengandung logo sederhana atau huruf awal nama brand/website dan juga biasanya favicon berukuran 16x16 atau 32x32 piksel dan berupa file berformat .ico, .png, atau .svg.
B. Fungsi Favicon
- Identitas Visual Website :
- Meningkatkan pengenalan merek (brand recognition).
- Memudahkan pengguna mengingat atau mengenali website di antara banyak tab.
- Tampilan Profesional :
- Website tanpa favicon sering dianggap kurang lengkap atau kurang profesional.
- Bookmark dan Shortcut :
- Favicon juga muncul saat pengguna menyimpan halaman sebagai bookmark atau shortcut di layar utama (di ponsel).
C. Format dan Ukuran Umum
| Format File | Keterangan |
|---|---|
.ico |
Format paling standar dan kompatibel lintas browser. |
.png |
Umumnya digunakan karena kualitas gambar lebih baik. |
.svg |
Bisa digunakan untuk skala tinggi dan retina display. |
| _______________ |
| Ukuran | Keterangan |
|---|---|
| 16x16 px | Ukuran minimum untuk tab browser |
| 32x32 px | Untuk tampilan resolusi tinggi |
| 48x48 atau lebih | Untuk shortcut di ponsel dan favicon adaptif |
| _______________ |
gambar Favicon
D. Apa itu Layout
Layout website adalah struktur penempatan elemen-elemen desain di halaman web agar mudah digunakan, dibaca, dan menarik secara visual. Layout yang baik membuat pengunjung merasa nyaman dan tahu ke mana harus pergi (navigasi jelas).
E. Tujuan Layout
- Mengarahkan Fokus Pengguna: Elemen penting seperti tombol, menu, atau headline bisa ditempatkan dengan strategis.
- Desain Responsif: Layout harus menyesuaikan tampilan di berbagai perangkat
- desktop
- tablet
- HP.
- Pengalaman Pengguna (UX): Membantu pengguna menemukan informasi dengan mudah.
F. Struktur Umum Layout Website
G. Penjelasan Komponen Layout
| Bagian | Fungsi |
|---|---|
| Header | Biasanya berisi logo, nama situs, dan menu navigasi utama. |
| Navigasi (Navbar) | Menu horizontal/vertikal yang membantu pengguna berpindah antar halaman. |
| Main Content (Konten Utama)…. | Tempat isi utama artikel, berita, produk, dll. |
| Sidebar | Navigasi tambahan, iklan, form pencarian, atau artikel terkait. |
| Footer | Bagian bawah halaman berisi hak cipta, link penting, media sosial, atau kontak. |
gambar Layout
