UltKit

Penukar SVG ke ICO

Membuat favicon daripada SVG ialah pilihan terbaik: setiap saiz ikon dilukis semula daripada vektor, bukan dikecilkan daripada bitmap besar, jadi versi 16 px kekal setajam yang dibenarkan oleh grid piksel.

Penukar Imej

atau seret Fail JPG, JPEG, JPE … ke sini ·

Maks 95 MB setiap fail· Sehingga 20 fail· Dipadam selepas 30 minit

Output

Fail diproses pada pelayan kami dan dipadam selepas 30 minit.

Cara menggunakan alat ini

  1. 1

    Muat naik logo SVG

    Gunakan logo ringkas atau monogram, bukan wordmark penuh. viewBox segi empat sama memberikan hasil paling kemas.

  2. 2

    Kekalkan semua saiz ikon

    Saiz ikon bermula pada Semua saiz (16–256), yang memuatkan setiap resolusi dalam satu fail .ico. Pilih satu saiz sahaja apabila sesuatu program memerlukan tepat satu saiz.

  3. 3

    Tekan Tukar ke ICO

    Simpan fail sebagai favicon.ico dalam folder akar tapak web anda, atau tuding pintasan Windows kepadanya.

Jawapan

Bagaimanakah cara menukar SVG ke ICO untuk favicon?

Muat naik SVG, biarkan Saiz ikon pada Semua saiz (16–256) dan tekan Tukar ke ICO. Anda mendapat satu fail .ico dengan setiap resolusi dilukis daripada vektor, dengan lut sinar kekal.

Penukar SVG ke ICO: mengapa vektor ialah sumber yang tepat

Format .ico bermula sejak versi awal Windows, dan konvensyen favicon.ico bermula dengan Internet Explorer 5 pada 1999, yang mencari fail bernama itu di akar setiap tapak yang anda tandai buku. ICO ialah bekas kecil: direktori entri, setiap satu bitmap segi empat sama yang berasingan, jadi satu fail boleh memuatkan ikon tab 16 px dan ikon desktop 256 px bersebelahan. Windows Vista menaikkan had maksimum kepada 256 × 256 dan membenarkan entri besar itu disimpan sebagai PNG.

Kerana setiap entri ialah bitmap tersendiri, kualiti ikon bergantung pada cara setiap saiz dihasilkan. Daripada PNG, setiap saiz ialah pengecilan piksel yang sama. Daripada SVG, setiap saiz ialah render baharu bagi laluan, dengan anti-alias dikira untuk grid yang tepat itu. Pada 16 × 16 px, apabila logo hanya mempunyai 256 piksel, perbezaan itu jelas kelihatan.

1:1

16 × 16 px

16 × 16

Tab pelayar, penanda buku dan senarai sejarah.

1:1

32 × 32 px

32 × 32

Tab pada skrin berketumpatan tinggi, pintasan bar tugas Windows.

1:1

64 × 64 px

64 × 64

Paparan desktop berskala dan item yang disematkan.

1:1

128 × 128 px

128 × 128

Pratonton besar dalam pengurus fail.

1:1

256 × 256 px

256 × 256

Entri ICO terbesar; ikon sangat besar Explorer.

SVG

Scalable Vector Graphics

SVG ialah format vektor berasaskan XML yang dipiawaikan oleh W3C pada 2001. Daripada piksel, ia menerangkan bentuk, laluan dan teks, jadi kekal tajam pada sebarang saiz dan biasanya sangat kecil untuk logo dan ikon. Ia menyokong lutsinar, gaya CSS, skrip dan animasi, dan setiap pelayar memaparkannya secara asli. SVG tidak sesuai untuk foto, dan ilustrasi kompleks boleh menjadi perlahan dipaparkan. Illustrator, Inkscape, Figma dan pelayar boleh membuka dan menyuntingnya.

Pemampatan
–
Ketelusan
Ya
Animasi
Ya
Diperkenalkan
2001 · W3C
Penukar SVG

ICO

Ikon Windows

