Mengapa satu ikon berubah menjadi enam file
Favicon berawal pada 1999 sebagai satu favicon.ico berukuran 16×16 yang dicari Internet Explorer di folder root situs. Sejak itu, setiap platform yang menampilkan ikon situs meminta ukurannya sendiri, dan set ikon pun bertambah:
- 16 px: tab browser dan daftar bookmark di layar standar.
- 32 px: tab di layar berkepadatan tinggi, dan taskbar Windows saat situs disematkan.
- 48 px: shortcut desktop Windows dan beberapa daftar situs.
- 180 px: Apple touch icon, dipakai saat seseorang menambahkan situs ke layar utama di iPhone atau iPad.
- 192 px dan 512 px: ikon layar utama Android dan splash screen aplikasi web yang terpasang, dideklarasikan di web manifest.
ZIP berisi favicon.ico dengan tiga ukuran kecil di dalamnya, apple-touch-icon.png, icon-192.png, icon-512.png, dan site.webmanifest yang menunjuk ke dua ikon Android. Arsip diberi nama sesuai file sumber Anda, jadi logo.svg menghasilkan logo.favicon.zip.
Bagaimana set ikon dibuat
Setiap ukuran digambar langsung dari file asli Anda ke persegi transparannya sendiri. Jika gambar tidak persegi, gambar diskalakan agar muat dan diletakkan di tengah, dengan ruang transparan di sisi yang lebih pendek. SVG dirasterisasi ulang di setiap ukuran, jadi ikon 16 px mendapat presisi vektor yang sama dengan ikon 512 px; gambar raster diperkecil dengan penghalusan bawaan browser.
File ICO menyimpan tiga gambarnya sebagai data PNG di dalam wadah ICO, varian yang didukung sejak Windows Vista dan oleh semua browser saat ini. Varian ini mempertahankan transparansi penuh dan biasanya jauh lebih kecil daripada format ICO lama berbasis bitmap.
Semua rendering terjadi dengan Canvas API di browser Anda. Sumber hingga 20 MB diterima dalam format PNG, JPG, WebP, atau SVG.
Merancang logo yang tetap terbaca di 16 piksel
Pada 16×16 total hanya ada 256 piksel. Logo yang detail menjadi gumpalan buram di ukuran itu, dan itu masalah desain yang tidak bisa diperbaiki pengaturan ekspor apa pun. Yang berhasil:
- Gunakan tanda, bukan logo lengkap. Satu huruf, monogram, atau simbol logo tanpa wordmark.
- Bentuk tebal dan sedikit warna. Garis yang lebih tipis dari sekitar 1/16 lebar akan lenyap di ukuran terkecil.
- Isi perseginya. Pangkas margin kosong di file sumber sebelum membuat ikon; logo yang mengambang di tengah banyak ruang transparan akan terlihat sangat kecil di tab.
- Periksa kedua tema. Bilah tab browser bisa terang atau gelap. Ikon hitam di latar transparan lenyap di bilah tab gelap; garis tepi terang atau bentuk berwarna solid di belakangnya membantu.
Jika versi 16 px masih terlihat keruh, ada baiknya menyiapkan sumber terpisah yang disederhanakan, membuat set ikon darinya, dan mempertahankan PNG yang lebih besar dari versi yang detail.
Keanehan platform yang perlu diketahui
Apple touch icon yang transparan
iOS tidak menampilkan transparansi pada ikon layar utama; area transparan diisi, biasanya dengan hitam. Karena generator ini mempertahankan transparansi, logo di latar transparan akan dikelilingi persegi gelap di iPhone. Untuk hasil yang rapi, gunakan sumber dengan warna latar solid, atau ekspor logo beserta latarnya sebelum menaruhnya di sini.
Melengkapi web manifest
site.webmanifest yang disertakan hanya mencantumkan dua ikon. Untuk situs yang seharusnya bisa dipasang sebagai aplikasi, buka di editor teks dan tambahkan setidaknya name, short_name, start_url, display (misalnya standalone), dan theme_color. Tanpa itu, browser memakai judul halaman dan tidak akan menawarkan pemasangan.
Cache yang membandel
Browser menyimpan favicon di cache secara agresif, kadang selama berhari-hari dan terpisah dari cache halaman. Jika ikon lama terus muncul setelah Anda mengunggah file baru, buka URL ikon langsung lalu muat ulang, atau tambahkan query versi seperti ?v=2 pada tautan ikon di HTML Anda.
Memilih file sumber
SVG persegi adalah sumber yang paling praktis karena digambar tajam pada 512 px sekecil apa pun artwork aslinya. Jika Anda punya logo vektor dalam format lain, ekspor sebagai SVG atau sebagai PNG minimal 512×512. Untuk logo raster yang hanya tersedia dalam ukuran kecil, memperbesarnya lebih dulu dengan perbesar gambar memberi ikon 512 px tepi yang lebih bersih daripada sekadar diregangkan. Logo dengan wordmark lebar sebaiknya dipotong hingga tinggal simbolnya dengan potong gambar sebelum membuat ikon, alih-alih membiarkannya menyusut menjadi garis tipis di tengah persegi.