Cara menggunakan
- Seret file .ico ke area seret-lepas, klik untuk memilih file, atau tempel gambar.
- Pertahankan Format asli agar semua ukuran yang tersimpan di dalam ikon tetap ada di keluaran.
- Periksa ukuran hasil enkode; ikon dengan banyak ukuran bisa lebih besar daripada perkiraan Anda.
- Salin data URI untuk tag link favicon, atau salin keluaran tag img, CSS, atau Markdown.
Format ICO
ICO adalah format ikon Windows sekaligus format favicon yang pertama. Format ini berupa kontainer: sebuah direktori singkat mencantumkan satu gambar atau lebih beserta lebar, tinggi, dan kedalaman warnanya, dan setiap gambar disimpan sebagai data bitmap atau, untuk ukuran besar seperti 256 kali 256, sebagai PNG yang disematkan. favicon.ico pada umumnya berisi versi 16, 32, dan 48 piksel agar browser dapat memilih yang paling tajam.
Tipe MIME yang terdaftar adalah image/vnd.microsoft.icon, tetapi image/x-icon jauh lebih umum, dan browser menerima keduanya. Data ICO dalam Base64 diawali dengan AAABAA, yaitu header file yang sudah dienkode.
Favicon berupa data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Menyematkan favicon secara inline berguna untuk dokumen HTML satu file seperti laporan yang diekspor, dasbor yang disimpan ke disk, dan dokumentasi offline, serta untuk prototipe atau alat internal ketika Anda tidak ingin men-deploy file terpisah. Di situs web dengan banyak halaman, /favicon.ico biasa umumnya lebih baik: file tersebut diunduh sekali lalu di-cache, sedangkan data URI diulang di setiap respons HTML.
Jika Anda sama sekali tidak menginginkan ikon, <link rel="icon" href="data:,"> mencegah browser meminta /favicon.ico.
Favicon ICO, PNG, atau SVG
Browser saat ini juga menerima favicon PNG dan SVG, misalnya <link rel="icon" type="image/png" href="data:image/png;base64,...">. Satu PNG berukuran 32 kali 32 sering kali lebih kecil daripada ICO multi-ukuran; untuk itu, gunakan PNG ke Base64 atau SVG ke Base64.
Mengonversi ICO di sini ke PNG, JPEG, atau WebP hanya mempertahankan satu gambar, yaitu gambar yang dipilih browser untuk ditampilkan. Untuk arah sebaliknya, yaitu membuat file ICO, enkode PNG lalu tempel hasilnya ke Base64 ke ICO, yang dapat membuat ikon berukuran 16 hingga 256 piksel.
Pertanyaan yang sering diajukan
Sebaiknya pakai image/x-icon atau image/vnd.microsoft.icon?
image/vnd.microsoft.icon adalah tipe yang terdaftar secara resmi, sedangkan image/x-icon adalah yang dipakai sebagian besar situs. Jika suatu sistem mengharapkan salah satunya, ubah awalannya setelah menyalin.Apakah semua ukuran ikon dipertahankan dalam keluaran Base64?
Ya, jika Anda mempertahankan format asli. Seluruh file dienkode, sehingga browser tetap dapat memilih ukuran yang dibutuhkannya. Konversi ke format lain hanya mempertahankan satu gambar.
Apakah favicon data URI berfungsi di semua browser?
Browser desktop saat ini menampilkannya di tab. Bookmark, pintasan layar utama, dan beberapa browser lama mungkin mengabaikan ikon inline, jadi situs web publik tetap sebaiknya menyediakan file favicon.