ICO ialah format ikon Microsoft yang digunakan untuk ikon program Windows dan favicon laman web. Satu fail .ico boleh mengandungi beberapa imej pada saiz berbeza, seperti 16×16, 32×32, 48×48 dan 256×256 piksel, supaya sistem dapat memilih yang paling sesuai. Setiap imej boleh disimpan sebagai bitmap atau data PNG dan menyokong ketelusan alfa penuh. ICO tidak sesuai untuk foto atau karya seni besar. Pelayar, Windows dan kebanyakan penyunting ikon boleh membacanya.

Pemampatan
Lossless (tanpa kehilangan)
Ketelusan
Ya
Animasi
Tidak
Diperkenalkan
Microsoft
Penukar ICO

Orang menukar SVG ke ICO kerana logo mereka wujud sebagai vektor, manakala akar tapak web, pintasan Windows atau aplikasi desktop masih memerlukan satu fail .ico yang memuatkan beberapa saiz bitmap.

Sediakan SVG sebelum anda tukar SVG ke ICO

LakukanJangan
Tetapkan viewBox kepada segi empat sama, seperti 0 0 512 512.Bergantung pada garisan sangat nipis yang hilang di bawah 32 px.
Tinggalkan margin kecil supaya logo tidak menyentuh tepi ikon.Mengekalkan wordmark lebar yang menjadi palit nipis.
Tukar teks kepada outline supaya fon tidak berubah.Merujuk imej luaran atau fon web di dalam SVG.
Gunakan simbol atau inisial, bukan nama penuh.Menambah segi empat tepat putih di belakang logo kecuali anda mahu ia ada juga pada tab gelap.

Penukar merender apa yang dihuraikan oleh SVG dan tiada yang lain, jadi aset terpaut dan fon yang tidak dibenamkan tidak boleh diambil. Alat reka bentuk seperti Figma, Illustrator dan Inkscape boleh mengeksport teks sebagai laluan; lakukan itu dan huruf akan sepadan dengan jenama anda di mana-mana.

Setelah .ico siap, tambah PNG 180 px untuk ikon sentuh Apple dan SVG itu sendiri untuk pelayar yang menyokong favicon vektor; SVG ke PNG menghasilkan PNG pada sebarang saiz. Jika sumber anda ialah logo bitmap, PNG ke ICO melakukan tugas yang sama daripada piksel.

Tukar SVG ke ICO: soalan lazim

Mengapa guna penukar SVG ke ICO dan bukan bermula daripada PNG?

PNG perlu dikecilkan untuk setiap saiz ikon, dan pengecilan menjadikan tepi kabur. SVG dirender terus pada 16, 32, 64, 128 dan 256 px, jadi setiap saiz mendapat tepi yang tajam mengikut grid pikselnya sendiri.

Adakah pelayar masih memerlukan favicon.ico jika laman saya ada ikon SVG?

Chrome dan Firefox membaca favicon SVG yang dinyatakan dengan tag link, tetapi banyak pelayar, pembaca suapan dan perangkak masih meminta /favicon.ico dari akar tapak secara lalai. Menyediakan kedua-duanya meliputi semua keperluan.

Apakah yang berlaku jika SVG saya tidak berbentuk segi empat sama?

Ruang ikon berbentuk segi empat sama, jadi logo lebar sama ada mendapat margin kosong atau kelihatan kecil. Ubah suai viewBox supaya lebar dan tinggi sama dahulu, atau potong versi segi empat sama dengan alat potong gambar selepas mengeksport PNG.

Adakah latar belakang lutsinar dikekalkan dalam ICO?

Ya. ICO menyimpan saluran alfa, jadi kawasan tanpa isian dalam SVG kekal lut sinar dan ikon kelihatan kemas pada tab pelayar terang dan gelap.

Bolehkah saya tukar SVG ke ICO untuk ikon program atau folder Windows?

Ya, fail yang sama boleh digunakan. Windows membaca imej 256 px untuk paparan Explorer besar dan sangat besar, dan entri yang lebih kecil untuk senarai dan bar tugas.

Mengapa ikon saya kelihatan kosong pada 16 px?

Garisan nipis dan teks kecil hilang pada saiz itu. Garisan 2 unit dalam papan lukis 512 unit dirender pada kurang daripada satu piksel dalam ikon 16 px. Tebalkan garisan atau gunakan logo yang lebih ringkas untuk favicon.