Cara menggunakan
- Tempel string Base64 atau data URI dari sebuah ikon, atau dari gambar yang ingin Anda jadikan ikon.
- Periksa pratinjau dan dimensinya. Gambar sumber berbentuk persegi menghasilkan ikon yang paling rapi.
- ICO sudah terpilih. Di Ukuran ikon, pilih satu ukuran (16, 32, 48, 64, 128, atau 256 piksel) atau opsi Beberapa ukuran.
- Unduh file .ico. Jika masukan sudah berupa ICO dan Anda ingin semua gambar di dalamnya tetap tanpa perubahan, pilih File asli.
File ICO dalam Base64
File ICO adalah kontainer kecil: sebuah header, direktori entri, dan satu gambar per entri, masing-masing disimpan sebagai data BMP atau PNG. Header diawali dengan byte 00 00 01 00, sehingga Base64 sebuah ikon dimulai dengan AAABAA. Anda akan menjumpai ikon Base64 pada data URI favicon seperti <link rel="icon" href="data:image/x-icon;base64,...">, di halaman HTML satu file, dan di API yang mengembalikan ikon situs web.
Tipe MIME yang terdaftar adalah image/vnd.microsoft.icon, tetapi image/x-icon jauh lebih umum dan berfungsi di mana saja.
Ukuran ikon mana yang sebaiknya dipilih
| Ukuran | Penggunaan umum |
|---|---|
| 16 × 16 | Tab browser dan bookmark di layar standar |
| 32 × 32 | Tab browser di layar berkepadatan tinggi |
| 48 × 48 | Ikon desktop Windows dan Explorer |
| 64, 128 | Pratinjau yang lebih besar dan daftar aplikasi |
| 256 × 256 | Tampilan ikon besar dan ekstra besar di Windows |
Opsi Beberapa ukuran mengemas 16, 32, 48, dan 256 ke dalam satu file, sehingga setiap sistem dapat memilih yang paling cocok. Gambar di dalamnya dikompresi sebagai PNG, yang mempertahankan transparansi dan didukung oleh Windows Vista ke atas serta semua browser modern.
Menggunakan ikon sebagai favicon
Browser secara otomatis meminta /favicon.ico dari root situs, sehingga menyimpan file di sana sudah berfungsi bahkan tanpa markup apa pun. Data URI Base64 di href menghemat permintaan tersebut, tetapi ikon kemudian diunduh ulang bersama setiap halaman alih-alih di-cache secara terpisah. Browser modern juga menerima ikon PNG dan SVG, dan penyiapan yang umum menggabungkan keduanya:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Mulailah dari gambar persegi dengan bentuk sederhana dan kontras yang kuat; detail halus akan hilang pada ukuran 16 piksel. Untuk mendapatkan versi PNG bagi keperluan lain, coba Base64 ke PNG.
Pertanyaan yang sering diajukan
Berapa ukuran yang tepat untuk favicon.ico?
Ikon multi-ukuran yang berisi gambar 16, 32, dan 48 piksel sudah mencakup browser dan Windows. Opsi Beberapa ukuran di sini juga menambahkan 256 untuk tampilan ikon besar.
Bisakah saya mengonversi PNG atau SVG Base64 ke ICO?
Bisa. Tempel datanya, biarkan Unduh sebagai pada ICO, lalu pilih ukuran. Gambar apa pun yang dapat ditampilkan browser Anda bisa dikonversi.
Mengapa pratinjau hanya menampilkan satu ukuran ikon saya?
File ICO dapat memuat beberapa gambar, tetapi pratinjau hanya menampilkan salah satunya. Unduh sebagai File asli untuk mempertahankan semua gambar di dalam file.
Apakah ICO mempertahankan transparansi?
Ya. Ikon disimpan sebagai data PNG dengan kanal alfa penuh, sehingga sudut membulat dan tepi lembut tetap transparan.
Bagaimana cara memasukkan ikon ke dalam data URI?
href pada tag <link rel="icon"> Anda.