Logo hitam berlatar lutsinar kelihatan sempurna pada tab cerah tetapi hilang pada tab gelap. Format ICO tidak boleh menyesuaikan diri, namun favicon SVG boleh: ia membawa peraturan CSS yang menukar warna mengikut tema pelayar.
Masalahnya: satu fail, dua latar belakang
Kini pelayar mengikuti tema sistem, jadi bar tab pada halaman yang sama mungkin hampir putih bagi seorang pelawat dan hampir hitam bagi pelawat lain. Favicon satu warna yang direka untuk satu keadaan menjadi tidak jelas pada keadaan yang lain.
Banyak laman mengatasinya dengan memberikan latar berwarna legap kepada ikon. Ia berkesan, tetapi ikon menjadi tompokan berat, sedangkan jenama besar cenderung menggunakan simbol tanpa latar.
Penyelesaian yang sesuai ialah membiarkan pelayar memilih, dan ini boleh dilakukan tanpa JavaScript atau pengesanan pada pelayan.
Cara SVG adaptif berfungsi
Fail SVG ialah dokumen, bukannya imej rata: ia boleh mengandungi tag style dan oleh itu pertanyaan media. Meletakkan peraturan prefers-color-scheme: dark di dalamnya mentakrifkan semula warna isian laluan apabila pelayar menggunakan tema gelap.
Dalam amalan, SVG mengisytiharkan warna lalai untuk tema cerah, kemudian peraturan yang menggantikannya dalam mod gelap. Pelayar menggunakan warna yang betul semasa pemaparan dan mengemas kini tab serta-merta jika pelawat menukar tema.
Mekanisme ini melangkaui penyongsangan warna: anda boleh memaparkan lukisan yang berbeza sama sekali, contohnya simbol tanpa latar dalam mod cerah dan lencana berisi dalam mod gelap.
Mengisytiharkan SVG bersama .ico
Isytiharkan SVG dengan link rel="icon" type="image/svg+xml" href="/favicon.svg". Pelayar yang memahaminya mengutamakannya, manakala pelayar lain menggunakan favicon.ico di akar laman sebagai sandaran.
Jadi tiada fail perlu dibuang: kedua-duanya wujud bersama dan saling meliputi klien masing-masing. Inilah penambahbaikan progresif yang diterapkan pada ikon 32 piksel.
Satu perhatian: SVG favicon mesti berdikari. Fon luaran, imej jauh atau skrip tidak dimuatkan dalam konteks ini. Teks perlu ditukar kepada bentuk vektor.
Perkara yang tidak diliputi oleh mod gelap
Varian gelap terpakai pada favicon pelayar desktop. Ia tidak mempengaruhi ikon Apple Touch, iaitu PNG legap tetap, mahupun ikon manifes web yang dipaparkan Android pada latar belakangnya sendiri.
Sokongannya juga tidak menyeluruh: pelayar berasaskan Chromium dan Firefox membaca SVG adaptif, sementara Safari ketinggalan bergantung pada versi. Itu tidak mengapa kerana sandaran .ico digunakan secara automatik.
Jadi reka ikon cerah sebagai keadaan lalai yang akan dilihat semua pelawat, dan anggap varian gelap sebagai penambahbaikan untuk pelayar yang boleh membacanya.
Sumber utama
Soalan lazim
Bolehkah favicon.ico mengendalikan mod gelap?
Tidak. Format ICO menyimpan imej raster tetap tanpa konsep tema. Hanya SVG boleh membawa pertanyaan media, sebab itulah set moden menyertakan kedua-duanya.
Adakah dua fail SVG diperlukan, satu cerah dan satu gelap?
Tidak, satu fail mencukupi. Kedua-dua varian berada dalam SVG yang sama, dipisahkan oleh pertanyaan media prefers-color-scheme, mengelakkan permintaan tambahan dan kod pengesanan.
Bagaimanakah paparan tema gelap diuji?
Tukar tema sistem pengendalian, kemudian muat semula tab. Dalam penjana, pratonton tab cerah dan gelap dipaparkan bersebelahan supaya anda tidak perlu berulang-alik.