Ubah SVG Jadi Ikon

Q: Apa bedanya halaman SVG jadi ikon ini dengan SVG ke ICO?

[SVG ke ICO](/svg-to-ico) berfokus pada satu file .ico untuk favicon dan Windows. Halaman ini mencakup setiap tempat ikon dipakai, termasuk ICNS macOS dan PNG berukuran tetap yang diminta Android, iOS, dan toko aplikasi.

Satu logo vektor bisa mengisi setiap slot ikon yang Anda miliki: favicon, shortcut Windows, aplikasi Mac, dan ikon peluncur di ponsel. Halaman ini dimulai dari ICO multi-ukuran dan memungkinkan Anda beralih ke ICNS atau PNG untuk platform lainnya.

atau jatuhkan file JPG, JPEG, JPE … di sini ·

Maks. 95 MB per file· Hingga 20 file· Dihapus setelah 30 menit

Keluaran

Konversi ke

File diproses di server kami dan dihapus setelah 30 menit.

Cara menggunakan alat ini

1
Unggah SVG persegi
Tambahkan SVG simbol Anda, idealnya dengan viewBox persegi. Anda bisa menambahkan hingga 20 file sekaligus, misalnya varian terang dan gelap.
2
Pilih format ikon
ICO dengan Ukuran ikon pada Semua ukuran (16–256) sudah terpilih. Pilih ICNS di Konversi ke untuk macOS, atau PNG dengan lebar di Ubah ukuran gambar keluaran untuk ikon ponsel atau toko aplikasi.
3
Konversi dan tempatkan file
Tekan Konversi ke ICO (labelnya mengikuti format yang Anda pilih), unduh, lalu letakkan setiap file di tempat yang diharapkan platformnya.

Tidak ada satu format ikon untuk semua. Windows dan browser memakai ICO, macOS memakai ICNS, dan ponsel memakai kumpulan PNG. Memulai dari SVG berarti semuanya digambar baru dari vektor, tajam di setiap ukuran.

SVG jadi ikon: satu vektor, tiga jenis file ikon

File ikon adalah wadah berisi bitmap kecil, bukan vektor. Sistem operasi memilih bitmap yang paling mendekati ukuran yang dibutuhkan, jadi ikon yang baik memiliki beberapa bitmap, masing-masing dirender untuk kisinya sendiri.

Preset ICO di halaman ini menulis satu file dengan setiap ukuran dari 16 hingga 256 px, yang mencakup favicon.ico dan shortcut Windows. Ganti Konversi ke ke ICNS untuk wadah ikon Apple, atau ke PNG untuk ukuran tunggal yang diminta Android, iOS, dan toko aplikasi.

Tabel berikut mencantumkan ketentuan yang dipublikasikan platform besar untuk slot ikon mereka.

File ikon yang diharapkan setiap platform
Organisasi	Persyaratan	Sumber
Desktop dan taskbar Windows	ICO dengan beberapa ukuran, termasuk 16, 32, 48, dan 256 px	—
Favicon situs web	favicon.ico di root situs dengan 16, 32, dan 48 px; PNG 180 × 180 px untuk apple-touch-icon	—
Ikon aplikasi macOS	ICNS atau katalog aset Xcode, ukuran hingga 1024 × 1024 px	—
Listing Google Play Store	PNG 32-bit 512 × 512 px, maksimal 1.024 KB	—
Apple App Store	PNG 1024 × 1024 px tanpa transparansi	—

SVG

Scalable Vector Graphics

SVG adalah format vektor berbasis XML yang distandardisasi oleh W3C pada 2001. Alih-alih piksel, format ini menggambarkan bentuk, path, dan teks, sehingga tetap tajam di ukuran berapa pun dan biasanya sangat kecil untuk logo dan ikon. SVG mendukung transparansi, gaya CSS, skrip, dan animasi, dan setiap browser merendernya secara native. SVG tidak cocok untuk foto, dan ilustrasi yang kompleks bisa menjadi lambat dirender. Illustrator, Inkscape, Figma, dan browser dapat membuka serta mengeditnya.

Kompresi: –
Transparansi: Ya
Animasi: Ya
Diperkenalkan: 2001 · W3C

Konverter SVG

ICO

Ikon Windows

