Halaman ini ditampilkan dalam bahasa Indonesia, bahasa yang diminta peramban Anda.
Kode halaman ini tidak berjalan.
Membuka index.html langsung dari sebuah folder memblokir modul JavaScript, sehingga tidak akan terjadi apa-apa saat Anda memilih sebuah gambar. Sajikan folder tersebut lewat http sebagai gantinya:
Terbuka begitu Anda memilih berkas di atas.siap — putuskan koneksi internet dan ini akan tetap berfungsi.tidak tersedia di peramban ini (semua yang lain tetap berfungsi).membutuhkan https:// atau localhost untuk menyimpan cache demi penggunaan luring.penyimpanan cache tidak tersedia di sini, tetapi tidak ada yang diunggah dengan cara apa pun.file Anda tidak pergi ke mana pun. {total} file dimuat, semuanya milik halaman ini sendiri. {platform}sesuatu menghubungi {hosts}, dan itu tidak pernah dilakukan alat ini. Anggap itu layak diselidiki. {platform}Skrip iklan, pengukuran, dan tombol donasi milik halaman ini dimuat dari {hosts} host; tidak satu pun diberi sebuah file atau satu byte darinya.Skrip iklan, pengukuran, dan tombol donasi milik halaman ini dimuat dari {hosts} host; tidak satu pun diberi sebuah file atau satu byte darinya.Ada yang tidak berjalan dengan benar: {detail}. Muat ulang halaman untuk memulai dari awal.Membaca {count} file…Membaca {count} file…Coba sebuah contohMembuat contoh…Peramban ini tidak dapat membuat contoh. Silakan pilih berkas saja.
Gambar ke ICO — pembuat favicon serta ikon Windows dan macOS
Satu gambar masuk. Setiap ukuran yang diminta peramban, Windows, atau sebuah Mac, keluar.
● gambar Anda tidak pernah diunggah. Tidak ada server.
Penskalaannya dan file ikonnya sendiri sama-sama dibuat di peramban Anda sendiri. Gambarnya digambar oleh kanvas yang memang sudah dibawa peramban Anda, dan setiap wadah — .ico Windows, .icns macOS — dirakit dari piksel itu oleh beberapa ratus baris di src/ico.js dan src/icns.js yang bisa Anda baca. Alat ini tidak punya fitur jaringan dalam bentuk apa pun — tidak ada yang diambil, tidak ada yang dikirim — dan seandainya pun ada, tidak ada server di ujung lain halaman ini untuk menerima sebuah logo.
✗ Tanpa unggah
✗ Tanpa akun
✗ Tanpa tanda air
✓ Jalan tanpa internet
✓ Sumber terbuka
Pemeriksaan langsung:memeriksa…
Luring:memeriksa…
Tidak perlu percaya begitu saja: buka DevTools, perhatikan tab Network, lalu buat sebuah ikon. Tidak satu pun permintaan membawa gambar, gambar mini, nama file, atau satu byte pun dari yang Anda pilih. Atau cabut koneksi internet dan tetap buat satu.
Cara memverifikasi klaim privasi ini
Logo Anda tidak punya tujuan ke mana pun. Content-Security-Policy menyebut satu per satu setiap alamat yang boleh dihubungi halaman ini, dan tidak satu pun milik situs ini. Tidak ada titik akhir di sini tempat file Anda bisa dikumpulkan, dan tidak ada kode yang akan mengirimnya seandainya ada.
Tidak ada di sini yang mengambil apa pun. Tidak ada fetch, tidak ada XMLHttpRequest, dan tidak ada sendBeacon di mana pun di dalam src/. Penskalaannya adalah sebuah drawImage ke sebuah kanvas; setiap ikon adalah sebuah header yang ditulis di depan piksel itu, di halaman ini, oleh src/ico.js atau src/icns.js.
File itu digambarkan dari byte-nya sendiri. Daftar ukuran yang ditampilkan di sebelah ikon yang sudah jadi bukan daftar ukuran yang Anda minta. Ia dibaca kembali dari file yang baru saja ditulis oleh readIcoDirectory atau readIcnsElements; artinya kalau sebuah penulis bertentangan dengan setelannya, halaman ini akan mengatakannya, dan Anda tidak perlu mengetahuinya ketika Windows tidak menggambar apa pun dan macOS menggambar kertas kosong.
Apa yang dimuat Google, dan apa yang tidak diberikan kepadanya. Skrip iklan dan pengukuran berasal dari Google, dan tombol donasi dari Buy Me a Coffee. Tidak satu pun diberi apa pun tentang gambar Anda. Setiap baris yang membaca, menskalakan, atau menulis sebuah file disajikan dari asal ini dan terdaftar di repositori.
Jalan tanpa internet. Putuskan koneksi jaringan dan alat ini tidak berubah, karena sejak awal memang tidak ada langkah jaringan di dalamnya. Itulah bukti yang paling sederhana.
Periksa sendiri. Anda tidak perlu memercayai semua ini begitu saja. Halaman ini dihasilkan dari templat dan konfigurasi di repositori oleh skrip build yang bisa Anda baca dan jalankan sendiri, dan hasilnya dikirim ke cabang dist — jadi Anda bisa membandingkan apa yang disajikan dengan apa yang dihasilkan oleh build dari kode sumbernya:
File yang layak dibaca lebih dulu adalah config/site.toml untuk Content-Security-Policy, src/ico.js dan src/icns.js untuk dua format ikonnya — direktori, entri, dan maskernya di yang satu, sepuluh slot bernama milik Apple di yang lain — dan src/sizes.js untuk asal setiap ukuran di halaman ini.
Jika perangkat lunak keamanan kantor Anda memperingatkan soal unggahan. Ia mengawasi saat sebuah berkas dipilih di peramban, dan tidak bisa tahu apakah halaman ini berniat mengirimnya — jadi ia memperingatkan saat pemilihan. Tidak ada yang dikirim dari sini: buka alat pengembang peramban, pindah ke Network, lalu pilih sebuah berkas. Tidak ada permintaan yang membawanya, dan tidak ada permintaan sama sekali selain pratinjau lokal halaman ini. Pemeriksaan yang sama bisa dilakukan tim TI Anda dalam setengah menit.
1 Pilih gambar
2 Sebutkan ikonnya untuk apa
Sebuah file ikon bukan satu gambar melainkan beberapa: logo yang sama digambar lagi pada setiap ukuran yang diminta oleh yang membacanya. Ukuran mana saja itu bukan soal selera — sebuah peramban mau tiga di antaranya, sebuah aplikasi di laptop berkepadatan tinggi mau sepuluh, sebuah Mac mau sepuluh miliknya sendiri, dan sesuatu yang ditulis sebelum Windows Vista mau semuanya disimpan dengan cara yang sama sekali berbeda.
Ikon Windows — .ico Dibaca setiap peramban sebagai favicon, dan oleh Windows untuk sebuah aplikasi, sebuah pintasan, dan sebuah folder. Ukurannya Anda sendiri yang pilih di bawah.
Ikon macOS — .icns Inilah yang dibawa sebuah paket aplikasi Mac. Apple menamai tepat sepuluh slot, dari 16 piksel sampai 1024, jadi tidak ada yang perlu dipilih: kesepuluhnya masuk, digambar dari tujuh render karena sebuah slot Retina dan ukuran di atasnya adalah gambar yang sama.
Sisa set ikon sebuah situs web Sebuah .ico mencakup tab peramban dan Windows. Ia tidak mencakup layar utama iPhone, ajakan pemasangan Android, atau ubin yang disematkan ke menu mulai — ketiganya membaca PNG 180px, sebuah manifes aplikasi web, dan sebuah file XML, dan tidak satu pun dari mereka mau melihat ke dalam sebuah .ico. Centang ini dan Anda mendapatkan semuanya juga, manifesnya, serta blok HTML untuk ditempelkan ke halaman Anda.
3 Periksa pada ukuran ia akan dilihat
Inilah bagian yang layak dilihat sebelum Anda mengunduh apa pun. Logo yang terbaca sempurna pada 512 piksel lebarnya enam belas piksel di sebuah tab peramban, dan bagian tipisnya — goresan pada logo kata, garis rambut di tepinya, sebuah gradien — tidak selamat dari itu. Setiap kotak di bawah digambar pada ukuran sebenarnya dari file yang Anda pilih.
Siap
Tempelkan ini ke <head> Anda
{name}: bukan gambar yang bisa dibaca alat ini.{name}: peramban ini tidak bisa mendekodenya.peramban ini tidak bisa mendekode gambarnya.peramban ini menolak menulis PNG.sebuah ikon butuh setidaknya satu gambar di dalamnya.gambar ikon tidak bisa selebar nol piksel.{size} tidak muat di .ico: formatnya menyimpan tiap sisi dalam satu bita, jadi 256 adalah yang terbesar.penyangga pikselnya tidak cocok dengan ukuran yang disebutkannya.bukan .ico: terlalu pendek untuk memuat tajuk.bukan .ico: ruas tipenya bukan 1.direktorinya melewati ujung berkas.sebuah entri menunjuk ke luar ujung berkas.sebuah ikon butuh setidaknya satu gambar di dalamnya.“{type}” bukan tipe icns empat huruf.bukan .icns: terlalu pendek untuk memuat tajuk.bukan .icns: tanda tangannya bukan “icns”.tajuknya menyebut {claimed} bita dan berkasnya {actual}.sebuah elemen melewati ujung berkas.elemen {type} menyebut panjang yang tidak muat di berkas ini.{n} bita{n} KB{n} MB1 gambar{n} gambar1 ukuran{n} ukuran1 slot{n} slot{a}, {b}{a} dan {b}{a} dan {b}{size} · {bytes} · persegi{size} · {bytes} · tidak persegiTampilkan yang ini di pratinjauKeluarkan {name} dari daftartab peramban, bilah alamat, dan ikon kecil di Explorertampilan daftar Windows pada 125%bilah tugas Windows pada 150%desktop, bilah tugas, dan bilah markah perambandesktop pada 125%ikon sedang di Explorer, dan ukuran saat Google membaca faviconExplorer pada 200%, dan pengalih Alt-Tabikon besar di Explorerukuran jumbo lama, masih dibaca pemasangikon ekstra besar di Explorer dan menu Start; yang terbesar yang muat di .icoFavicon situs webfavicon.ico klasik yang diletakkan di akar sebuah situs. Tiga ukuran itulah seluruh konvensinya: 16 untuk tab, 32 untuk markah dan pintasan Windows, 48 karena itu ukuran saat Google membaca ikon sebuah situs.Ikon aplikasi WindowsYang diminta sebuah .exe atau pintasan, dan yang ada di dalam app.ico milik Visual Studio sendiri: tiga ukuran shell ditambah 256 yang dipakai menu Start dan tampilan ikon ekstra besar Explorer.Aplikasi Windows, semua skalaIkon yang sama dengan ukuran-ukuran antara yang diminta Windows pada penskalaan layar 125%, 150% dan 200%. Berkasnya lebih besar, dan ini satu-satunya versi yang tidak diam-diam disampel ulang di laptop ber-DPI tinggi.Kompatibilitas maksimumTiga ukuran, semuanya disimpan dengan cara sebelum Vista, untuk pemasang, perangkat tertanam dan perkakas shell lama yang membaca .ico sendiri dan tidak tahu apa itu PNG di dalamnya.Pilih sendiri ukurannyaSetiap ukuran yang bisa dimuat format ini. Mencentang semuanya jarang jadi jawaban yang benar: tiap ukuran itu satu gambar utuh, dan tidak ada yang membaca ukuran yang tidak diminta siapa-siapa.{list} pxyang Anda centang di bawahTidak ada yang dicentang, jadi tidak ada yang dibuat.Tidak ada ukuran yang dicentang, jadi .ico-nya akan kosong. Centang sebuah ukuran, atau keluaran yang lain.Per gambar: {parts}.Per gambar: {parts}. .icns digambar sampai 1024 piksel, jadi itu yang besar; itulah yang diminta Mac.satu .ico berisi {count}satu .icns berisi seluruh {n} slot Apple{n} PNG dan tiga berkas teks yang dibutuhkan sebuah situsTidak ada yang dicentang, jadi berkasnya akan kosong.Centang setidaknya satu ukuran.{count} — {list} — {kind}. Gambar yang belum persegi akan {fit}.disimpan dengan cara sebelum Vista sampai 64 piksel dan sebagai PNG di atasnyasetiap ukuran disimpan sebagai PNGsetiap ukuran disimpan dengan cara sebelum Vistadiisi sampai persegi, dengan isiannya dibiarkan transparandiisi sampai persegi dengan warna latardipangkas ke persegi di bagian tengahdiregangkan sampai persegi{n} tanpa kompresi, yang jadinya tepat {size}{n} sebagai PNG, yang ukurannya bergantung pada gambarnya{parts}. {tail}Tidak ada isi berkas yang dikompresi, jadi ia terbuka di apa saja, termasuk perangkat lunak yang lebih tua daripada Windows Vista.Tiap entrinya PNG, yang paling kecil yang bisa dicapai sebuah .ico, dan tidak terbaca oleh Windows XP serta beberapa pemasang.Ukuran-ukuran kecil disimpan dengan cara lama supaya apa pun bisa membacanya, dan yang besar sebagai PNG karena di situlah penghematannya.{name} berukuran {size}, yang tidak persegi, sedangkan ikon selalu persegi. Yang diambil adalah persegi di bagian tengah; ujung-ujungnya terpotong.{name} berukuran {size}, yang tidak persegi, sedangkan ikon selalu persegi. Gambarnya diregangkan, jadi akan tampak gepeng di setiap ukuran.{name} berukuran {size}, yang tidak persegi, sedangkan ikon selalu persegi. Gambarnya diisi, jadi seluruh gambar tetap ada dan ada ruang di atas dan di bawahnya.Ukurannya cuma {size}, jadi {list} lebih besar daripada gambarnya. Ukuran itu diperbesar, bukan digambar, dan memperbesar gambar tidak bisa mengembalikan detail yang memang tidak pernah ada di dalamnya.Ukurannya cuma {size}, jadi {list} lebih besar daripada gambarnya. Ukuran-ukuran itu diperbesar, bukan digambar, dan memperbesar gambar tidak bisa mengembalikan detail yang memang tidak pernah ada di dalamnya.{shape} {small}{name}, digambar pada tiap ukuran yang akan masuk ke berkas. Tiap persegi di atas adalah ukuran aslinya di layar ini, di atas papan catur supaya transparansi terlihat sebagai transparansi. Kalau yang 16px cuma noda kelabu, yang dibutuhkan ikonnya adalah gambar yang lebih sederhana, bukan setelan yang lain.{note} {list} piksel juga ditulis, dan tidak ditampilkan di sini karena persegi sebesar itu tidak muat di layar — lagi pula bukan itu yang pernah bermasalah.Menggambar {count}…Menggambar {name}…Selesai.{name} berisi {slots} dan besarnya {size}.{names}, {size} berdua.{count} diubah jadi {n} berkas ikon, {size} seluruhnya.{summary} Sisa set untuk situsnya ada di zip di sebelahnya.{slots}, {size}Dari {name}, {size}.{detail} Taruh di dalam bundel aplikasi Mac, atau pasang sebagai ikon folder lewat Get Info.{detail} Ditambah {n} berkas lagi untuk sisa set ikonnya.{label} · {detail} · {size}tanpa kompresiUnduh .{kind}-nyaSalinTersalinTerpilih — tekan Ctrl+CIkon. favicon.ico diletakkan di akar situs; peramban meminta alamat itu tanpa diberi tahu, jadi ia tidak butuh <link> sendiri.Nama situs Andatab, untuk peramban yang lebih suka PNG daripada .icobilah markah dan pintasan Windows yang disematkanlayar utama iOS. Digambar buram: iOS mengubah transparansi jadi hitamlayar utama Android, dan ajakan memasanglayar pembuka yang ditampilkan aplikasi web saat mulai jalanikon yang sama di dalam area aman yang dipangkas peluncur adaptifubin yang disematkan di menu Start WindowsSet ikon untuk situs webDibuat di dalam peramban di abox.tools/image-to-ico/ — tidak ada yang diunggah untuk membuatnya, dan tidak ada apa pun tentang berkas-berkas ini yang dikirim ke mana pun.Unggah semua berkas kecuali yang ini dan head.html ke akar situs Anda, supaya mereka menjawab di /favicon.ico, /apple-touch-icon.png dan seterusnya. Jalur di site.webmanifest, browserconfig.xml dan head.html semuanya mengandaikan itu. Kalau berkasnya masuk ke subfolder, sunting ketiga berkas itu supaya cocok.favicon klasik, berisi versi {sizes} pikseldibaca Android dan oleh setiap ajakan menambahkan ke layar utamadibaca oleh ubin yang disematkan di menu Start Windowsmarkah untuk ditempel ke <head> Anda; bukan berkas untuk diunggahIsi nama di site.webmanifest dengan nama situs Anda sebelum diunggah, dan dua warna di dalamnya dengan yang cocok untuk ikonnya.Catatan: tidak ada favicon.ico di sini, karena keluaran .ico dimatikan. Sebuah situs sungguh memerlukannya — itu alamat yang diminta peramban dengan sendirinya.gambar Anda tidak pergi ke mana pun. {total} file dimuat, semuanya milik halaman ini sendiri. {platform}sesuatu menghubungi {hosts}, dan itu tidak pernah dilakukan alat ini. Anggap itu layak diselidiki. {platform}Skrip iklan, pengukuran, dan tombol donasi milik halaman ini dimuat dari {hosts} host; tidak satu pun diberi sebuah gambar atau satu byte darinya.Skrip iklan, pengukuran, dan tombol donasi milik halaman ini dimuat dari {hosts} host; tidak satu pun diberi sebuah gambar atau satu byte darinya.
Apakah ini berhasil?
Apa yang salah?
Terima kasih — ini membantu.
Hanya jawabannya yang dikirim, dan hanya saat Anda menekan tombol. File Anda, namanya, atau apa pun tentangnya tidak pernah dikirim.
# Gambar ke ICO — pembuat favicon serta ikon Windows dan macOS
Satu gambar masuk. Setiap ukuran yang diminta peramban, Windows, atau sebuah Mac, keluar.
> Ubah PNG, JPEG, atau SVG menjadi .ico multi-ukuran yang sungguhan atau .icns macOS di peramban Anda. Favicon, ikon aplikasi Windows, ikon aplikasi Mac, plus file Apple dan Android yang dibutuhkan sebuah situs. Tidak ada yang diunggah.
Halaman ini adalah alat interaktif yang berjalan sepenuhnya di peramban Anda, di https://abox.tools/id/buat-favicon/ — tidak ada yang Anda berikan padanya yang diunggah. Berikut ini semua yang dikatakan halaman tentang alat ini dalam kata-kata; untuk memakainya, buka alamat tersebut.
## gambar Anda **tidak pernah diunggah**. Tidak ada server.
Penskalaannya dan file ikonnya sendiri sama-sama dibuat di peramban Anda sendiri. Gambarnya digambar oleh kanvas yang memang sudah dibawa peramban Anda, dan setiap wadah — `.ico` Windows, `.icns` macOS — dirakit dari piksel itu oleh beberapa ratus baris di `src/ico.js` dan `src/icns.js` yang bisa Anda baca. Alat ini tidak punya fitur jaringan dalam bentuk apa pun — tidak ada yang diambil, tidak ada yang dikirim — dan seandainya pun ada, tidak ada server di ujung lain halaman ini untuk menerima sebuah logo.
- ✗ Tanpa unggah
- ✗ Tanpa akun
- ✗ Tanpa tanda air
- ✓ Jalan tanpa internet
- ✓ Sumber terbuka
## Cara membuat file .ico tanpa mengunggah apa pun
1. **Pilih gambarnya.** Jatuhkan sebuah PNG, JPEG, WebP, atau SVG ke pemilihnya, atau pilih beberapa dan ubah semuanya sekaligus. Yang persegi paling mudah, dan di atas 256 piksel sudah membawa cukup detail untuk setiap ukuran. Peramban membacanya langsung dari disk Anda; tidak ada yang dikirim ke mana pun saat Anda melakukannya.
2. **Pilih file yang Anda butuhkan.** Windows dan sebuah peramban membaca `.ico`; sebuah Mac membaca `.icns` dan sama sekali tidak melihat yang satunya. Centang salah satu, atau keduanya kalau yang Anda buat akan dirilis di keduanya. Sebuah situs web juga meminta gambar Apple, Android, dan ubinnya, dan itulah kotak yang ketiga.
3. **Sebutkan ikonnya untuk apa.** Favicon situs web berukuran 16, 32, dan 48 piksel; aplikasi Windows juga meminta 256; aplikasi yang harus tampak rapi di laptop berkepadatan tinggi meminta ukuran antara yang diminta Windows pada penskalaan 125% dan 150%. Pilih yang cocok dengan pekerjaannya, atau centang sendiri ukurannya. Setiap ukuran di daftar mengatakan apa yang memintanya. Pada `.icns` tidak ada pilihan seperti itu: Apple menetapkan tepat sepuluh slot, dan semuanya masuk.
4. **Urus bentuk dan latarnya.** Sebuah ikon berbentuk persegi dan kebanyakan logo tidak. Isi sisanya; seluruh gambarnya terjaga, dengan ruang di atas dan di bawahnya. Pangkas; bagian tengahnya yang diambil. Regangkan; ia terjepit. Transparansi terjaga sebagai transparansi kecuali Anda memilih sebuah warna untuk duduk di belakangnya.
5. **Lihat yang 16 piksel sebelum Anda mengunduh.** Itulah ukuran yang paling sering dilihat orang dari sebuah ikon, dan di situlah garis tipis dan huruf kecil hilang. Setiap kotak di pratinjaunya digambar dari file Anda pada ukuran sebenarnya. Kalau yang terkecil berupa noda, solusinya bukan setelan lain melainkan gambar yang lebih sederhana.
6. **Ambil file-nya.** Satu .ico berisi setiap ukurannya; kalau itu yang Anda mau, dengan nama `favicon.ico`, karena itulah alamat yang dicari peramban. Sebuah .icns di sebelahnya kalau Anda mencentangnya; siap masuk ke sebuah paket aplikasi Mac. Centang juga set situs webnya, dan dapatkan gambar Apple, Android, dan ubin Windows-nya, manifesnya, serta blok HTML untuk ditempelkan ke halaman Anda. Lebih dari satu file turun sebagai satu zip.
## Versi lebih lengkap
[Cara membuat favicon yang tetap terbaca pada enam belas piksel](https://abox.tools/id/panduan/buat-favicon/): Ukuran apa saja yang sebenarnya dibutuhkan sebuah favicon.ico, file tambahan apa yang diminta iPhone, Android, dan sebuah Mac, dan kenapa logo yang berhasil di sebuah poster lenyap pada enam belas piksel.
## Juga ada di dalam kotak
- [Gambar ke Data URI](https://abox.tools/id/gambar-ke-base64/): Seluruh gambar sebagai satu baris teks. Tempelkan langsung ke CSS atau HTML.
- [SVG ke Gambar](https://abox.tools/id/svg-ke-png/): Sebutkan ukurannya. Sebuah vektor tidak punya ukuran sendiri untuk hilang.
- [Gambar ke SVG](https://abox.tools/id/gambar-ke-svg/): Satu bentuk, satu garis luar. Tunjuk saja yang seharusnya tidak ada.
- [Pembanding Tinggi Badan](https://abox.tools/id/bandingkan-tinggi-badan/): Ketik tingginya, bawa gambarnya. Tidak ada yang dikirim untuk menggambarnya.
## Pertanyaan
### Apakah gambar saya diunggah ke suatu tempat?
Tidak. Gambar didekode dan diskalakan di perangkat keras Anda sendiri oleh peramban Anda sendiri; .ico-nya lalu dirakit dari piksel itu oleh kode yang disajikan dari halaman ini. Alat ini tidak punya fitur jaringan dalam bentuk apa pun — ia tidak pernah mengambil apa pun dan tidak pernah mengirim apa pun — dan `Content-Security-Policy` halaman ini menyebut satu per satu setiap alamat yang boleh dihubunginya, dan tidak satu pun milik situs ini.
### Ukuran apa saja yang seharusnya ada di dalam favicon.ico?
16, 32, dan 48. Itu bukan soal selera: 16 adalah yang digambar peramban di sebuah tab; 32 adalah yang dipakai Windows untuk pintasan desktop dan yang dipakai beberapa peramban untuk markah; dan 48 adalah ukuran ketika Google membaca ikon sebuah situs. Yang lebih besar seharusnya berada di sebuah PNG di sebelah .ico-nya, bukan di dalamnya — dan itulah yang dihasilkan set situs web di sini.
### Ukuran apa saja yang dibutuhkan ikon aplikasi Windows?
16, 32, 48, dan 256; itu pula yang dimuat app.ico bawaan milik Visual Studio sendiri. 16 untuk bilah judul dan tampilan Explorer kecil, 32 untuk desktop dan bilah tugas, 48 untuk ikon sedang di Explorer, dan 256 untuk menu mulai serta tampilan sangat besar. Di layar berkepadatan tinggi, Windows juga meminta 20, 24, 40, 64, dan 96, dan kalau tidak ada ia mengambil sampel ulang dari ukuran terdekat yang dimilikinya — pilihan siap pakai "setiap skala" memasukkannya juga.
### Kenapa file-nya lebih besar daripada gambar yang saya mulai?
Karena sebuah .ico bukan satu gambar melainkan beberapa, dan yang kecil disimpan tanpa dikompres supaya segalanya bisa membacanya. Entri 32x32 selalu tepat 4.264 byte apa pun isinya, dan entri 256x256 tanpa kompresi berukuran 264 KB — itulah sebabnya ukuran di atas 64 disimpan sebagai PNG secara bawaan. Memilih "PNG untuk setiap ukuran" menghasilkan file terkecil yang mungkin; memilih tanpa kompresi untuk setiap ukuran menghasilkan yang paling kompatibel.
### Apa bedanya entri PNG dan entri tanpa kompresi?
Hanya bagaimana pikselnya disimpan di dalam .ico. Entri tanpa kompresi adalah tata letak Windows yang asli — sebuah header bitmap, piksel terbalik, dan masker transparansi satu bit — dan setiap versi Windows yang pernah dirilis bisa membacanya. Entri PNG adalah seluruh file PNG yang dimampatkan ke dalam ikonnya; ia tiga sampai sepuluh kali lebih kecil pada ukuran besar tapi hanya dipahami sejak Windows Vista. Bawaannya memakai masing-masing di tempat ia menang: tanpa kompresi sampai 64 piksel, PNG di atasnya.
### Bisakah ia membuat ikon lebih besar dari 256 piksel?
Tidak, dan tidak ada yang bisa. Formatnya menyimpan setiap sisi dalam satu byte dan 0 punya arti sendiri — ia berarti 256. Itulah langit-langitnya; jadi .ico yang memuat gambar 512 piksel bukan ikon yang lebih besar melainkan ikon yang rusak. Kalau Anda butuh 512, Anda butuh sebuah PNG, dan itulah yang disertakan set situs web untuk Android dan layar pembuka sebuah aplikasi web.
### Apakah ia menjaga transparansi?
Ya, pada kedua jenis entri; ia juga menulis masker satu bit yang lama di sebelah kanal alfanya, sehingga perangkat lunak yang terlalu tua untuk membaca alfa tetap memotong ikonnya alih-alih menggambar kotak hitam. Satu-satunya file yang sengaja dibuat buram adalah ikon sentuh Apple di dalam set situs web: iOS menaruhnya di ubinnya sendiri dan mengubah transparansi menjadi hitam, jadi ia diratakan ke warna latar Anda, yang secara bawaan putih.
### Logo saya lebar, berbentuk kata. Apa yang terjadi padanya?
Sesuatu harus terjadi, karena sebuah ikon berbentuk persegi. Mengisi sisanya menjaga semuanya dan mengecilkannya — logo kata yang diisi ke dalam persegi 16 piksel tingginya sekitar tiga piksel dan tidak terbaca. Memangkas ke tengah biasanya memberi hasil lebih baik: keluarkan simbolnya dari komposisinya dan pakai itu, seperti yang dilakukan hampir setiap merek untuk faviconnya. Pratinjaunya menunjukkan yang mana yang selamat sebelum Anda mengunduh apa pun.
### Apa isi set situs webnya, dan apakah saya butuh semuanya?
Tujuh PNG, sebuah manifes aplikasi web, sebuah browserconfig.xml, dan sebuah blok HTML untuk ditempelkan. Anda memang membutuhkannya, karena sebuah .ico mencakup peramban dan Windows dan tidak lebih: layar utama iPhone membaca PNG 180 piksel dengan namanya sendiri, Android dan setiap ajakan pemasangan membaca sebuah manifes, dan ubin yang disematkan ke menu mulai membaca sebuah XML. Tidak satu pun dari itu melihat ke dalam sebuah .ico. Semuanya dihasilkan di sini, di mesin Anda, dan di dalam zip-nya ada catatan yang menyebutkan setiap file itu untuk apa.
### Bisakah ia membuat ikon macOS juga?
Bisa — centang *ikon macOS*; dapatkan sebuah `.icns` di sebelah `.ico`-nya atau sebagai gantinya. Ia wadah lain untuk gagasan yang sama, dan kedua sistem tidak membaca punya yang lain: Windows mau .ico, paket aplikasi Mac mau .icns. Di sana ukuran bukan sebuah pilihan, karena Apple menerbitkan tepat sepuluh slot — 16, 32, 64, 128, 256, 512, dan 1024 piksel; tiga di antaranya muncul dua kali sebagai versi Retina dari ukuran di bawahnya. Semuanya masuk; mereka diambil dari tujuh gambar, dan itulah sebabnya sebuah .icns adalah file yang lebih besar.
### Bagaimana saya memakai file .icns-nya?
Untuk sebuah aplikasi, ia ditaruh di dalam paketnya di `YourApp.app/Contents/Resources/` dan dinamai di `Info.plist` di bawah `CFBundleIconFile`; setiap alat pengemas Mac punya kolom untuk itu. Untuk hal lain, pilih file-nya di Finder, tekan Command-C, lalu buka Get Info pada folder atau image disk yang ingin Anda ubah, klik ikon kecil di kiri atas, dan tekan Command-V.
### Apakah .icns-nya sama dengan yang dihasilkan iconutil?
Sepuluh slot yang sama dengan empat huruf tipe yang sama dan PNG di masing-masingnya; itu pula yang dihasilkan `iconutil` dari sebuah folder `.iconset`. Satu-satunya perbedaan yang disengaja: alat Apple juga menulis elemen `TOC` , sebuah direktori berisi tipe dan panjang yang menyusul. Itu sebuah pengoptimalan, bukan bagian dari formatnya — tanpanya sebuah pembaca menelusuri elemennya dari awal ke akhir dan sampai pada jawaban yang sama — dan direktori yang salah lebih buruk daripada tidak ada direktori; karena itu ia ditinggalkan.
### Bisakah saya mengubah beberapa gambar sekaligus?
Bisa. Setiap gambar di daftar menjadi .ico-nya sendiri dengan setelan yang sama, dan kumpulannya turun sebagai satu zip berisi satu folder per gambar — kalau tidak, keduanya akan bernama favicon.ico dan yang satu akan menimpa yang lain. Setiap keluaran yang Anda centang dihasilkan untuk setiap gambar. Klik baris mana pun untuk menaruh gambar itu di pratinjaunya.
### Apakah gratis, dan apakah saya perlu akun?
Gratis; tidak ada akun, tidak ada masuk, tidak ada masa uji coba, tidak ada tanda air. Tidak ada batas jumlah atau ukuran file-nya juga, karena tidak ada server yang membayarnya — pekerjaannya terjadi di perangkat Anda sendiri. Situs ini memasang iklan, dan itulah yang membiayainya; iklan tidak diberi apa pun tentang gambar Anda.
### Apakah jalan tanpa internet?
Ya. Muat halamannya sekali, lalu putuskan koneksi internet, dan ia tetap bekerja. Itu juga cara paling sederhana untuk membuktikan tidak ada yang diunggah: alat yang mengirim logo Anda ke tempat lain untuk diubah akan berhenti begitu Anda mencabut koneksi.
## Cara memverifikasi klaim privasi ini
- **Logo Anda tidak punya tujuan ke mana pun.** Content-Security-Policy menyebut satu per satu setiap alamat yang boleh dihubungi halaman ini, dan tidak satu pun milik situs ini. Tidak ada titik akhir di sini tempat file Anda bisa dikumpulkan, dan tidak ada kode yang akan mengirimnya seandainya ada.
- **Tidak ada di sini yang mengambil apa pun.** Tidak ada `fetch`, tidak ada `XMLHttpRequest`, dan tidak ada `sendBeacon` di mana pun di dalam `src/`. Penskalaannya adalah sebuah `drawImage` ke sebuah kanvas; setiap ikon adalah sebuah header yang ditulis di depan piksel itu, di halaman ini, oleh `src/ico.js` atau `src/icns.js`.
- **File itu digambarkan dari byte-nya sendiri.** Daftar ukuran yang ditampilkan di sebelah ikon yang sudah jadi bukan daftar ukuran yang Anda minta. Ia dibaca kembali dari file yang baru saja ditulis oleh `readIcoDirectory` atau `readIcnsElements`; artinya kalau sebuah penulis bertentangan dengan setelannya, halaman ini akan mengatakannya, dan Anda tidak perlu mengetahuinya ketika Windows tidak menggambar apa pun dan macOS menggambar kertas kosong.
- **Apa yang dimuat Google, dan apa yang tidak diberikan kepadanya.** Skrip iklan dan pengukuran berasal dari Google, dan tombol donasi dari Buy Me a Coffee. Tidak satu pun diberi apa pun tentang gambar Anda. Setiap baris yang membaca, menskalakan, atau menulis sebuah file disajikan dari asal ini dan terdaftar di repositori.
- **Jalan tanpa internet.** Putuskan koneksi jaringan dan alat ini tidak berubah, karena sejak awal memang tidak ada langkah jaringan di dalamnya. Itulah bukti yang paling sederhana.
**Periksa sendiri.** Anda tidak perlu memercayai semua ini begitu saja. Halaman ini dihasilkan dari templat dan konfigurasi di repositori oleh skrip build yang bisa Anda baca dan jalankan sendiri, dan hasilnya dikirim ke cabang `dist` — jadi Anda bisa membandingkan apa yang disajikan dengan apa yang dihasilkan oleh build dari kode sumbernya: https://github.com/A-Box-of-Tools/website
File yang layak dibaca lebih dulu adalah `config/site.toml` untuk Content-Security-Policy, `src/ico.js` dan `src/icns.js` untuk dua format ikonnya — direktori, entri, dan maskernya di yang satu, sepuluh slot bernama milik Apple di yang lain — dan `src/sizes.js` untuk asal setiap ukuran di halaman ini.
Cara membuat file .ico tanpa mengunggah apa pun
Pilih gambarnya. Jatuhkan sebuah PNG, JPEG, WebP, atau SVG ke pemilihnya, atau pilih beberapa dan ubah semuanya sekaligus. Yang persegi paling mudah, dan di atas 256 piksel sudah membawa cukup detail untuk setiap ukuran. Peramban membacanya langsung dari disk Anda; tidak ada yang dikirim ke mana pun saat Anda melakukannya.
Pilih file yang Anda butuhkan. Windows dan sebuah peramban membaca .ico; sebuah Mac membaca .icns dan sama sekali tidak melihat yang satunya. Centang salah satu, atau keduanya kalau yang Anda buat akan dirilis di keduanya. Sebuah situs web juga meminta gambar Apple, Android, dan ubinnya, dan itulah kotak yang ketiga.
Sebutkan ikonnya untuk apa. Favicon situs web berukuran 16, 32, dan 48 piksel; aplikasi Windows juga meminta 256; aplikasi yang harus tampak rapi di laptop berkepadatan tinggi meminta ukuran antara yang diminta Windows pada penskalaan 125% dan 150%. Pilih yang cocok dengan pekerjaannya, atau centang sendiri ukurannya. Setiap ukuran di daftar mengatakan apa yang memintanya. Pada .icns tidak ada pilihan seperti itu: Apple menetapkan tepat sepuluh slot, dan semuanya masuk.
Urus bentuk dan latarnya. Sebuah ikon berbentuk persegi dan kebanyakan logo tidak. Isi sisanya; seluruh gambarnya terjaga, dengan ruang di atas dan di bawahnya. Pangkas; bagian tengahnya yang diambil. Regangkan; ia terjepit. Transparansi terjaga sebagai transparansi kecuali Anda memilih sebuah warna untuk duduk di belakangnya.
Lihat yang 16 piksel sebelum Anda mengunduh. Itulah ukuran yang paling sering dilihat orang dari sebuah ikon, dan di situlah garis tipis dan huruf kecil hilang. Setiap kotak di pratinjaunya digambar dari file Anda pada ukuran sebenarnya. Kalau yang terkecil berupa noda, solusinya bukan setelan lain melainkan gambar yang lebih sederhana.
Ambil file-nya. Satu .ico berisi setiap ukurannya; kalau itu yang Anda mau, dengan nama favicon.ico, karena itulah alamat yang dicari peramban. Sebuah .icns di sebelahnya kalau Anda mencentangnya; siap masuk ke sebuah paket aplikasi Mac. Centang juga set situs webnya, dan dapatkan gambar Apple, Android, dan ubin Windows-nya, manifesnya, serta blok HTML untuk ditempelkan ke halaman Anda. Lebih dari satu file turun sebagai satu zip.
Versi lebih lengkap
Cara membuat favicon yang tetap terbaca pada enam belas pikselUkuran apa saja yang sebenarnya dibutuhkan sebuah favicon.ico, file tambahan apa yang diminta iPhone, Android, dan sebuah Mac, dan kenapa logo yang berhasil di sebuah poster lenyap pada enam belas piksel.
Tidak. Gambar didekode dan diskalakan di perangkat keras Anda sendiri oleh peramban Anda sendiri; .ico-nya lalu dirakit dari piksel itu oleh kode yang disajikan dari halaman ini. Alat ini tidak punya fitur jaringan dalam bentuk apa pun — ia tidak pernah mengambil apa pun dan tidak pernah mengirim apa pun — dan Content-Security-Policy halaman ini menyebut satu per satu setiap alamat yang boleh dihubunginya, dan tidak satu pun milik situs ini.
Ukuran apa saja yang seharusnya ada di dalam favicon.ico?
16, 32, dan 48. Itu bukan soal selera: 16 adalah yang digambar peramban di sebuah tab; 32 adalah yang dipakai Windows untuk pintasan desktop dan yang dipakai beberapa peramban untuk markah; dan 48 adalah ukuran ketika Google membaca ikon sebuah situs. Yang lebih besar seharusnya berada di sebuah PNG di sebelah .ico-nya, bukan di dalamnya — dan itulah yang dihasilkan set situs web di sini.
Ukuran apa saja yang dibutuhkan ikon aplikasi Windows?
16, 32, 48, dan 256; itu pula yang dimuat app.ico bawaan milik Visual Studio sendiri. 16 untuk bilah judul dan tampilan Explorer kecil, 32 untuk desktop dan bilah tugas, 48 untuk ikon sedang di Explorer, dan 256 untuk menu mulai serta tampilan sangat besar. Di layar berkepadatan tinggi, Windows juga meminta 20, 24, 40, 64, dan 96, dan kalau tidak ada ia mengambil sampel ulang dari ukuran terdekat yang dimilikinya — pilihan siap pakai "setiap skala" memasukkannya juga.
Kenapa file-nya lebih besar daripada gambar yang saya mulai?
Karena sebuah .ico bukan satu gambar melainkan beberapa, dan yang kecil disimpan tanpa dikompres supaya segalanya bisa membacanya. Entri 32x32 selalu tepat 4.264 byte apa pun isinya, dan entri 256x256 tanpa kompresi berukuran 264 KB — itulah sebabnya ukuran di atas 64 disimpan sebagai PNG secara bawaan. Memilih "PNG untuk setiap ukuran" menghasilkan file terkecil yang mungkin; memilih tanpa kompresi untuk setiap ukuran menghasilkan yang paling kompatibel.
Apa bedanya entri PNG dan entri tanpa kompresi?
Hanya bagaimana pikselnya disimpan di dalam .ico. Entri tanpa kompresi adalah tata letak Windows yang asli — sebuah header bitmap, piksel terbalik, dan masker transparansi satu bit — dan setiap versi Windows yang pernah dirilis bisa membacanya. Entri PNG adalah seluruh file PNG yang dimampatkan ke dalam ikonnya; ia tiga sampai sepuluh kali lebih kecil pada ukuran besar tapi hanya dipahami sejak Windows Vista. Bawaannya memakai masing-masing di tempat ia menang: tanpa kompresi sampai 64 piksel, PNG di atasnya.
Bisakah ia membuat ikon lebih besar dari 256 piksel?
Tidak, dan tidak ada yang bisa. Formatnya menyimpan setiap sisi dalam satu byte dan 0 punya arti sendiri — ia berarti 256. Itulah langit-langitnya; jadi .ico yang memuat gambar 512 piksel bukan ikon yang lebih besar melainkan ikon yang rusak. Kalau Anda butuh 512, Anda butuh sebuah PNG, dan itulah yang disertakan set situs web untuk Android dan layar pembuka sebuah aplikasi web.
Apakah ia menjaga transparansi?
Ya, pada kedua jenis entri; ia juga menulis masker satu bit yang lama di sebelah kanal alfanya, sehingga perangkat lunak yang terlalu tua untuk membaca alfa tetap memotong ikonnya alih-alih menggambar kotak hitam. Satu-satunya file yang sengaja dibuat buram adalah ikon sentuh Apple di dalam set situs web: iOS menaruhnya di ubinnya sendiri dan mengubah transparansi menjadi hitam, jadi ia diratakan ke warna latar Anda, yang secara bawaan putih.
Logo saya lebar, berbentuk kata. Apa yang terjadi padanya?
Sesuatu harus terjadi, karena sebuah ikon berbentuk persegi. Mengisi sisanya menjaga semuanya dan mengecilkannya — logo kata yang diisi ke dalam persegi 16 piksel tingginya sekitar tiga piksel dan tidak terbaca. Memangkas ke tengah biasanya memberi hasil lebih baik: keluarkan simbolnya dari komposisinya dan pakai itu, seperti yang dilakukan hampir setiap merek untuk faviconnya. Pratinjaunya menunjukkan yang mana yang selamat sebelum Anda mengunduh apa pun.
Apa isi set situs webnya, dan apakah saya butuh semuanya?
Tujuh PNG, sebuah manifes aplikasi web, sebuah browserconfig.xml, dan sebuah blok HTML untuk ditempelkan. Anda memang membutuhkannya, karena sebuah .ico mencakup peramban dan Windows dan tidak lebih: layar utama iPhone membaca PNG 180 piksel dengan namanya sendiri, Android dan setiap ajakan pemasangan membaca sebuah manifes, dan ubin yang disematkan ke menu mulai membaca sebuah XML. Tidak satu pun dari itu melihat ke dalam sebuah .ico. Semuanya dihasilkan di sini, di mesin Anda, dan di dalam zip-nya ada catatan yang menyebutkan setiap file itu untuk apa.
Bisakah ia membuat ikon macOS juga?
Bisa — centang ikon macOS; dapatkan sebuah .icns di sebelah .ico-nya atau sebagai gantinya. Ia wadah lain untuk gagasan yang sama, dan kedua sistem tidak membaca punya yang lain: Windows mau .ico, paket aplikasi Mac mau .icns. Di sana ukuran bukan sebuah pilihan, karena Apple menerbitkan tepat sepuluh slot — 16, 32, 64, 128, 256, 512, dan 1024 piksel; tiga di antaranya muncul dua kali sebagai versi Retina dari ukuran di bawahnya. Semuanya masuk; mereka diambil dari tujuh gambar, dan itulah sebabnya sebuah .icns adalah file yang lebih besar.
Bagaimana saya memakai file .icns-nya?
Untuk sebuah aplikasi, ia ditaruh di dalam paketnya di YourApp.app/Contents/Resources/ dan dinamai di Info.plist di bawah CFBundleIconFile; setiap alat pengemas Mac punya kolom untuk itu. Untuk hal lain, pilih file-nya di Finder, tekan Command-C, lalu buka Get Info pada folder atau image disk yang ingin Anda ubah, klik ikon kecil di kiri atas, dan tekan Command-V.
Apakah .icns-nya sama dengan yang dihasilkan iconutil?
Sepuluh slot yang sama dengan empat huruf tipe yang sama dan PNG di masing-masingnya; itu pula yang dihasilkan iconutil dari sebuah folder .iconset. Satu-satunya perbedaan yang disengaja: alat Apple juga menulis elemen TOC , sebuah direktori berisi tipe dan panjang yang menyusul. Itu sebuah pengoptimalan, bukan bagian dari formatnya — tanpanya sebuah pembaca menelusuri elemennya dari awal ke akhir dan sampai pada jawaban yang sama — dan direktori yang salah lebih buruk daripada tidak ada direktori; karena itu ia ditinggalkan.
Bisakah saya mengubah beberapa gambar sekaligus?
Bisa. Setiap gambar di daftar menjadi .ico-nya sendiri dengan setelan yang sama, dan kumpulannya turun sebagai satu zip berisi satu folder per gambar — kalau tidak, keduanya akan bernama favicon.ico dan yang satu akan menimpa yang lain. Setiap keluaran yang Anda centang dihasilkan untuk setiap gambar. Klik baris mana pun untuk menaruh gambar itu di pratinjaunya.
Apakah gratis, dan apakah saya perlu akun?
Gratis; tidak ada akun, tidak ada masuk, tidak ada masa uji coba, tidak ada tanda air. Tidak ada batas jumlah atau ukuran file-nya juga, karena tidak ada server yang membayarnya — pekerjaannya terjadi di perangkat Anda sendiri. Situs ini memasang iklan, dan itulah yang membiayainya; iklan tidak diberi apa pun tentang gambar Anda.
Apakah jalan tanpa internet?
Ya. Muat halamannya sekali, lalu putuskan koneksi internet, dan ia tetap bekerja. Itu juga cara paling sederhana untuk membuktikan tidak ada yang diunggah: alat yang mengirim logo Anda ke tempat lain untuk diubah akan berhenti begitu Anda mencabut koneksi.