Czarne logo na przezroczystym tle wygląda świetnie na jasnej karcie i znika na ciemnej. ICO nie potrafi się dostosować, ale favicon SVG potrafi: zawiera regułę CSS zmieniającą kolory zależnie od motywu przeglądarki.
Problem: jeden plik, dwa tła
Przeglądarki podążają za motywem systemu, więc pasek kart może być niemal biały u jednej osoby i niemal czarny u innej na tej samej stronie. Jednokolorowa favicon zaprojektowana dla jednego tła staje się nieczytelna na drugim.
Wiele witryn obchodzi ten problem, dodając nieprzezroczyste kolorowe tło. To działa, ale ikona staje się ciężką plamą, podczas gdy duże marki zwykle stosują sam symbol bez tła.
Dobrym rozwiązaniem jest pozostawienie wyboru przeglądarce. Da się to zrobić bez JavaScript i rozpoznawania motywu na serwerze.
Jak działa adaptacyjny SVG
Plik SVG jest dokumentem, a nie płaskim obrazem: może zawierać znacznik style, a więc zapytania medialne. Reguła prefers-color-scheme: dark zmienia kolor wypełnienia ścieżek, gdy przeglądarka używa ciemnego motywu.
W praktyce SVG deklaruje domyślny kolor dla jasnego motywu oraz regułę zastępującą go w trybie ciemnym. Przeglądarka stosuje właściwy kolor podczas renderowania i od razu aktualizuje kartę po zmianie motywu.
Ten mechanizm pozwala na więcej niż odwrócenie kolorów: możesz wyświetlić zupełnie inny rysunek, np. symbol bez tła w trybie jasnym i wypełnioną plakietkę w ciemnym.
Deklarowanie SVG obok .ico
Zadeklaruj SVG za pomocą link rel="icon" type="image/svg+xml" href="/favicon.svg". Przeglądarki, które go rozumieją, wybierają go w pierwszej kolejności, a pozostałe korzystają z favicon.ico w katalogu głównym.
Nie trzeba więc niczego usuwać: oba pliki współistnieją i wzajemnie uzupełniają obsługę przeglądarek. To stopniowe rozszerzanie możliwości zastosowane do ikony o rozmiarze 32 pikseli.
Jedno zastrzeżenie: favicon SVG musi być samodzielna. Zewnętrzna czcionka, zdalny obraz lub skrypt nie zostaną wczytane w tym kontekście. Tekst trzeba zamienić na krzywe.
Czego nie obejmuje tryb ciemny
Ciemny wariant dotyczy favicon przeglądarki na komputerze. Nie wpływa na ikonę Apple Touch, która jest stałym nieprzezroczystym PNG, ani na ikony manifestu, wyświetlane przez Androida na własnym tle.
Obsługa również nie jest uniwersalna: przeglądarki oparte na Chromium i Firefox odczytują adaptacyjny SVG, a Safari zależnie od wersji pozostaje w tyle. Nie stanowi to przeszkody, bo przejście na .ico jest automatyczne.
Zaprojektuj więc jasną ikonę jako wersję domyślną, widoczną dla każdego odwiedzającego, a ciemny wariant traktuj jako udoskonalenie dla obsługujących go przeglądarek.
Źródła pierwotne
Najczęstsze pytania
Czy favicon.ico obsługuje tryb ciemny?
Nie. ICO przechowuje stałe obrazy rastrowe bez informacji o motywie. Tylko SVG może zawierać zapytanie medialne, dlatego nowoczesny zestaw obejmuje oba formaty.
Czy potrzebne są dwa pliki SVG, jasny i ciemny?
Nie, wystarczy jeden plik. Oba warianty znajdują się w tym samym SVG, rozdzielone zapytaniem prefers-color-scheme. Pozwala to uniknąć dodatkowego żądania i kodu wykrywającego motyw.
Jak przetestować wygląd w ciemnym motywie?
Zmień motyw systemu operacyjnego i odśwież kartę. W generatorze podglądy jasnej i ciemnej karty są obok siebie, więc nie musisz przełączać motywu.