Apakah saya masih perlu favicon.ico, atau apakah PNG sudah cukup?
ICO adalah format direktori yang mengemas 16, 32, dan 48 ke dalam satu file 4,6 KB. Apa yang ada di dalamnya, mengapa PNG tidak menggantikannya dan tujuh file yang harus dikirim.
Setiap beberapa tahun seseorang menyatakan favicon.ico sudah mati. Kemudian pembaca umpan atau pintasan Windows lama meminta /favicon.ico, mendapatkan 404 dan menampilkan glyph halaman kosong. Mengirimkan ICO memerlukan 4,6 KB. Itulah seluruh argumennya, dan mengapa generator ikon kami masih menulis satu.
Berikan alpha.png, gambar 900x606 dengan transparansi, dan tujuh file akan dihasilkan: favicon.ico sebesar 4,6 KB, favicon-16x16.png sebesar 521 B, favicon-32x32.png sebesar 1,4 KB, apple-touch-icon.png sebesar 28,4 KB dan dua PNG android-chrome sebesar 31,9 KB dan 196 KB, ditambah site.webmanifest sebesar 371 B. Browser Anda sendiri menulis semua tujuh file tersebut. Kami membangunnya seperti itu karena aplikasi ini sama sekali tidak memiliki rute API, yang merupakan kalimat yang tidak bisa dikatakan oleh setiap situs favicon sisi server.
Apa sebenarnya yang ada di dalam file .ico?
ICO adalah format direktori. File dibuka dengan enam byte: kata yang dicadangkan diatur ke 0, kata tipe diatur ke 1 untuk ikon dan jumlah gambar yang mengikuti. Setelah itu, ada satu entri 16-byte per gambar, yang membawa lebar, tinggi, jumlah warna, satu byte yang dicadangkan, warna bidang, bit per piksel, panjang byte dari data gambar dan offsetnya dari awal file. Kemudian payload, yang digabungkan. Artikel ikon Microsoft yang diarsipkan dari 1995 mendokumentasikan dua struktur tersebut sebagai ICONDIR dan ICONDIRENTRY, dan mereka belum berubah.
Lebar dan tinggi masing-masing mendapatkan satu byte, itulah sebabnya 256x256 harus disimpan sebagai 0 dan mengapa tidak ada yang lebih besar dari 256 muat dalam direktori sama sekali. Encoder kami menulis 1 bidang warna dan 32 bit per piksel untuk setiap entri, dan setiap payload adalah PNG biasa. Spesifikasi 1995 menggambarkan DIB diikuti oleh masker AND 1-bit untuk transparansi, itulah sebabnya ikon kuno memiliki tepi yang tajam. Tiga gambar berarti 6 byte header ditambah 48 byte direktori. Itu 54 byte untuk pencatatan, dan semua yang lainnya dalam 4,6 KB adalah data PNG.
Mengapa satu favicon.ico menyimpan 16, 32, dan 48?
Itulah tiga ukuran yang kami kemas, dan itu tidak sembarangan. Dokumen Microsoft yang sama memberi tahu pengembang untuk menyertakan 16x16, 32x32, dan 48x48 dalam setiap sumber ikon, kemudian menjelaskan aturan pemilihan: gambar yang paling mendekati ukuran yang diminta akan menang. Strip tab meminta 16. Pada tampilan 2x, slot CSS 16 yang sama ingin 32 piksel nyata, dan pintasan desktop Windows meminta 48. Jika ICO Anda hanya menyimpan 16, pintasan akan mendapatkan gambar 16 px yang direntangkan menjadi 48, dan itu akan terlihat persis seperti itu.
Jika browser membaca PNG, mengapa mengirimkan ICO sama sekali?
Karena keduanya ditemukan dengan cara yang berbeda. Cuplikan empat baris yang diberikan alat kami memberi nama file PNG dengan tipe eksplisit dan petunjuk ukuran, dan klien mana pun yang mem-parsing `<head>` akan mengambilnya. Referensi `<link>` MDN menunjukkan bentuk yang sama, beberapa tautan ikon yang atributnya memungkinkan browser memilih. Standar HTML juga memungkinkan agen pengguna mencari /favicon.ico berdasarkan jalur ketika tidak ada tautan ikon yang dideklarasikan, dan banyak hal yang mengambil URL Anda tidak pernah membaca markup Anda. Favicon SVG menggoda di sini, dan caniuse menempatkannya pada dukungan global 90,49% dengan Safari hanya mengambilnya di versi 26,0. Itu meninggalkan ekor yang nyata.
Apa saja tujuh file tersebut dan berapa beratnya?
| File | Piksel | Ukuran | Apa yang membacanya |
|---|---|---|---|
| favicon.ico | 16, 32 dan 48 dikemas | 4,6 KB | fallback jalur /favicon.ico, pintasan Windows |
| favicon-16x16.png | 16x16 | 521 B | strip tab pada 1x, melalui tag tautan |
| favicon-32x32.png | 32x32 | 1,4 KB | strip tab pada 2x, melalui tag tautan |
| apple-touch-icon.png | 180x180 | 28,4 KB | layar beranda iOS, melalui tag tautan |
| android-chrome-192x192.png | 192x192 | 31,9 KB | array ikon manifest |
| android-chrome-512x512.png | 512x512 | 196 KB | array ikon manifest |
| site.webmanifest | n/a | 371 B | prompt instalasi |
Yang 512 mendominasi. Tambahkan ICO, kedua PNG kecil, apple-touch-icon dan 192 bersama-sama dan Anda berada di bawah 67 KB secara keseluruhan, dibandingkan dengan 196 KB untuk satu file itu. Penting untuk mengetahui mana dari itu yang benar-benar menghabiskan biaya Anda pada tampilan halaman, karena hanya ICO dan dua PNG kecil yang terlibat di sana.
Mengapa logo transparan saya duduk di atas kotak putih?
Karena generator mengecat kanvas sebelum menggambar karya seni Anda, dan pengisian default adalah #ffffff. Kontrol itu adalah input warna, jadi selalu ada beberapa warna di bawahnya. Atur ke hex merek Anda dan seluruh set cocok dengan situs Anda. alpha.png masuk dengan saluran alpha dan setiap satu dari tujuh gambar keluar dalam keadaan opak, yang mengejutkan orang-orang yang mengharapkan favicon transparan.
Penggeser margin berjalan dari 0 hingga 30 persen dan menyisipkan karya seni Anda dengan bagian dari setiap tepi ikon, jadi pada 10 persen ikon 32 px mempertahankan batas 3 px di setiap sisi. Itu adalah jumlah yang terlihat pada skala itu. Sumber non-persegi mendapatkan bingkai surat: logo 900x606 mempertahankan rasio aspeknya dan mengambil latar belakang di atas dan di bawah. Persegi terlebih dahulu jika itu mengganggu Anda. Pemotong memiliki preset 1:1, menerima satu file pada satu waktu hingga 10 MB dan mengkode ulang format lossy pada kualitas hardcoded 92. Jika Anda lebih suka mengubah ukuran daripada memotong, pengubah ukuran memiliki preset persentase di 25, 50 dan 75 dengan mode cover, contain dan stretch fit.
Bagaimana cara mengonversi ICO kembali menjadi PNG?
Gunakan ICO to PNG. Ini mem-parsing wadah, berjalan melalui entri direktori dan menyimpan yang memiliki lebar terbesar, kemudian menulisnya sebagai PNG. Arahkan ke file 4,6 KB di atas dan Anda akan mendapatkan gambar 48x48, karena 48 adalah hal terbesar yang dikemas di sana. Ini tidak dapat memulihkan detail yang tidak pernah ada di file. Jika Anda memerlukan sesuatu yang lebih besar, pengubah skala menjalankan Real-ESRGAN di browser Anda dan selalu mengeluarkan PNG; tes small.png kami pada 400x269 kembali sebagai 800x538 pada pengaturan 2x. Apakah rekonstruksi atau interpolasi biasa adalah alat yang tepat tergantung pada untuk apa ikon itu. Perlu diketahui: model hanya menghasilkan 4x secara internal, jadi 2x adalah pengurangan yang diterapkan setelahnya. Pengubah kami mencakup 24 pasangan di 11 format dan menulis ICO untuk tidak ada dari mereka. Ikon berasal dari generator ikon.
Apakah ikon 196 KB terlalu besar?
Itu adalah android-chrome-512x512.png, dan itu adalah yang terberat dalam set tersebut. Itu diambil ketika seseorang menginstal situs Anda sebagai aplikasi, yang diatur oleh spesifikasi W3C Web App Manifest, jadi itu tidak berada di jalur kritis pemuatan halaman biasa. Anda masih bisa mengecilkannya. Kompresor kami menawarkan dua mode PNG yang berperilaku sangat berbeda: "PNG tanpa kompresi" menjalankan oxipng pada level 3 dan tetap tanpa kehilangan, sementara "PNG ukuran file lebih kecil" mengkuantisasi ke palet warna 256 dengan imagequant. Pada alpha.png, 942,4 KB di sumber, langkah tanpa kehilangan memberikan 383,9 KB dan langkah palet memberikan 98,3 KB. Logo datar biasanya bertahan dengan 256 warna tanpa ada yang menyadarinya. Kompresi juga menghapus setiap sisa metadata, termasuk EXIF dan ICC, yang untuk sebuah ikon adalah tepat apa yang Anda inginkan.
Inilah langkah konkret berikutnya. Buka generator ikon, masukkan sumber persegi terbesar yang Anda miliki (ini menerima JPEG, PNG, WebP, AVIF, GIF, dan SVG hingga 10 MB, satu file), atur warna latar belakang ke hex merek Anda, biarkan margin di 0 dan hasilkan. Salin empat tag tautan ke dalam `<head>`, unggah favicon.ico ke root web Anda dan Anda selesai. Jika Anda ingin memastikan tidak ada yang keluar dari mesin Anda, lihat tab jaringan saat berjalan, atau baca halaman privasi kami. Di mana masing-masing dari tujuh file berada di server Anda ditulis secara terpisah secara lengkap.