Logo hitam di atas latar transparan tampak sempurna pada tab terang dan menghilang pada tab gelap. Format ICO tidak bisa beradaptasi, tetapi favicon SVG bisa: membawa aturan CSS yang mengganti warna sesuai tema peramban.
Masalahnya: satu berkas, dua latar belakang
Kini peramban mengikuti tema sistem, sehingga bilah tab pada halaman yang sama bisa hampir putih bagi satu pengunjung dan hampir hitam bagi pengunjung lain. Favicon monokrom yang dirancang untuk satu tema menjadi sulit terbaca pada tema lainnya.
Banyak situs mengatasinya dengan memberikan latar berwarna tidak transparan pada ikon. Cara ini berhasil, tetapi ikon menjadi blok yang berat, sementara merek besar tetap menggunakan bentuk simbol dengan area sekitarnya transparan.
Solusi yang tepat adalah membiarkan peramban memilih, dan ini dapat dilakukan tanpa JavaScript maupun deteksi di server.
Cara kerja SVG adaptif
Berkas SVG adalah dokumen, bukan gambar datar: dapat berisi tag style dan kueri media. Aturan prefers-color-scheme: dark di dalamnya menetapkan ulang warna isi path saat peramban menggunakan tema gelap.
Dalam praktiknya, SVG mendeklarasikan warna bawaan untuk tema terang, lalu aturan yang menggantinya dalam mode gelap. Peramban menerapkan warna yang sesuai saat merender dan langsung memperbarui tab jika pengunjung mengganti tema.
Mekanisme yang sama tidak terbatas pada pembalikan warna: Anda dapat menampilkan gambar yang sepenuhnya berbeda, misalnya simbol berlatar transparan dalam mode terang dan lencana berisi dalam mode gelap.
Mendeklarasikan SVG bersama .ico
Deklarasikan SVG dengan link rel="icon" type="image/svg+xml" href="/favicon.svg". Peramban yang memahaminya akan memprioritaskannya, sementara yang tidak mendukungnya menggunakan favicon.ico di direktori akar sebagai cadangan.
Jadi tidak perlu menghapus apa pun: kedua berkas berdampingan, masing-masing mencakup klien yang tidak didukung berkas lainnya. Inilah peningkatan progresif yang diterapkan pada ikon 32 piksel.
Satu catatan: SVG favicon harus mandiri. Fon eksternal, gambar jarak jauh, atau skrip tidak akan dimuat dalam konteks ini. Teks harus diubah menjadi kontur.
Yang tidak dicakup mode gelap
Varian gelap berlaku untuk favicon peramban desktop. Ini tidak memengaruhi ikon Apple Touch yang berupa PNG tetap tidak transparan, maupun ikon manifes web yang ditampilkan Android pada latarnya sendiri.
Dukungan juga belum menyeluruh: peramban berbasis Chromium dan Firefox membaca SVG adaptif, sementara Safari tertinggal tergantung versinya. Itu tidak masalah karena penggunaan .ico sebagai cadangan berjalan otomatis.
Jadi rancang ikon terang sebagai bawaan yang dapat dilihat setiap pengunjung, dan perlakukan varian gelap sebagai penyempurnaan untuk peramban yang dapat membacanya.
Sumber primer
Pertanyaan umum
Bisakah favicon.ico menangani mode gelap?
Tidak. Format ICO menyimpan gambar raster tetap tanpa mengenal tema. Hanya SVG yang dapat memuat kueri media, sehingga kumpulan modern menyertakan keduanya.
Apakah perlu dua berkas SVG, satu terang dan satu gelap?
Tidak, satu berkas cukup. Kedua varian berada dalam SVG yang sama, dipisahkan oleh kueri media prefers-color-scheme, sehingga tidak memerlukan permintaan tambahan atau kode deteksi.
Bagaimana menguji tampilan tema gelap?
Ganti tema sistem operasi, lalu muat ulang tab. Dalam generator, pratinjau tab terang dan gelap ditampilkan berdampingan sehingga Anda tidak perlu bolak-balik.