Černé logo na průhledném pozadí vypadá skvěle na světlé kartě a na tmavé je neviditelné. ICO se přizpůsobit neumí, ale SVG favicon ano: obsahuje CSS pravidlo měnící barvy podle motivu prohlížeče.
Problém: jeden soubor, dvě pozadí
Prohlížeče se řídí systémovým motivem, takže dva návštěvníci stejné stránky mohou mít lištu karet téměř bílou nebo téměř černou. Jednobarevná favicon navržená pro jeden motiv je ve druhém nečitelná.
Mnoho webů problém obchází přidáním neprůhledného barevného pozadí. Funguje to, ale ikona pak působí jako těžkopádný barevný terč, zatímco velké značky používají samotný symbol bez pozadí.
Správným řešením je nechat výběr na prohlížeči. Jde to bez JavaScriptu i detekce na serveru.
Jak funguje přizpůsobivé SVG
Soubor SVG je dokument, ne pevný obrázek: může obsahovat značku style, a tedy i mediální dotazy. Pravidlem prefers-color-scheme: dark v něm předefinujete barvu výplně křivek pro tmavý motiv prohlížeče.
SVG konkrétně definuje výchozí barvu pro světlý motiv a pravidlo, které ji v tmavém motivu nahradí. Prohlížeč při vykreslení použije správnou variantu a při přepnutí motivu návštěvníkem kartu okamžitě aktualizuje.
Stejným mechanismem lze provést víc než jen invertovat barvy: můžete zobrazit zcela odlišnou kresbu, například samostatný symbol ve světlém režimu a plnou barevnou ikonu v tmavém.
Deklarujte SVG vedle .ico
SVG deklarujete pomocí link rel="icon" type="image/svg+xml" href="/favicon.svg". Prohlížeče, které ho podporují, mu dají přednost, ostatní použijí favicon.ico z kořenového adresáře.
Nemusíte tedy nic mazat: oba soubory fungují společně a vzájemně pokrývají různé klienty. Jde o princip postupného vylepšování použitý na ikonu o velikosti 32 pixelů.
Pozor na jednu věc: SVG favicon musí být samostatná. Externí písmo, vzdálený obrázek ani skript se v tomto kontextu nenačtou. Text musíte převést na křivky.
Na co se tmavý režim nevztahuje
Tmavá varianta se týká favicon v desktopových prohlížečích. Neplatí pro ikonu Apple Touch, která je pevným neprůhledným PNG, ani pro ikony webového manifestu, které Android zobrazuje na vlastním pozadí.
Ani podpora není univerzální: prohlížeče založené na Chromiu a Firefox přizpůsobivé SVG čtou, Safari podle verze zaostává. To nevadí, protože automaticky nastoupí záložní .ico.
Světlou ikonu proto navrhněte jako výchozí variantu pro všechny návštěvníky a tmavou berte jako vylepšení pro ty, jejichž prohlížeč ji podporuje.
Primární zdroje
Časté otázky
Umí favicon.ico tmavý režim?
Ne. ICO ukládá pevné rastrové obrázky bez podpory motivů. Mediální dotaz může obsahovat jen SVG, proto moderní sada obsahuje oba formáty.
Potřebuji dva soubory SVG, světlý a tmavý?
Ne, stačí jediný soubor. Obě varianty jsou v jednom SVG, oddělené mediálním dotazem prefers-color-scheme. Odpadá další požadavek i kód pro detekci motivu.
Jak otestovat vzhled v tmavém motivu?
Přepněte motiv operačního systému a znovu načtěte kartu. Generátor zobrazuje náhledy světlé a tmavé karty vedle sebe, takže mezi nimi nemusíte přepínat.