Ikon SVG vs ICO

SVG favicon adalah dokumen XML tunggal yang dapat diskalakan ke ukuran tab apa pun tanpa byte tambahan. File ICO adalah wadah biner yang menampung satu atau lebih frame pra-rasterisasi.

Chromium, Firefox, dan Safari modern dapat merender SVG dalam tab. Shell Windows, penyematan lama, dan pengambilan /favicon.ico implisit masih mengharapkan data raster ICO.

Pertanyaannya bukan SVG atau ICO — melainkan SVG plus ICO, dengan SVG terdaftar untuk browser yang mumpuni dan ICO sebagai jaring pengaman.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Satu file mencakup piksel logis 16×16 hingga 256×256. Tidak ada mipmap yang disetel untuk dipertahankan.

Ukuran file seringkali di bawah 2KB untuk tanda sederhana, jauh lebih kecil dari enam bingkai .ico.

CSS yang tersemat dapat membalikkan isian di bawah @media (prefers-color-scheme: gelap), memberi Anda tab adaptif tanpa mengekspor aset malam terpisah.

SVG adalah teks. Anda dapat membedakan perubahan favicon di Git seperti aset sumber lainnya.

Browser meminta /favicon.ico meskipun Anda menghilangkannya dari HTML. Permintaan tersebut harus mengembalikan wadah ikon yang valid, bukan SVG yang diubah namanya menjadi .ico.

Pin Windows, pembukaan tautan Outlook, dan beberapa pembaca RSS mengabaikan SVG sepenuhnya. Diperkirakan sekitar 5% tayangan menggunakan jalur khusus ICO.

ICO juga memberi Anda piksel yang dapat diprediksi. Filter SVG yang rumit mungkin ditampilkan secara berbeda di seluruh mesin; fallback raster menstabilkan tampilan.

Deklarasikan ICO terlebih dahulu untuk kompatibilitas maksimum, lalu SVG untuk penyempurnaan:

<link rel="icon" href="/favicon.ico" size="any">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Browser yang mumpuni lebih memilih SVG jika tipe dan MIME benar. Lainnya kembali ke ICO tanpa mesin terbang gambar yang rusak.

Pasangkan dengan ikon sentuh apel 180×180 PNG karena iOS tidak menggunakan SVG untuk ikon layar utama.

Tanda huruf monokrom: SVG dengan satu <path> dan pertukaran pengisian mode gelap. ICO dihasilkan dari bentuk yang sama untuk pintasan Windows.

Logo gradien: sederhanakan untuk SVG (hanya isian datar). Pertahankan gradien pemasaran di situs web, bukan di tab 16×16.

Situs pemerintah atau perusahaan dengan persyaratan IE lama: prioritaskan ICO; tambahkan SVG hanya setelah analitik menunjukkan lalu lintas IE yang dapat diabaikan.

Sistem desain dengan warna merek yang ketat: simpan SVG di repo, jalankan tugas CI untuk membuat ulang .ico pada setiap tag rilis.

Bisakah saya menggunakan SVG saja? Tidak jika Anda peduli dengan pintasan Windows dan pengambilan .ico implisit.

Apakah Safari mendukung SVG favicon? Safari 15+ di desktop bisa. Layar beranda iOS masih memerlukan PNG.

Akankah SVG memperlambat pengecatan pertama? SVG berukuran 1–2KB dapat diabaikan dibandingkan dengan gambar pahlawan.

Bisakah saya menyematkan bitmap di dalam SVG? Bisa, tapi skalabilitasnya hilang — gunakan ICO saja.

SVG favicon tidak terlihat dalam mode gelap: isian sesuai dengan latar belakang tab. Tambahkan isian eksplisit atau aturan prefers-color-scheme.

Chrome menggunakan ICO, bukan SVG: periksa type="image/svg+xml" dan verifikasi Tipe Konten server adalah image/svg+xml.

SVG terlihat bergerigi: Anda melakukan rasterisasi pada filter yang rumit. Sederhanakan jalur atau andalkan ICO untuk tab.

File SVG besar: ekspor dengan SVGO; hapus metadata Illustrator dan defs yang tidak digunakan.

Jaga agar viewBox tetap persegi dan terpusat. Kotak surat viewBoxes non-persegi menandai tanda Anda secara tidak terduga pada potongan tab melingkar atau persegi.

