Čierne logo na priehľadnom pozadí vyzerá skvele na svetlej karte, no na tmavej je neviditeľné. ICO sa prispôsobiť nevie, favicon SVG však áno: obsahuje pravidlo CSS, ktoré mení farby podľa motívu prehliadača.
Problém: jeden súbor, dve pozadia
Odkedy prehliadače rešpektujú systémový motív, panel kariet môže byť takmer biely alebo takmer čierny u dvoch návštevníkov rovnakej stránky. Jednofarebný favicon navrhnutý pre jedného bude pre druhého nečitateľný.
Mnohé weby problém obchádzajú pridaním nepriehľadného farebného pozadia. Funguje to, no ikona sa zmení na vizuálne ťažký odznak, zatiaľ čo veľké značky používajú symbol bez pozadia.
Správnym riešením je nechať výber na prehliadač, čo ide aj bez JavaScriptu a zisťovania na serveri.
Ako funguje prispôsobivé SVG
Súbor SVG je dokument, nie nemenný obrázok: môže obsahovať značku style, a teda aj media queries. Pravidlo prefers-color-scheme: dark zmení farbu výplne kriviek, keď prehliadač používa tmavý motív.
SVG konkrétne definuje predvolenú farbu pre svetlý motív a pravidlo, ktoré ju v tmavom motíve nahradí. Prehliadač pri vykreslení použije správnu farbu a pri prepnutí motívu ihneď aktualizuje kartu.
Rovnaký mechanizmus umožňuje viac než jednoduché invertovanie: môžete zobraziť úplne odlišnú kresbu, napríklad samostatný symbol v svetlom motíve a plnú farebnú plochu v tmavom.
Deklarujte SVG spolu s .ico
SVG deklarujete pomocou link rel="icon" type="image/svg+xml" href="/favicon.svg". Prehliadače, ktoré ho podporujú, ho uprednostnia; ostatné použijú favicon.ico z koreňového adresára.
Nemusíte teda nič odstraňovať: oba súbory existujú vedľa seba a vzájomne pokrývajú odlišných klientov. Ide o princíp postupného vylepšovania použitý na ikonu s 32 pixelmi.
Dôležitá podmienka: SVG favicon musí byť samostatný. Externé písmo, vzdialený obrázok ani skript sa v tomto kontexte nenačítajú. Text treba previesť na krivky.
Na čo sa tmavý režim nevzťahuje
Tmavý variant sa týka faviconu v počítačových prehliadačoch. Nevzťahuje sa na ikonu Apple Touch, ktorá je nemenným nepriehľadným PNG, ani na ikony webového manifestu, ktoré Android zobrazuje na vlastnom pozadí.
Podpora tiež nie je univerzálna: prehliadače založené na Chromium a Firefox čítajú prispôsobivé SVG, Safari podľa verzie zaostáva. Automatický návrat k .ico však zachová funkčnosť.
Svetlú ikonu preto navrhnite ako predvolenú verziu pre všetkých návštevníkov a tmavý variant považujte za vylepšenie pre podporované prehliadače.
Primárne zdroje
Časté otázky
Vie favicon.ico podporovať tmavý režim?
Nie. ICO ukladá nemenné rastrové obrázky bez informácie o motíve. Media query môže obsahovať iba SVG, preto moderná sada obsahuje oba formáty.
Potrebujem dve SVG, svetlé a tmavé?
Nie, stačí jeden súbor. Oba varianty sú v rovnakom SVG oddelené pomocou media query prefers-color-scheme, čím odpadá ďalšia požiadavka aj detekčný kód.
Ako otestovať zobrazenie v tmavom motíve?
Prepnite motív operačného systému a obnovte kartu. Generátor zobrazuje svetlý a tmavý náhľad vedľa seba, takže nemusíte motívy prepínať.