Konversi SVG ke ICO

Membuat favicon dari SVG adalah titik awal terbaik: setiap ukuran ikon digambar baru dari vektor, bukan diperkecil dari bitmap besar, sehingga versi 16 px tetap setajam yang dimungkinkan kisi pikselnya.

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 logo SVG
Gunakan simbol atau monogram, bukan wordmark lengkap. viewBox persegi memberikan hasil paling bersih.
2
Pertahankan semua ukuran ikon
Ukuran ikon dimulai dari Semua ukuran (16–256), yang mengemas setiap resolusi ke dalam satu .ico. Pilih satu ukuran saja hanya jika program meminta tepat satu ukuran.
3
Tekan Konversi ke ICO
Simpan file sebagai favicon.ico di folder root situs Anda, atau arahkan shortcut Windows ke file tersebut.

Jawaban

Bagaimana cara mengubah SVG ke ICO untuk favicon?

Unggah SVG, biarkan Ukuran ikon pada Semua ukuran (16–256), lalu tekan Konversi ke ICO. Anda mendapatkan satu .ico dengan setiap resolusi digambar dari vektor, transparansi tetap utuh.

Konverter SVG ke ICO: mengapa vektor adalah sumber yang tepat

Format .ico berasal dari versi awal Windows, dan konvensi favicon.ico dari Internet Explorer 5 pada 1999, yang mencari file dengan nama itu di root setiap situs yang Anda tandai. ICO adalah wadah kecil: direktori berisi entri yang masing-masing merupakan bitmap persegi terpisah, sehingga satu file bisa menampung ikon tab 16 px dan ikon desktop 256 px berdampingan. Windows Vista menaikkan batas maksimum menjadi 256 × 256 dan mengizinkan entri besar itu disimpan sebagai PNG.

Karena setiap entri adalah bitmap tersendiri, kualitas ikon bergantung pada cara setiap ukuran dibuat. Dari PNG, setiap ukuran adalah hasil pengecilan piksel yang sama. Dari SVG, setiap ukuran adalah render baru dari path, dengan anti-aliasing yang dihitung untuk kisi tersebut. Pada 16 × 16 px, ketika logo hanya punya 256 piksel, perbedaan itu terlihat.

1:1

16 × 16 px

16 × 16

Tab browser, bookmark, dan daftar riwayat.

1:1

32 × 32 px

32 × 32

Tab di layar berkerapatan tinggi, shortcut di taskbar Windows.

1:1

64 × 64 px

64 × 64

Tampilan desktop berskala dan item yang disematkan.

1:1

128 × 128 px

128 × 128

Pratinjau besar di pengelola file.

1:1

256 × 256 px

256 × 256

Entri ICO terbesar; ikon Extra large di Explorer.

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 mengubah SVG ke ICO karena logo mereka berupa vektor, sementara root situs web, shortcut Windows, atau aplikasi desktop masih mengharapkan satu file .ico yang memuat beberapa ukuran bitmap.

Siapkan SVG sebelum mengubah SVG ke ICO

Lakukan	Hindari
Atur viewBox menjadi persegi, misalnya `0 0 512 512`.	Mengandalkan garis setipis rambut yang lenyap di bawah 32 px.
Sisakan sedikit margin agar simbol tidak menyentuh tepi ikon.	Mempertahankan wordmark lebar yang berubah menjadi coretan tipis.
Ubah teks menjadi garis luar agar fontnya tidak berganti.	Merujuk gambar eksternal atau web font di dalam SVG.
Gunakan simbol atau inisial, bukan nama lengkap.	Menambahkan persegi putih di belakang logo, kecuali Anda ingin persegi itu juga tampil di tab gelap.

Konverter merender apa yang digambarkan SVG dan tidak lebih, sehingga aset tertaut dan font yang tidak disematkan tidak bisa diambil. Alat desain seperti Figma, Illustrator, dan Inkscape bisa mengekspor teks sebagai path; lakukan itu dan hurufnya akan sesuai dengan merek Anda di mana pun.

Setelah .ico jadi, tambahkan PNG 180 px untuk Apple touch icon dan SVG-nya sendiri untuk browser yang mendukung favicon vektor; SVG ke PNG menghasilkan PNG pada ukuran berapa pun. Jika sumber Anda berupa logo bitmap, PNG ke ICO mengerjakan tugas yang sama dari piksel.

Ubah SVG ke ICO: tanya jawab

Mengapa memakai konverter SVG ke ICO alih-alih memulai dari PNG?

PNG harus diperkecil untuk setiap ukuran ikon, dan pengecilan membuat tepi buram. SVG dirender langsung pada 16, 32, 64, 128, dan 256 px, sehingga setiap ukuran mendapat tepi tajam untuk kisi pikselnya sendiri.

Apakah browser masih membutuhkan favicon.ico jika situs saya punya ikon SVG?

Chrome dan Firefox membaca favicon SVG yang dideklarasikan dengan tag link, tetapi banyak browser, pembaca feed, dan crawler masih meminta /favicon.ico dari root situs secara bawaan. Menyediakan keduanya mencakup semuanya.

Apa yang terjadi jika SVG untuk favicon saya tidak persegi?

Slot ikon berbentuk persegi, sehingga logo yang lebar mendapat margin kosong atau tampak sangat kecil. Ubah viewBox agar lebar dan tingginya sama terlebih dahulu, atau potong versi persegi dengan alat potong gambar setelah mengekspor PNG.

Apakah latar transparan SVG tetap ada di file ICO?

Ya. ICO menyimpan kanal alfa, sehingga area tanpa isian di SVG tetap transparan dan ikon tampil rapi di tab browser terang maupun gelap.

Bisakah saya mengubah SVG ke ICO untuk ikon program atau folder Windows?

Bisa, file yang sama berfungsi. Windows membaca gambar 256 px untuk tampilan Large dan Extra large icons di Explorer dan entri yang lebih kecil untuk daftar dan taskbar.

Mengapa ikon ICO saya tampak kosong pada 16 px?

Garis tipis dan teks kecil menghilang pada ukuran itu. Garis setebal 2 unit di artboard 512 unit dirender jauh di bawah satu piksel pada ikon 16 px. Pertebal garis atau gunakan simbol yang lebih sederhana untuk favicon.

Konversi SVG ke ICO

Konverter Gambar