Format File
Apa Itu ICO? Penjelasan File Ikon dan Favicon
ICO adalah format ikon Windows yang menyimpan beberapa ukuran dalam satu file. Kami menjelaskan strukturnya, sejarah favicon, dan ukuran yang Anda butuhkan saat ini.
Penulis: Hemen Dönüştür Editör EkibiDiterbitkan: 7 menit baca
ICO adalah format yang dipakai Windows untuk ikon program dan folder, dan dipakai web untuk ikon situs kecil di tab browser (favicon). Yang membedakannya dari format gambar lain adalah bahwa satu file bisa menyimpan beberapa ukuran dari ikon yang sama. Artikel ini menjelaskan struktur internal file ICO, perkembangannya di berbagai versi Windows, sejarah favicon, ukuran yang Anda butuhkan saat ini, dan cara membuat file ICO dengan benar.
Apa itu ICO?
ICO (ekstensi .ico) adalah format kontainer yang didefinisikan Microsoft untuk sumber daya ikon. File ICO diawali "direktori ikon" yang mencantumkan setiap gambar di dalam file (misalnya 16x16, 32x32, dan 48x48 piksel) sebagai entri terpisah. Windows atau browser lalu memilih ukuran yang paling sesuai dengan tempat ikon ditampilkan.
MIME type resmi yang terdaftar di IANA adalah image/vnd.microsoft.icon, tetapi perangkat lunak Microsoft dan banyak server masih memakai image/x-icon. Format CUR untuk kursor mouse hampir identik; format ini memakai nilai 2 alih-alih 1 di field tipe direktori dan menyimpan titik klik kursor (hotspot).
Sejarah: dari ikon Windows hingga favicon
- Windows 1.0: Ikon masih monokrom.
- Windows 3.0: Struktur berbasis direktori yang menampung beberapa gambar, seperti yang kita kenal sekarang, mulai hadir.
- 1995: Artikel Microsoft karya John Hornick berjudul "Icons" mendokumentasikan struktur ICO secara terperinci dan menyarankan pengembang menyertakan setidaknya gambar 16x16 (16 warna), 32x32 (16 warna), dan 48x48 (256 warna).
- Maret 1999: Internet Explorer 5 menjadi browser pertama yang mendukung favicon. File
favicon.icodi root situs ditampilkan di daftar favorit dan bilah alamat. - Windows XP: Kanal alfa 8-bit ditambahkan ke gambar 32-bit, sehingga tepi lembut yang semi-transparan menjadi mungkin.
- Windows Vista: Gambar 256x256 dan kompresi PNG di dalam ICO ditambahkan.
- 2003: MIME type
image/vnd.microsoft.icondiajukan ke IANA oleh pihak ketiga.
Struktur file ICO
Direktori ikon (ICONDIR)
File diawali header 6 byte: field cadangan (0), tipe (1 untuk ikon, 2 untuk kursor), dan jumlah gambar. Untuk setiap gambar, sebuah entri direktori 16 byte menyusul.
Entri direktori (ICONDIRENTRY)
| Field | Arti |
|---|---|
| bWidth, bHeight | Lebar dan tinggi (masing-masing 1 byte). Nilai 0 berarti 256 piksel. |
| bColorCount | Jumlah warna palet (0 untuk 8 bit ke atas) |
| wPlanes, wBitCount | Bidang warna dan bit per piksel |
| dwBytesInRes | Ukuran data gambar dalam byte |
| dwImageOffset | Letak awal data gambar di dalam file |
Karena field ukurannya hanya satu byte, gambar di dalam ICO maksimal berukuran 256x256 piksel.
Data gambar: BMP atau PNG
Pada ICO klasik, setiap gambar adalah BMP tanpa header file-nya (sebuah DIB). Menurut artikel Hornick, gambar itu berisi gambar berwarna (XOR mask) diikuti mask transparansi 1-bit (AND mask), itulah sebabnya tinggi yang disimpan di header adalah gabungan tinggi kedua mask, dua kali tinggi sebenarnya. Sejak Windows XP, gambar 32-bit membawa kanal alfanya langsung di data piksel.
Sejak Windows Vista, sebuah entri juga bisa berupa file PNG utuh alih-alih BMP. Menyematkan PNG, terutama untuk ukuran 256x256, membuat file jauh lebih kecil. MDN mencatat bahwa PNG di dalam ICO tidak didukung sebelum Vista dan bisa menimbulkan masalah di perangkat lunak lama, tetapi browser dan versi Windows terkini bisa membaca keduanya.
Ukuran berapa yang Anda butuhkan?
Ikon aplikasi Windows
Panduan ikon aplikasi terbaru dari Microsoft menyebutkan bahwa aplikasi Win32 sebaiknya menyertakan setidaknya 16x16, 24x24, 32x32, 48x48, dan 256x256. Jika Windows tidak menemukan ukuran yang persis cocok, Windows memperkecil ukuran terdekat yang lebih besar; dengan adanya gambar 256 piksel, ikon hanya akan diperkecil, tidak pernah diperbesar. Pada skala 100%, misalnya, bilah judul dan menu konteks memakai 16 piksel dan taskbar memakai 24; pada skala 200%, angka itu menjadi 32 dan 48.
Favicon untuk situs web
Di web, caranya berbeda. Menurut HTML Standard, jika halaman tidak memiliki tautan rel="icon", browser boleh meminta /favicon.ico dari root situs. Karena itu, menaruh favicon.ico di root masih merupakan praktik yang baik, tetapi itu saja tidak cukup:
- Google Search mensyaratkan favicon persegi (1:1) berukuran minimal 8x8 piksel dan menyarankan ukuran lebih besar dari 48x48 agar tampil baik di berbagai tempat.
- Layar utama iPhone dan iPad memakai
apple-touch-iconberukuran 180x180. - Android dan PWA mengharapkan ikon 192 dan 512 piksel di web app manifest, ditambah versi "maskable" untuk ikon adaptif.
- Browser terkini juga mendukung favicon SVG; satu file vektor mencakup semua ukuran.
Dalam praktiknya, memasukkan ukuran 16, 32, dan 48 piksel ke dalam favicon.ico sudah mencakup browser desktop dan sistem lama, sedangkan ukuran yang lebih besar disediakan sebagai file PNG terpisah.
Dukungan di sistem, browser, dan perangkat lunak
Windows membaca dan menulis ICO secara bawaan; Explorer, shortcut, dan desktop semuanya bekerja dengan format ini. Menurut MDN, Chrome, Edge, Firefox, Opera, dan Safari bisa menampilkan file ICO. macOS memakai format ICNS miliknya sendiri untuk ikon aplikasi, tetapi Preview bisa membuka ICO. Editor seperti GIMP membuka ICO sebagai file berlapis, satu layer per ukuran. MDN menyarankan untuk tidak memakai ICO di konten web umum dan mencatat bahwa favicon sudah beralih ke PNG dengan elemen <link>.
Kelebihan dan kekurangan
| Kelebihan | Kekurangan |
|---|---|
| Beberapa ukuran dan kedalaman warna dalam satu file | Maksimal 256x256 piksel |
| Didukung secara universal di Windows | Tidak berguna di web selain untuk favicon |
| Kanal alfa dan kompresi PNG (Vista dan sesudahnya) | Entri lama berbasis BMP besar dan tidak praktis |
| Browser otomatis mencari favicon.ico di root | Memerlukan alat khusus; tidak semua program bisa menulisnya |
Masalah umum dan cara mengatasinya
Bukankah cukup mengganti nama PNG menjadi .ico?
Sebagian browser memakluminya, tetapi itu bukan ICO sungguhan: tidak ada direktori ikon dan Windows tidak akan menerimanya sebagai ikon. Cara yang benar adalah mengonversi gambar menjadi ICO sungguhan. Alat PNG ke ICO dan JPG ke ICO kami selalu menulis persegi 16, 32, dan 48 piksel, lalu menambahkan 64, 128, dan 256 jika gambar Anda cukup besar. Setiap ukuran disematkan sebagai PNG, sehingga transparansi tetap terjaga.
Favicon buram atau tidak terbaca
Garis tipis dan teks kecil lenyap pada ukuran 16 piksel. Gunakan tanda yang tebal, kontras tinggi, dan sederhana; bila perlu, ambil hanya bagian simbol dari logo Anda. Sumber persegi minimal 256x256, idealnya 512x512 piksel, memberikan hasil terbaik.
Gambar yang tidak persegi tampak gepeng atau melar
Ikon berbentuk persegi. Alat kami tidak pernah meregangkan gambar: gambar diletakkan di tengah persegi dengan proporsi yang tetap dan tepinya dibiarkan transparan. Untuk persegi yang sempurna, potong bagian persegi terlebih dahulu dengan potong gambar.
Favicon baru tidak muncul
Browser menyimpan favicon di cache dalam waktu lama. Mengganti nama file atau menambahkan parameter versi (/favicon.ico?v=2), serta memeriksa bahwa server mengembalikan MIME type yang benar, biasanya menyelesaikannya. Ikon di hasil Google Search baru diperbarui setelah situs dirayapi ulang.
Windows masih menampilkan ikon lama
Windows menyimpan ikon dalam cache terpisah. Membangun ulang aplikasi dan membuat ulang shortcut, atau keluar lalu masuk kembali ke akun, sering kali sudah cukup.
Tips konversi
- Satu ICO tidak cukup untuk situs web: Pembuat favicon sekaligus menghasilkan favicon.ico (16, 32, dan 48 piksel), favicon-48x48.png, apple-touch-icon.png (180 piksel), icon-192.png, icon-512.png, icon-512-maskable.png yang maskable, dan site.webmanifest, ditambah icon.svg jika sumbernya SVG. Alat ini juga memberikan potongan kode untuk ditempel di
<head>halaman Anda. - Ikon Apple memerlukan latar yang tidak transparan: iOS menampilkan area transparan sebagai hitam dan membulatkan sudutnya sendiri, jadi pembuat favicon mengisi apple-touch-icon dengan warna latar yang Anda pilih.
- Jika logo Anda berupa SVG: render PNG berukuran besar dengan SVG ke PNG lalu konversikan ke ICO, atau berikan SVG-nya langsung ke pembuat favicon.
Alat ICO dan favicon kami berjalan di browser Anda; gambar Anda tidak diunggah dan tidak pernah meninggalkan perangkat Anda.
Pertanyaan yang Sering Diajukan
Berapa ukuran maksimum gambar ICO?
Field lebar dan tinggi di entri direktori masing-masing satu byte, dan 0 berarti 256. Jadi, satu gambar di dalam ICO maksimal berukuran 256x256 piksel.
Sebaiknya pakai ICO atau PNG untuk favicon?
Pakai keduanya. favicon.ico di root dengan ukuran 16, 32, dan 48 piksel melayani browser lama dan permintaan otomatis; deklarasikan ikon PNG (dan opsional SVG) dengan tag <link> untuk browser terkini dan perangkat seluler.
Apakah ICO mendukung transparansi?
Ya. ICO lama memakai mask 1-bit, gambar 32-bit memiliki kanal alfa penuh sejak Windows XP, dan PNG tersemat sudah membawa transparansi sejak Vista.
Bagaimana cara mengonversi file ICO ke PNG?
Tambahkan ICO Anda ke konverter gambar dan pilih PNG sebagai tujuan. Jika file berisi beberapa ukuran, ukuran terbesar yang dipakai.
Apakah file ICO dipakai di Mac?
macOS memakai format ICNS untuk ikon aplikasi. Untuk situs web, favicon.ico dan ikon PNG berfungsi di browser pada semua sistem operasi.
