Az átlátszó hátterű fekete logó világos fülön tökéletes, sötéten eltűnik. Az ICO nem tud alkalmazkodni, az SVG-favicon viszont igen: CSS-szabállyal a böngésző témája szerint váltja a színeket.
A probléma: egy fájl, két háttér
A böngészők ma követik a rendszer témáját: ugyanazon az oldalon az egyik látogató fülsávja majdnem fehér, a másiké majdnem fekete lehet. Az egyikre tervezett egyszínű favicon a másikon olvashatatlanná válik.
Sok webhely nem átlátszó, színes háttérrel kerüli meg ezt. Működik, de az ikon nehézkes folttá válik, miközben a nagy márkák gyakran önálló, kivágott jelképet használnak.
A megfelelő megoldás, ha a böngésző választ. Ez JavaScript és szerveroldali felismerés nélkül is lehetséges.
Hogyan működik az alkalmazkodó SVG?
Az SVG dokumentum, nem sík kép: tartalmazhat style elemet, így médialekérdezéseket is. A beágyazott prefers-color-scheme: dark szabály újradefiniálja a görbék kitöltőszínét, amikor a böngésző sötét témát használ.
A gyakorlatban az SVG megad egy alapértelmezett színt a világos témához, majd egy szabályt, amely sötét módban lecseréli. A böngésző megjelenítéskor alkalmazza a megfelelőt, és témaváltáskor azonnal frissíti a fület.
Ugyanez többre képes egyszerű színmegfordításnál: teljesen más rajzot is megjeleníthetsz, például világos módban kivágott jelképet, sötétben kitöltött emblémát.
Az SVG megadása az .ico mellett
Add meg az SVG-t a link rel="icon" type="image/svg+xml" href="/favicon.svg" elemmel. Az ezt értő böngészők előnyben részesítik, a többiek a gyökérkönyvtár favicon.ico fájlját használják tartalékként.
Nem kell tehát semmit eltávolítani: a két fájl együtt él, mindegyik lefedi a másik által nem támogatott klienseket. Ez a fokozatos fejlesztés elve egy 32 képpontos ikonon.
Egy kikötés van: a faviconként használt SVG legyen önálló. Külső betűtípus, távoli kép vagy szkript ebben a környezetben nem töltődik be. A szöveget körvonalakká kell alakítani.
Mire nem terjed ki a sötét mód?
A sötét változat az asztali böngésző faviconjára vonatkozik. Nem érinti a rögzített, nem átlátszó PNG-ként működő Apple Touch ikont, sem a webes jegyzék ikonjait, amelyeket az Android saját hátterén jelenít meg.
A támogatás sem egyetemes: a Chromium-alapú böngészők és a Firefox olvassák az alkalmazkodó SVG-t, a Safari verziótól függően lemaradhat. Az .ico tartalék automatikus használata ezt kezeli.
Ezért a világos ikont tervezd meg alapértelmezésként, amely minden látogató számára elérhető. A sötét változat legyen kiegészítő finomítás az azt támogató böngészőknek.
Elsődleges források
Gyakori kérdések
Kezeli a favicon.ico a sötét módot?
Nem. Az ICO rögzített raszterképeket tárol, nem ismeri a témákat. Médialekérdezést csak az SVG tartalmazhat, ezért készül mindkettő a korszerű csomagban.
Két SVG-fájl kell, egy világos és egy sötét?
Nem, egy fájl elegendő. Mindkét változat ugyanabban az SVG-ben található, a prefers-color-scheme médialekérdezéssel elválasztva, így nincs további kérés vagy felismerő kód.
Hogyan teszteljem a sötét megjelenítést?
Váltsd át az operációs rendszer témáját, majd töltsd újra a fület. A generátorban a világos és a sötét fül előnézete egymás mellett látható, így nincs szükség folytonos váltogatásra.