Favicon adalah ikon kecil yang muncul di tab browser, daftar bookmark, dan saran bilah alamat ketika seseorang mengunjungi situs web. Melakukannya dengan benar melibatkan lebih dari sekadar membuat gambar menjadi kecil. Favicon yang terlihat tajam membutuhkan dimensi piksel yang tepat, desain terpusat yang bersih, dan format yang benar untuk konteks penggunaannya. Ukuran favicon standar adalah 16x16 piksel untuk tampilan tab browser dasar, dengan 32x32 digunakan untuk layar kepadatan tinggi dan 48x48 disertakan dalam paket favicon lengkap. Favicon yang disiapkan dengan buruk terlihat buram atau tidak jelas di tab, yang merupakan detail kecil yang mencerminkan kualitas keseluruhan situs web.
Cara Mengubah Ukuran Gambar untuk Favicon
Untuk favicon dasar, masukkan 16 di kedua bidang lebar dan tinggi dan matikan kotak centang Pertahankan Rasio Aspek untuk output persegi yang dipaksakan. Untuk versi resolusi lebih tinggi, ulangi proses dengan 32 di kedua bidang. Untuk paket favicon lengkap, proses gambar yang sama pada 16x16, 32x32 dan 48x48 secara terpisah.
Kualitas gambar sumber lebih penting pada ukuran favicon daripada hampir semua dimensi lainnya. Logo yang kompleks atau ilustrasi terperinci kehilangan semua bentuk yang dapat dikenali pada 16x16. Ikon tebal sederhana dengan tepi bersih dan detail minimal bertahan jauh lebih baik. Mulai dari versi ikon terbesar yang tersedia dan perkecil untuk hasil paling tajam di setiap ukuran. Unggah beberapa ukuran sekaligus dan unduh sebagai ZIP setelah selesai.
Ukuran Favicon Standar
16x16 piksel: ukuran dasar yang ditampilkan di tab browser pada layar resolusi standar. 32x32 piksel: digunakan oleh layar kepadatan tinggi dan pintasan desktop Windows. 48x48 piksel: disertakan dalam paket favicon lengkap untuk kompatibilitas yang lebih luas. 180x180 piksel: ukuran Apple Touch Icon yang digunakan ketika situs web disimpan ke layar beranda iOS. 192x192 piksel: digunakan oleh perangkat Android untuk ikon aplikasi web layar beranda. Paket favicon lengkap biasanya mencakup semua ukuran ini yang dihasilkan dari ikon sumber yang sama.
Format Keluaran untuk Favicon
PNG adalah format yang paling banyak didukung untuk implementasi favicon modern. Sebagian besar browser menerima file favicon PNG secara langsung melalui tag link di head HTML. Latar belakang transparan didukung dalam PNG dan memungkinkan favicon berada dengan bersih di atas warna tab browser. Format ICO tradisional menggabungkan beberapa ukuran ke dalam satu file dan masih digunakan untuk file favicon.ico root yang dicari browser secara default. PNG pada ukuran yang benar adalah pendekatan paling langsung untuk sebagian besar proyek web modern.