Lebih memilih pengisian sederhana daripada filter, masker, dan penyematan Objek asing. Strip konteks rendering Favicon memungkinkan halaman penuh SVG.

Sejajarkan semua gaya. Stylesheet eksternal mungkin tidak dimuat untuk permintaan khusus favicon.

Uji aturan prefers-color-scheme dalam pengaturan OS terang dan gelap pada mesin yang sama sebelum penerapan.

Jalankan SVGO dengan plugin konservatif untuk memperkecil ukuran file, namun menjaga viewBox dan data jalur kritis tetap utuh.

Kontrol versi favicon.svg seperti kode aplikasi. Perbedaan XML mengalahkan perbandingan biner ICO dalam permintaan tarik.

Biaya parse SVG tergolong kecil jika dibandingkan dengan gambar hero, namun ekspor SVG yang sangat besar dari Illustrator (100KB+) masih membuang-buang byte pada setiap tab.

Browser melakukan cache favicon secara terpisah dari kontrol cache HTTP pada HTML. Mengganti nama favicon.svg menjadi favicon-v2.svg memaksa penyegaran saat pemasaran menuntutnya.

Pekerja layanan yang menyimpan cache HTML tidak boleh menyimpan respons ikon dalam cache dengan basi sementara memvalidasi ulang selamanya — mengubah kunci cache saat mengubah merek.

Multiplexing HTTP/2 berarti tiga file ikon kecil tidak menjadi masalah air terjun. Kirimkan format yang benar; jangan menggabungkan SVG dan ICO menjadi satu file.

Favicon bersifat dekoratif di tab — mereka tidak memerlukan teks alternatif di HTML. Nama situs yang bermakna masih termasuk dalam <title>.

Tanda SVG kontras rendah gagal dalam WCAG untuk UI chrome dengan cara yang sama seperti gagal pada konten halaman. Uji kontras pada latar belakang #fff dan #323232.

Tanda merek yang hanya berwarna membingungkan pengguna yang mengalami defisiensi penglihatan warna. Tambahkan bentuk yang berbeda, tidak hanya perubahan warna, pada siluet 16×16.

Simpan favicon.svg di Git. Pada tag rilis, jalankan skrip tanpa kepala atau langkah generator manual untuk menghasilkan favicon.ico dan menerapkan biner atau melampirkan untuk menyebarkan artefak.

Gagal CI jika favicon.ico lebih tua dari waktu favicon.svg — menangkap regenerasi yang terlupakan setelah penyesuaian logo.

Lingkungan pratinjau harus menggunakan jalur ikon yang sama dengan produksi untuk menangkap 404 sebelum digabungkan.

Dokumentasikan dalam panduan gaya Anda: SVG adalah sumber, ICO adalah artefak yang dihasilkan, ukuran PNG adalah target ekspor.

Tentukan bobot goresan dan bantalan minimum pada 16×16 sehingga lembaga eksternal tidak menyediakankan merek yang tidak sesuai merek.

Sertakan tangkapan layar terang dan gelap dalam PDF merek. Tab referensi tim pemasaran sesering kop surat.

Aset versi favicon dengan tag semver cocok dengan rilis produk saat ikon berubah seiring peluncuran fitur.

Jalankan audit triwulanan: jika analisis menunjukkan dukungan SVG di atas 98% pada audiens Anda, tetap pertahankan ICO — dampak jangka panjangnya penting untuk instalasi perusahaan.

Terapkan favicon.ico terlebih dahulu dan verifikasi permintaan implisit /favicon.ico mengembalikan 200.

Tambahkan favicon.svg dengan MIME yang benar pada pementasan; jalankan pemeriksaan otomatis apakah Tipe Konten adalah image/svg+xml.

Kirim ke produksi, bersihkan CDN, segarkan tiga browser, konfirmasikan tab SVG di Chromium dan fallback ICO jika diharapkan.

Pantau tiket dukungan selama satu minggu — ikon mengeluarkan cluster tepat setelah perubahan merek jika QA melewatkan pintasan Windows.

Catat tangkapan layar dasar di tiket rilis Anda sehingga regresi di masa mendatang terlihat jelas selama peninjauan kode.