Penjana Favicon daripada SVG

Muat naik satu logo SVG dan dapatkan semua yang diperlukan laman web moden: favicon.ico pelbagai resolusi yang betul, ikon PNG pada setiap saiz yang sebenarnya diminta oleh pelayar dan telefon, dan tag HTML <link> untuk ditampal ke dalam <head> anda. Semua rendering berlaku dalam pelayar anda — SVG tidak pernah meninggalkan peranti anda.

Apakah alat ini?

favicon.ico bukan sekadar gambar kecil — ia format bekas yang boleh menyimpan beberapa saiz ikon yang sama dalam satu fail, supaya pelayar, taskbar atau bar penanda halaman boleh memilih resolusi yang paling tajam untuk kedudukan ia dipaparkan. Menamakan semula PNG kepada favicon.ico tidak menghasilkan itu: ia cuma satu imej dengan sambungan fail yang salah, dan walaupun sesetengah pelayar tolerankannya, banyak alat, jentera perangkak dan pelayar lama yang membaca bait mentah mengharapkan struktur bekas ICO sebenar dan akan gagal atau kembali kepada ikon kosong.

Alat ini membina bekas ICO sebenar: ia merender SVG anda pada 16×16, 32×32 dan 48×48, mengekod setiap satu sebagai PNG di dalamnya, dan membungkus ketiga-tiganya ke dalam satu favicon.ico yang sah menggunakan format PNG-dalam-ICO yang sama yang disokong setiap pelayar dan OS sejak Windows Vista. Bersamanya, anda mendapat fail PNG berasingan pada 180×180 (saiz yang digunakan iOS untuk ikon apabila seseorang menambah laman anda ke skrin utama) dan 192×192 / 512×512 (saiz yang ditarik oleh Android dan gesaan pemasangan PWA daripada manifest aplikasi web anda).

Kenapa guna alat ini?

Menghasilkan favicon.ico pelbagai resolusi yang sah sebenar, bukan PNG yang ditukar nama.
Meliputi setiap saiz ikon yang diperlukan penggunaan sebenar dalam satu larian: 16, 32, 180, 192, 512px.
HTML <head> sedia tampal — tiada perlu meneka atribut rel/sizes/type.
SVG bukan segi empat sama dipusatkan pada segi empat sama telus dan bukan diregangkan.
Semuanya dirender secara tempatan dalam pelayar anda; SVG tidak pernah dimuat naik.

Cara menggunakannya

Klik kotak atau lepaskan fail logo SVG anda ke atasnya.
Alat ini merendernya pada setiap saiz favicon secara automatik — tiada tetapan perlu dikonfigurasi.
Muat turun favicon.ico untuk root laman anda, berserta ikon PNG berasingan.
Salin cebisan HTML dan tampalkannya ke dalam <head> halaman anda.

Contoh

Input

logo.svg — tanda syarikat, vektor 3 KB

Hasil

favicon.ico (16/32/48px digabungkan), berserta favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.png

Satu SVG masuk, setiap fail ikon yang diperlukan penggunaan sebenar keluar.

Saiz ikon mana digunakan di mana

Fail	Saiz	Digunakan untuk
favicon.ico	16/32/48px (digabungkan)	Tab pelayar, bar penanda halaman, taskbar
favicon-16.png / favicon-32.png	16×16 / 32×32	Sandaran untuk pelayar yang lebih suka favicon PNG
apple-touch-icon.png	180×180	Ikon skrin utama iOS apabila laman ditambah ke Skrin Utama
icon-192.png	192×192	Ikon skrin utama Android, manifest aplikasi web
icon-512.png	512×512	Gesaan pemasangan PWA, ikon skrin permulaan Android

Kenapa sumber SVG itu penting

Oleh kerana SVG menyimpan bentuk sebagai matematik dan bukan piksel, merendernya semula pada 16px dan pada 512px kedua-duanya bermula dari data laluan yang sama tepat — tiada artifak pembesaran di hujung besar dan tiada tekaan penyesuaian piksel paksa yang perlu dikompromikan alat ini di hujung kecil. Jika anda hanya ada logo PNG, alat yang sama ini tidak dapat membantu; tukar atau cipta semula logo itu sebagai SVG dahulu, kerana membesarkan PNG kecil kepada 512px hanya akan menghasilkan hasil yang kabur.

→ Penukar SVG

Soalan lazim

Kenapa tidak sekadar tukar nama PNG kepada favicon.ico?

Fail .ico mempunyai format bekas binari tersendiri (pengepala ICONDIR yang menerangkan berapa banyak imej yang dimuatnya, diikuti entri direktori bagi setiap imej) — fail PNG yang ditukar nama kepada .ico masih hanya PNG dengan sambungan yang salah di dalamnya. Kebanyakan pelayar moden bersikap toleran dan tetap akan merendernya, tetapi alat ini membina bekas ICO sebenar yang memegang tiga resolusi sebenar, iaitu apa yang direka format ini dan apa yang diharapkan pembaca yang lebih ketat.

Kenapa saya perlukan ikon PNG jika saya sudah ada favicon.ico?

favicon.ico hanya meliputi kes penggunaan klasik tab-pelayar/penanda halaman. PNG 180×180 ialah apa yang digunakan iOS apabila pengguna menambah laman anda ke skrin utama (apple-touch-icon), dan PNG 192×192 / 512×512 ialah apa yang ditarik Android dan gesaan pemasangan PWA daripada manifest aplikasi web anda. Tanpanya, ikon anda pada skrin utama telefon akan kembali kepada tangkapan skrin umum atau segi empat kosong.

Logo saya bukan segi empat sama — apa akan berlaku kepadanya?

Ia dipusatkan pada segi empat sama telus pada setiap saiz sasaran dan bukan diregangkan, jadi logo yang lebar atau tinggi mengekalkan nisbahnya yang betul dan bukan dipicit menjadi segi empat sama.

Di mana saya perlu letakkan fail yang dimuat turun?

Letakkan favicon.ico, apple-touch-icon.png, icon-192.png dan icon-512.png dalam folder root laman anda (sebelah index.html), kemudian tampalkan tag <link> yang dijana ke dalam <head> halaman anda.

Adakah SVG saya dimuat naik ke mana-mana?

Tidak. SVG dirender pada elemen <canvas> tempatan dan fail ICO/PNG dihimpun dalam pelayar anda. Tiada apa dihantar ke pelayan.