dibina untuk hari pelancaran
Tukar gambar kepada ikon secara online
OneImageTool mengubah logo, avatar, maskot, atau tanda produk menjadi fail ikon yang diperlukan oleh laman web atau aplikasi sebenar. Muat naik gambar, bentukkannya menjadi persegi yang rapi, pratonton pada tab pelayar dan skrin utama telefon, kemudian simpan favicon.ico, ikon PNG, fail Apple Touch Icon, dan manifes PWA. Jika sumbernya masih perlu dirapikan, pangkas menjadi persegi dahulu, atau kompres eksport bersaiz berlebihan — kedua-dua alat itu turut berjalan dalam pelayar anda.
Semuanya berjalan dalam pelayar anda. Itu penting apabila sumbernya ialah logo pelanggan yang persendirian, tanda aplikasi yang belum dilancarkan, atau idea pantas yang anda tidak mahu hantar ke pelayan orang lain. Tetapkan padding, warna latar, dan radius sudut sambil melihat pratonton peranti secara langsung.
Favicon untuk laman web
Bina ikon tab pelayar daripada sumber yang sama. Gunakan Pangkas untuk tanda yang tegas, atau Padan dengan padding apabila logo perlukan ruang bernafas.
ICO pintasan
Muat turun ICO berbilang saiz untuk sokongan favicon lama dan pintasan desktop. Saiz yang lebih kecil ditala supaya kekal tajam dalam pratonton tab.
Ikon aplikasi dan PWA
Hasilkan saiz PNG yang lebih besar untuk skrin utama dan gesaan pemasangan. Pakej ini merangkumi manifes web praconfigur dan petikan HTML.
Pratonton berbilang peranti
Tidak seperti pratonton tab sahaja, OneImageTool memaparkan mockup skrin utama iOS, banner pemasangan Android, dan jubin Windows — semuanya dikemas kini secara langsung sambil anda menyunting.
satu muat turun, banyak permukaan
Apa yang dihasilkan oleh alat gambar ke ikon
Aliran kerja yang baik tidak memberi anda satu grafik kecil sahaja. Halaman pendaratan, dokumen, aplikasi, PWA, dan projek sampingan perlukan beberapa aset serta petikan HTML. Dapatkan set yang serasi pelayar dalam satu ZIP.
Pakej ini merangkumi favicon.ico, saiz PNG yang lazim, manifes web, petikan HTML, dan README — merangkumi persiapan laman web dan PWA yang biasa.
- favicon.icoICO
- favicon-16x16.png … 512x512.pngPNG
- apple-touch-icon.pngiOS
- android-chrome-192x192.pngPWA
- site.webmanifestJSON
- favicon-html.txtHTML
- README.txtDOC
lima gerakan kecil
Cara menggunakan penukar gambar ke ikon
Muat naik
Letakkan PNG, JPG, WebP atau SVG. Sumber persegi paling sesuai, tetapi gambar melebar pun tiada masalah.
Bentuk
Pilih Padan, Pangkas atau Regang. Lihat pratonton pelayar, iOS dan Android dikemas kini serta-merta.
Beri gaya
Tambah padding, bulatkan sudut, kekalkan ketelusan, atau pilih jubin latar solid.
Pratonton
Periksa mockup tab 16px dan skrin utama. Jika ikon tab tidak terbaca, tambah padding atau latar solid.
Muat turun
Simpan pakej ikon penuh bersama favicon.ico, fail PNG, manifes, petikan HTML, dan README.
kecil hingga sedia pasang
Saiz terbaik untuk keluaran gambar ke ikon
Ikon muncul di tempat yang amat berbeza. Tab pelayar perlukan simbol tegas yang hampir tiada perincian. Skrin pemasangan PWA boleh memaparkan tanda yang lebih besar. Penukar ini membina setiap saiz lazim daripada satu gambar sumber.
| Saiz | Penggunaan lazim | Pratonton dalam alat | Tip |
|---|---|---|---|
| 16×16 | Tab pelayar, favicon lama | Mockup tab pelayar | Gunakan silhuet kuat, perincian minimum |
| 32×32 | PNG favicon moden, tab HD | Grid saiz | Lalai praktikal untuk favicon HTML |
| 48×48 | Pintasan desktop, jubin Windows | Mockup jubin Windows | Kekalkan bentuk di tengah |
| 180×180 | Apple Touch Icon | Mockup skrin utama iOS | Latar solid selalunya nampak lebih bersih pada iOS |
| 192×192 | Android Chrome, PWA | Mockup pemasangan Android | Digunakan dalam ikon manifest.json |
| 512×512 | Splash PWA, UI pemasangan | Grid saiz | Mulakan daripada sumber berkualiti tinggi |
pastikan versi kecil tetap jelas
Senarai semak reka bentuk sebelum muat turun
Favicon bersaiz kecil — garis halus, teks kecil, foto yang sibuk, dan tangkapan skrin selalunya menjadi kabur. Gunakan pratonton tab dan skrin utama secara langsung untuk menguji kebolehbacaan sebelum mengeksport.
Jika pratonton tab 16px sukar dibaca, cuba pangkasan yang lebih tegas, padding yang lebih banyak, atau latar solid. Bentuk yang berpusat dengan kontras jelas bertahan jauh lebih baik semasa lonjakan daripada gambar besar kepada ikon.
Logo ringkas, maskot rata, tanda persegi, huruf awal yang tegas, dan simbol berkontras tinggi.
Foto berperincian, garis luar halus, tangkapan skrin, perkataan panjang, dan tanda yang menyentuh tepi.
tampal dan lancarkan
Di mana meletakkan fail ikon yang dihasilkan
Untuk laman statik, letakkan fail di root awam atau folder aset yang disalin ke pengeluaran. Tampal petikan HTML di dalam <head>. Kekalkan URL favicon supaya stabil selepas pelancaran agar penanda buku dan pintasan terpasang mengekalkan ikon yang sama.
Cache favicon berdegil semasa pengujian — gunakan tetingkap persendirian atau tukar nama fail semasa bereksperimen.
public/
├── favicon.ico
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest