Konfigurasi Favicon agar kompatible di semua browser
2 min read
go to Apa itu Favicon? sectionApa itu Favicon?
Favicon, singkatan dari “favorite icon,” adalah ikon kecil yang muncul di sebelah judul halaman web pada tab browser. Bahkan kita menambahkan website PWA favicon ini digunakan untuk tampilan icon di mobile atau desktop.
contohnya adalah logo RW pada tab broser di atas.
go to Fungsi Favicon sectionFungsi Favicon
- Identitas Situs Web
Seperti tanda merek atau tanda pengenal di situs website. gunanya sebenernya cuman ngebedain dari website lain. semisal config tidak di config jadinya seperti,
- Identitas Visual
intinya favicon menjadi salah satu identitas visual wajib. seperti ketika situs kita di buka, di tambahkan di home screen atau situs kita di bookmark. favicon ini bisa menjadi salah satu cara untuk branding dan menambah kredibilitas agar situs kita terlihat profesional.
go to Tool Generate Favicon sectionTool Generate Favicon
banyak tool yang digunakan untuk membuat satu design jadi beberapa format dan ukuran. Salah satu yang paling rekomended menurut saya, realfavicongenerator.net. kita bisa mengatur kompatibilitas sepesifik pada banyak platform.
Cara untuk generate favicon, dengan menyiapkan icon berformat gambar.
Tips menbuat design favicon dan juga untuk meningkatkan kualitasnya,
- Memilih Desain yang Sederhana dan Mudah Dikenali
- Menggunakan Warna yang solid, flat
- Menghindari Favicon yang Terlalu Rumit atau Terlalu Kecil
Opti generate favicon yang ada di realfavicongenerator.net dapat juga mengoptimalkan di beberapa platform,
- Desktop broser dan search engine,
- IOS
- Android chrome
- Window
Hasil Generate Favicon
Setelah generate icon di realfavicongenerator.net terdapat opsi untuk mengatur version dari icon yang ada. Setelah processgenerate selesai, maka akan di alihkan pada halaman instruksi untuk instalasi favicon.
kita tinggal download package dan kita masukan kode yang ada di <Head> Tool paling rekomend untuk generate favicon