ICO adalah format ikon Microsoft yang digunakan untuk ikon program Windows dan favicon situs web. Satu file .ico dapat berisi beberapa gambar dengan ukuran berbeda, seperti 16×16, 32×32, 48×48, dan 256×256 piksel, sehingga sistem dapat memilih yang paling sesuai. Setiap gambar dapat disimpan sebagai bitmap atau data PNG dan mendukung transparansi alfa penuh. ICO tidak ditujukan untuk foto atau karya grafis berukuran besar. Browser, Windows, dan sebagian besar editor ikon dapat membacanya.

Kompresi: Lossless
Transparansi: Ya
Animasi: Tidak
Diperkenalkan: Microsoft

Konverter ICO

Orang mencari SVG ke ikon ketika mereka punya satu logo vektor dan beberapa platform untuk dilayani, masing-masing dengan wadah ikonnya sendiri, dari favicon.ico di situs web hingga ICNS di Mac dan PNG berukuran tertentu di toko aplikasi.

Ubah SVG jadi file ikon untuk Windows, Mac, Android, dan iOS

Pertahankan ICO dan Ukuran ikon pada Semua ukuran. Ganti nama hasilnya menjadi favicon.ico untuk root situs web, atau arahkan dialog Change Icon pada shortcut Windows ke file tersebut.

Satu .ico melayani tab, bookmark, dan taskbar
Tambahkan PNG 180 px untuk bookmark layar utama iPhone

Merancang SVG yang tetap terbaca pada 16 px

Ikon 16 × 16 px hanya memiliki total 256 piksel. Sebagian besar merek menyimpan simbol ikon terpisah, sering kali hanya lambang atau satu huruf, dengan bentuk tebal dan sedikit warna; jika milik Anda belum ada, buat salinan SVG yang disederhanakan khusus untuk ikon.

Periksa viewBox sebelum mengonversi. viewBox yang lebar menghasilkan ikon dengan pita kosong di atas dan di bawah simbol, jadi potong menjadi persegi terlebih dahulu; panduan memotong gambar ke rasio tertentu membahas potongan persegi, dan SVG ke PNG memberikan pratinjau besar yang cepat untuk menilai desainnya.

Tanya jawab SVG jadi ikon

Apa bedanya halaman SVG jadi ikon ini dengan SVG ke ICO?

SVG ke ICO berfokus pada satu file .ico untuk favicon dan Windows. Halaman ini mencakup setiap tempat ikon dipakai, termasuk ICNS macOS dan PNG berukuran tetap yang diminta Android, iOS, dan toko aplikasi.

Format ikon apa yang dipakai setiap sistem operasi?

Windows membaca ICO, macOS membaca ICNS atau katalog aset yang dibuat di Xcode, sedangkan Android dan iOS menerima gambar PNG yang disediakan pada ukuran piksel tetap.

Bisakah saya mendapatkan semua ukuran ikon PNG aplikasi dari SVG dalam sekali konversi?

Tidak. Satu PNG memuat satu ukuran, sehingga setiap konversi menulis satu lebar. Atur Ubah ukuran gambar keluaran ke satu ukuran, konversi, lalu ganti angkanya dan konversi lagi; setiap ukuran digambar tajam dari vektor.

Apakah ICNS dari halaman ini mencakup ikon Mac Retina?

File berisi ukuran dari 16 hingga 256 px. Ikon aplikasi macOS terkini juga menyertakan entri 512 px dan 1024 px untuk layar Retina, yang dibuat Xcode atau iconutil milik Apple dari PNG; ekspor keduanya sebagai PNG di sini lalu tambahkan ke set.

Haruskah ikon dari SVG mempertahankan latar transparan?

Untuk ICO, ICNS, dan layer ikon peluncur Android, ya: transparansi memungkinkan sistem menggambar latarnya sendiri. Ikon App Store iOS adalah pengecualian; Apple menolak ikon pemasaran 1024 px yang memiliki kanal alfa, jadi beri PNG itu latar solid di SVG.

Mengapa logo yang detail berubah menjadi gumpalan saat dijadikan ikon kecil?

Pada 16 atau 32 px tidak ada ruang untuk garis tipis atau teks kecil. Pertebal garis agar menutupi setidaknya satu piksel penuh pada ukuran terkecil, dan hilangkan wordmark.