Panduan favicon SVG

Gunakan viewBox persegi, seperti 0 0 64 64, dan sisakan ruang di sekitar simbol. viewBox menentukan sistem koordinat tanpa memaksakan ukuran fisik tampilan.

Sederhanakan gambar menjadi bentuk khasnya. Detail halus, celah kecil dalam huruf, dan kata lengkap sering menghilang pada 16 piksel, meskipun berkas vektor secara teknis tetap tajam.

Sematkan gaya yang diperlukan di dalam SVG. Ubah teks menjadi path jika simbol bergantung pada jenis huruf karena fon web eksternal bukan dependensi yang andal dalam konteks ini.

Hapus skrip, tautan jarak jauh, dan metadata editor yang tidak diperlukan. Bentuk dan gaya sederhana juga mempermudah tinjauan keamanan dan mengurangi ukuran berkas.

Terakhir, buka berkas sendiri di peramban dan uji secara luring. Jika gambar berubah atau menghilang, masih ada ketergantungan pada sumber daya eksternal yang harus disematkan atau diganti.

Tambahkan link rel icon dengan type image/svg+xml dan URL relatif terhadap direktori akar. Tetap sediakan favicon.ico di direktori akar untuk klien yang tidak memilih SVG atau meminta ICO secara langsung.

SVG tidak menggantikan ikon Apple Touch atau ikon manifes. Ekspor PNG tidak transparan atau maskable untuk antarmuka tersebut.

Aturan prefers-color-scheme dalam elemen style dapat mengubah fill atau stroke pada mode gelap. Tentukan warna bawaan yang andal terlebih dahulu, lalu tambahkan varian sebagai peningkatan progresif.

Uji berkas dalam tab nyata dan pada beberapa tingkat pembesaran. Periksa juga cadangan saat SVG tidak dipilih: ICO yang menghilang di atas latar gelap tetap menjadi masalah bagi klien tersebut.