Črn logotip na prosojnem ozadju je v svetlem zavihku popoln, v temnem pa izgine. ICO se ne zna prilagajati, ikona SVG pa se lahko: vsebuje pravilo CSS, ki zamenja barve glede na temo brskalnika.
Težava: ena datoteka, dve ozadji
Ker brskalniki sledijo sistemski temi, je vrstica zavihkov na isti strani pri enem obiskovalcu skoraj bela, pri drugem pa skoraj črna. Enobarvna ikona, zasnovana za prvo ozadje, postane na drugem neberljiva.
Številne strani to obidejo z neprosojnim barvnim ozadjem ikone. Deluje, a ikona postane težak barvni madež, medtem ko velike znamke uporabljajo izrezan simbol.
Prava rešitev je prepustiti izbiro brskalniku. To je mogoče brez JavaScripta in brez zaznavanja na strežniku.
Kako deluje prilagodljivi SVG
Datoteka SVG je dokument, ne ploska slika: lahko vsebuje oznako style in s tem medijske poizvedbe. Pravilo prefers-color-scheme: dark znotraj datoteke na novo določi barvo polnila poti, ko brskalnik uporablja temno temo.
V praksi SVG določi privzeto barvo za svetlo temo, nato pravilo, ki jo v temnem načinu zamenja. Brskalnik med prikazom uporabi ustrezno in takoj posodobi zavihek, če obiskovalec zamenja temo.
Isti mehanizem zmore več kot preprosto obračanje barv: prikažete lahko povsem drugo risbo, denimo izrezan simbol v svetlem načinu in zapolnjeno značko v temnem.
Navedba SVG skupaj z .ico
SVG navedite z link rel="icon" type="image/svg+xml" href="/favicon.svg". Brskalniki, ki ga razumejo, mu dajo prednost pred drugimi oblikami, ostali pa uporabijo favicon.ico v korenu.
Ničesar torej ni treba odstraniti: obe datoteki sobivata, vsaka pokrije odjemalce druge. To je postopno izboljševanje, uporabljeno pri ikoni s 32 slikovnimi pikami.
Pazite le na eno: ikona SVG mora biti samostojna. Zunanja pisava, oddaljena slika ali skript se v tem okolju ne naložijo. Besedilo mora biti pretvorjeno v krivulje.
Česa temni način ne pokriva
Temna različica velja za ikono namiznega brskalnika. Ne vpliva na ikono Apple Touch, ki je fiksen neprosojen PNG, niti na ikone spletnega manifesta, ki jih Android izriše na svojem ozadju.
Tudi podpora ni univerzalna: brskalniki na osnovi Chromiuma in Firefox berejo prilagodljivi SVG, Safari pa zaostaja glede na različico. To ni ovira, saj je prehod na .ico samodejen.
Svetlo ikono zato oblikujte kot privzeto možnost, ki jo vidi vsak obiskovalec, temno različico pa obravnavajte kot izboljšavo za brskalnike, ki jo razumejo.
Primarni viri
Pogosta vprašanja
Ali favicon.ico podpira temni način?
Ne. ICO hrani fiksne rastrske slike brez pojma teme. Le SVG lahko vsebuje medijsko poizvedbo, zato sodobni nabor vključuje oba.
Ali potrebujem dve datoteki SVG, svetlo in temno?
Ne, zadostuje ena. Obe različici sta v istem SVG, ločeni z medijsko poizvedbo prefers-color-scheme, kar prepreči dodatno zahtevo in odpravi potrebo po kodi za zaznavanje.
Kako preizkusim prikaz temne teme?
Zamenjajte temo operacijskega sistema in ponovno naložite zavihek. V generatorju sta predogleda svetlega in temnega zavihka drug ob drugem, zato preklapljanje ni potrebno.