Generator Favicon dari SVG

Unggah satu logo SVG dan dapatkan semua yang dibutuhkan situs modern: favicon.ico multi-resolusi yang benar, ikon PNG di setiap ukuran yang benar-benar diminta browser dan ponsel, serta tag HTML <link> untuk ditempel ke dalam <head> Anda. Semua proses rendering terjadi di browser Anda — SVG tidak pernah meninggalkan perangkat Anda.

Apa Itu Alat Ini?

favicon.ico bukan sekadar gambar kecil — ini adalah format kontainer yang bisa menampung beberapa ukuran dari ikon yang sama dalam satu file, sehingga browser, taskbar, atau bilah bookmark bisa memilih resolusi mana pun yang paling tajam untuk tempat menampilkannya. Mengganti nama PNG menjadi favicon.ico tidak menghasilkan itu: itu hanyalah satu gambar dengan ekstensi file yang salah, dan meskipun beberapa browser mentolerirnya, banyak alat, crawler, dan browser lama yang membaca byte mentah mengharapkan struktur kontainer ICO yang sebenarnya dan akan gagal atau kembali ke ikon kosong.

Alat ini membangun kontainer ICO yang sesungguhnya: ia merender SVG Anda pada 16×16, 32×32, dan 48×48, mengenkode masing-masing sebagai PNG secara internal, dan mengemas ketiganya ke dalam satu favicon.ico yang valid menggunakan format PNG-dalam-ICO yang sama yang telah didukung setiap browser dan OS sejak Windows Vista. Selain itu, Anda juga mendapatkan file PNG terpisah pada 180×180 (ukuran yang digunakan iOS untuk ikon saat seseorang menambahkan situs Anda ke layar utama) dan 192×192 / 512×512 (ukuran yang diambil Android dan prompt instal PWA dari manifes aplikasi web Anda).

Mengapa Menggunakannya?

Menghasilkan favicon.ico multi-resolusi yang benar-benar valid, bukan PNG yang diganti nama.
Mencakup setiap ukuran ikon yang dibutuhkan penerapan sungguhan dalam satu proses: 16, 32, 180, 192, 512px.
HTML <head> siap tempel — tidak perlu menebak-nebak atribut rel/sizes/type.
SVG yang tidak persegi dipusatkan di atas persegi transparan alih-alih diregangkan.
Semua proses render terjadi secara lokal di browser Anda; SVG tidak pernah diunggah.

Cara Menggunakan

Klik kotak atau seret file logo SVG Anda ke sana.
Alat ini otomatis merendernya di setiap ukuran favicon — tanpa pengaturan yang perlu dikonfigurasi.
Unduh favicon.ico untuk root situs Anda, beserta masing-masing ikon PNG.
Salin cuplikan HTML dan tempelkan ke dalam <head> halaman Anda.

Contoh

Input

logo.svg — logo perusahaan, vektor 3 KB

Output

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

Satu SVG masuk, semua file ikon yang dibutuhkan penerapan sungguhan keluar.

Ukuran ikon mana yang digunakan di mana

File	Ukuran	Digunakan untuk
favicon.ico	16/32/48px (gabungan)	Tab browser, bilah bookmark, taskbar
favicon-16.png / favicon-32.png	16×16 / 32×32	Cadangan untuk browser yang lebih suka favicon PNG
apple-touch-icon.png	180×180	Ikon layar utama iOS saat situs ditambahkan ke Layar Utama
icon-192.png	192×192	Ikon layar utama Android, manifes aplikasi web
icon-512.png	512×512	Prompt instal PWA, ikon splash screen Android

Mengapa sumber SVG itu penting

Karena SVG menyimpan bentuk sebagai matematika alih-alih piksel, merendernya dari awal pada 16px maupun 512px sama-sama dimulai dari data jalur yang persis sama — tidak ada artefak pembesaran di ujung besar dan tidak ada tebak-tebakan pemaksaan piksel yang harus dikompromikan alat ini di ujung kecil. Jika Anda hanya memiliki logo PNG, alat yang sama ini tidak bisa membantu; konversikan atau buat ulang logo tersebut sebagai SVG terlebih dahulu, karena memperbesar PNG kecil menjadi 512px hanya akan menghasilkan hasil yang buram.

→ Konverter SVG

Pertanyaan yang Sering Diajukan

Kenapa tidak sekadar mengganti nama PNG menjadi favicon.ico?

File .ico memiliki format kontainer biner sendiri (header ICONDIR yang menjelaskan berapa banyak gambar yang dikandungnya, diikuti entri direktori per gambar) — file PNG yang diganti nama menjadi .ico tetap saja hanya PNG dengan ekstensi yang salah di dalamnya. Sebagian besar browser modern cukup toleran dan tetap akan merendernya, tetapi alat ini membangun kontainer ICO yang sesungguhnya berisi tiga resolusi asli, sesuai dengan tujuan format ini dirancang dan yang diharapkan oleh pembaca yang lebih ketat.

Mengapa saya butuh ikon PNG jika sudah punya favicon.ico?

favicon.ico hanya mencakup kasus penggunaan klasik tab browser/bookmark. PNG 180×180 adalah yang digunakan iOS saat pengguna menambahkan situs Anda ke layar utama (apple-touch-icon), dan PNG 192×192 / 512×512 adalah yang diambil Android dan prompt instal PWA dari manifes aplikasi web Anda. Tanpa itu, ikon Anda di layar utama ponsel akan kembali ke tangkapan layar generik atau kotak kosong.

Logo saya tidak persegi — apa yang terjadi padanya?

Logo tersebut dipusatkan di atas persegi transparan pada setiap ukuran target alih-alih diregangkan, sehingga logo yang lebar atau tinggi tetap mempertahankan proporsi yang benar alih-alih diperas menjadi bentuk persegi.

Ke mana saya menaruh file yang sudah diunduh?

Tempatkan favicon.ico, apple-touch-icon.png, icon-192.png, dan icon-512.png di folder root situs Anda (sejajar dengan index.html), lalu tempelkan tag <link> yang dihasilkan ke dalam <head> halaman Anda.

Apakah SVG saya diunggah ke suatu tempat?

Tidak. SVG dirender ke elemen <canvas> lokal dan file ICO/PNG dirakit di browser Anda. Tidak ada yang dikirim ke server.