Musta logo läpinäkyvällä taustalla sopii vaaleaan välilehteen mutta katoaa tummalle. ICO ei osaa mukautua, mutta SVG-favicon osaa: sen sisältämä CSS-sääntö vaihtaa värit selaimen teeman mukaan.
Ongelma: yksi tiedosto, kaksi taustaa
Koska selaimet seuraavat järjestelmän teemaa, samaa sivua katsovan kahden kävijän välilehtipalkki voi olla lähes valkoinen tai lähes musta. Yhdelle suunniteltu yksivärinen favicon ei erotu toisella.
Monet sivustot kiertävät ongelman lisäämällä kuvakkeeseen peittävän värillisen taustan. Se toimii, mutta kuvakkeesta tulee visuaalisesti raskas laatta siinä missä suuret brändit käyttävät taustatonta symbolia.
Hyvä ratkaisu on antaa selaimen valita. Se onnistuu ilman JavaScriptiä tai palvelimella tehtävää tunnistusta.
Miten mukautuva SVG toimii?
SVG-tiedosto on dokumentti eikä muuttumaton kuva: se voi sisältää style-elementin ja siten mediakyselyjä. prefers-color-scheme: dark -sääntö määrittää polkujen täyttövärin uudelleen, kun selain käyttää tummaa teemaa.
Käytännössä SVG määrittää ensin vaalean teeman oletusvärin ja sitten säännön, joka korvaa sen tummassa teemassa. Selain käyttää sopivaa väriä piirrettäessä ja päivittää välilehden heti kävijän vaihtaessa teemaa.
Sama mekanismi mahdollistaa enemmänkin kuin värien kääntämisen: voit näyttää täysin eri piirroksen, esimerkiksi taustattoman symbolin vaaleassa tilassa ja täytetyn merkin tummassa.
Määritä SVG .ico-tiedoston rinnalle
SVG määritetään näin: link rel="icon" type="image/svg+xml" href="/favicon.svg". Sitä tukevat selaimet suosivat sitä, ja muut käyttävät juuressa olevaa favicon.ico-tiedostoa.
Mitään ei tarvitse poistaa: molemmat tiedostot toimivat rinnakkain ja kattavat eri selaimet. Tämä on asteittaisen parantamisen periaate sovellettuna 32 pikselin kuvakkeeseen.
Huomioi, että SVG-faviconin on oltava itsenäinen. Ulkoista fonttia, etäkuvaa tai komentosarjaa ei ladata tässä yhteydessä. Tekstit on muunnettava poluiksi.
Mitä tumma tila ei kata?
Tumma versio koskee työpöytäselainten faviconia. Se ei koske Apple Touch -kuvaketta, joka on muuttumaton peittävä PNG, eikä verkkomanifestin kuvakkeita, jotka Android näyttää omalla taustallaan.
Tuki ei myöskään ole yleinen: Chromium-pohjaiset selaimet ja Firefox lukevat mukautuvaa SVG:tä, mutta Safari on versiosta riippuen jäljessä. Se ei haittaa, koska .ico toimii automaattisena varavaihtoehtona.
Suunnittele siis vaalean tilan kuvake oletukseksi, jonka kaikki kävijät voivat nähdä. Tumma versio on lisäparannus sitä tukeville selaimille.
Alkuperäislähteet
Usein kysytyt kysymykset
Voiko favicon.ico tukea tummaa tilaa?
Ei. ICO tallentaa muuttumattomia rasterikuvia eikä tunne teemoja. Vain SVG voi sisältää mediakyselyn, joten modernissa paketissa ovat mukana molemmat.
Tarvitaanko kaksi SVG-tiedostoa, vaalea ja tumma?
Ei, yksi tiedosto riittää. Molemmat versiot ovat samassa SVG:ssä prefers-color-scheme-mediakyselyn erottamina. Näin vältetään lisäpyyntö ja erillinen tunnistuskoodi.
Miten tumman teeman ulkoasua testataan?
Vaihda käyttöjärjestelmän teemaa ja lataa välilehti uudelleen. Generaattorissa vaalean ja tumman välilehden esikatselut näkyvät vierekkäin, joten edestakaista vaihtamista ei tarvita.