Juodas logotipas skaidriame fone šviesioje kortelėje atrodo puikiai, o tamsioje pradingsta. ICO formatas neprisitaiko, tačiau SVG svetainės piktograma gali: joje yra CSS taisyklė, keičianti spalvas pagal naršyklės temą.
Problema: vienas failas, du fonai
Naršyklėms prisitaikant prie sistemos temos, vienam tos pačios svetainės lankytojui kortelių juosta gali būti beveik balta, kitam – beveik juoda. Vienam fonui sukurta vienspalvė piktograma kitame tampa neįskaitoma.
Daugelis svetainių tai apeina pridėdamos neskaidrų spalvotą foną. Tai veikia, bet piktograma virsta sunkia dėme, nors didieji prekių ženklai naudoja tik iškirptą simbolį.
Tinkamas sprendimas – leisti pasirinkti naršyklei, ir tai įmanoma be JavaScript bei aptikimo serveryje.
Kaip veikia prisitaikantis SVG
SVG failas yra dokumentas, o ne plokščias vaizdas: jame gali būti style žyma, taigi ir medijos užklausos. Įterpus prefers-color-scheme: dark taisyklę, kontūrų užpildo spalva pakeičiama, kai naršyklė naudoja tamsiąją temą.
Praktiškai SVG nurodo numatytąją šviesiosios temos spalvą ir taisyklę, kuri ją pakeičia tamsiajame režime. Naršyklė pasirenka tinkamą rodydama vaizdą ir iškart atnaujina kortelę, jei lankytojas pakeičia temą.
Taip galima ne tik invertuoti spalvas: galite pateikti visiškai kitą piešinį, pavyzdžiui, iškirptą simbolį šviesiajame režime ir užpildytą ženklelį tamsiajame.
SVG nurodymas kartu su .ico
Nurodykite SVG naudodami link rel="icon" type="image/svg+xml" href="/favicon.svg". Jį suprantančios naršyklės jam teikia pirmenybę, o kitos naudoja atsarginį favicon.ico iš šakninio katalogo.
Taigi nieko šalinti nereikia: abu failai lieka kartu ir aptarnauja skirtingas programas. Tai laipsniškas funkcijų gerinimas, pritaikytas 32 pikselių piktogramai.
Viena išlyga: piktogramos SVG turi būti savarankiškas. Išorinis šriftas, nuotolinis vaizdas ar scenarijus šiame kontekste nebus įkelti. Tekstą reikia paversti kontūrais.
Ko tamsusis režimas neapima
Tamsioji versija taikoma kompiuterio naršyklės svetainės piktogramai. Ji nekeičia Apple Touch piktogramos, kuri yra pastovus neskaidrus PNG, nei manifesto piktogramų, kurias Android rodo savo fone.
Palaikymas taip pat nėra visuotinis: Chromium pagrindu veikiančios naršyklės ir Firefox skaito prisitaikantį SVG, o Safari galimybės priklauso nuo versijos. Tai priimtina, nes .ico atsarginis variantas pasirenkamas automatiškai.
Todėl šviesiąją piktogramą kurkite kaip numatytąjį variantą, matomą visiems lankytojams, o tamsiąją laikykite patobulinimu ją palaikančioms naršyklėms.
Pirminiai šaltiniai
Dažniausi klausimai
Ar favicon.ico palaiko tamsųjį režimą?
Ne. ICO formatas saugo pastovius rastrinius vaizdus ir neturi temos sąvokos. Tik SVG gali talpinti medijos užklausą, todėl šiuolaikiniame rinkinyje yra abu failai.
Ar reikia dviejų SVG failų – šviesaus ir tamsaus?
Ne, pakanka vieno failo. Abi versijos yra tame pačiame SVG, atskirtos prefers-color-scheme medijos užklausa, todėl nereikia papildomos užklausos ar aptikimo kodo.
Kaip patikrinti tamsiosios temos vaizdą?
Pakeiskite operacinės sistemos temą ir iš naujo įkelkite kortelę. Generatoriuje šviesios ir tamsios kortelių peržiūros rodomos greta, todėl temos kaitalioti nereikia.