Must logo läbipaistval taustal näeb heledal vahekaardil suurepärane välja, kuid kaob tumedal. ICO-vorming ei saa kohanduda, SVG-favicon aga saab: see sisaldab CSS-reeglit, mis vahetab värve brauseri kujunduse järgi.
Probleem: üks fail, kaks tausta
Kuna brauserid järgivad süsteemi kujundust, võib sama lehe vahekaardiriba olla ühel külastajal peaaegu valge ja teisel peaaegu must. Ühe jaoks joonistatud ühevärviline favicon muutub teise jaoks loetamatuks.
Paljud saidid lahendavad selle, lisades ikoonile läbipaistmatu värvilise tausta. See toimib, kuid muudab ikooni raskepäraseks laiguks, samal ajal kui suured kaubamärgid kasutavad eraldiseisvat sümbolit.
Õige lahendus on lasta brauseril valida ning see on võimalik ilma JavaScripti ja serveripoolse tuvastamiseta.
Kuidas kohanduv SVG töötab
SVG-fail on dokument, mitte tasapinnaline pilt: see võib sisaldada style-silti ja seega meediapäringuid. Reegel prefers-color-scheme: dark määrab vektorradade täitevärvi ümber, kui brauser kasutab tumedat kujundust.
Praktikas deklareerib SVG heleda kujunduse vaikevärvi ja lisab reegli, mis asendab selle tumedas režiimis. Brauser rakendab kuvamisel sobiva variandi ning uuendab vahekaarti kohe, kui külastaja kujundust vahetab.
Sama mehhanism võimaldab enamat kui lihtsat värvide ümberpööramist: võid pakkuda täiesti teistsugust joonistust, näiteks eraldiseisvat sümbolit heledas režiimis ja täidetud märki tumedas.
SVG deklareerimine koos .ico-failiga
Deklareeri SVG kujul link rel="icon" type="image/svg+xml" href="/favicon.svg". Seda mõistvad brauserid eelistavad seda teistele variantidele; ülejäänud kasutavad juurkaustas asuvat favicon.ico-faili.
Seega pole midagi eemaldada: mõlemad failid eksisteerivad kõrvuti ja katavad teineteise kliendid. See on järkjärguline täiustamine 32-pikslise ikooni puhul.
Üks oluline piirang: SVG-favicon peab olema iseseisev. Välist fonti, kaugpilti ega skripti selles kontekstis ei laadita. Tekst tuleb teisendada kontuurideks.
Mida tume režiim ei kata
Tume variant kehtib töölauabrauseri faviconile. See ei mõjuta Apple Touchi ikooni, mis on fikseeritud läbipaistmatu PNG, ega veebimanifesti ikoone, mida Android kuvab enda taustal.
Ka tugi pole universaalne: Chromiumil põhinevad brauserid ja Firefox loevad kohanduvat SVG-d, Safari tugi oleneb versioonist. Sellest pole häda, sest üleminek .ico-varuvariandile on automaatne.
Kujunda seega hele ikoon vaikevariandina, mida iga külastaja näeb, ning käsitle tumedat varianti täiustusena brauseritele, mis oskavad seda lugeda.
Algallikad
Korduma kippuvad küsimused
Kas favicon.ico saab tumedat režiimi toetada?
Ei. ICO-vorming salvestab fikseeritud rasterpilte ega tunne kujundusi. Ainult SVG saab sisaldada meediapäringut, mistõttu tänapäevane komplekt pakub mõlemat.
Kas on vaja kahte SVG-faili, heledat ja tumedat?
Ei, piisab ühest failist. Mõlemad variandid asuvad samas SVG-s, eraldatuna prefers-color-scheme-meediapäringuga, nii et lisapäringut ega tuvastamiskoodi pole vaja.
Kuidas tumeda kujunduse tulemust testida?
Vaheta operatsioonisüsteemi kujundust ja laadi vahekaart uuesti. Generaatoris asuvad heleda ja tumeda vahekaardi eelvaated kõrvuti, mis säästab edasi-tagasi vahetamist.