Kolor motywu i ikony aplikacji

Znacznik <meta name="theme-color" content="#1f2937"> ustawia kolor paska adresu przeglądarki na urządzeniach mobilnych oraz kolor paska tytułu w aplikacjach PWA na komputerach. Nadaje stronie dopracowany, przypominający aplikację wygląd bez zmieniania jej zawartości.

Udostępnij osobne kolory dla jasnego i ciemnego trybu: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> oraz drugi znacznik z kolorem dla trybu ciemnego. Przeglądarki wybiorą właściwy znacznik na podstawie preferencji systemu operacyjnego użytkownika.

Wartość theme_color w manifeście określa kolor używany, gdy aplikacja działa jako zainstalowana PWA (pasek tytułu samodzielnego okna). Należy dopasować ją do umieszczonego na stronie znacznika meta theme-color, aby zachować spójność — niezależnie od tego, czy aplikacja działa w przeglądarce, czy jest zainstalowana, jej identyfikacja wizualna pozostaje taka sama.

<link rel="icon" href="/favicon.ico"> to ponadczasowa ikona karty przeglądarki. Mimo nazwy nowoczesne przeglądarki preferują format PNG lub SVG zamiast ICO. Należy udostępnić obraz PNG w rozmiarze 32x32 za pomocą <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">, aby uzyskać wyraźniejsze renderowanie.

Nowoczesne przeglądarki obsługują ikony favicon w formacie SVG: <link rel="icon" type="image/svg+xml" href="/icon.svg">. Zapewniają one ostrość w każdym rozmiarze i zajmują niewiele miejsca. Należy używać ich w przypadku logotypów wektorowych, a dla przeglądarek, które nie obsługują ikon favicon SVG, dodać zapasową wersję PNG.

Na ekranie początkowym systemu iOS używana jest ikona apple-touch-icon: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Należy udostępnić obraz PNG w rozmiarze 180x180. System iOS nie odczytuje ikon z manifestu webowego podczas instalowania na ekranie początkowym — wymagany jest odnośnik apple-touch-icon.

Podczas instalacji na Androidzie ikony są odczytywane z tablicy icons w manifeście. Należy dołączyć obrazy PNG w rozmiarach 192x192 (ekran początkowy) i 512x512 (ekran powitalny, szuflada aplikacji). Warto dodać kopię z celem "maskable", aby Android mógł dopasować ikonę do kształtu ikon na ekranie początkowym (koła, zaokrąglonego kwadratu lub kwadratu).

W przypadku ikon maskable najważniejsza zawartość powinna mieścić się w centralnej bezpiecznej strefie obejmującej 80% obrazu — zewnętrzne 20% może zostać przycięte w zależności od kształtu maski urządzenia. Podczas projektowania należy używać narzędzi takich jak maskable.app, aby wyświetlać podgląd ikony z różnymi kształtami masek.

W przypadku przypiętego kafelka w systemie Windows 8/10 należy użyć: <meta name="msapplication-TileImage" content="/tile.png"> oraz <meta name="msapplication-TileColor" content="#1f2937">. Obecnie ma to mniejsze znaczenie niż rozwiązania dla innych platform, ale użytkownicy systemu Windows przypinający strony nadal to doceniają.

W starszych wersjach IE/Edge znacznik <meta name="msapplication-config" content="/browserconfig.xml"> wskazuje plik XML z ikonami kafelków w wielu rozmiarach. Obecnie ma on w większości przypadków znaczenie historyczne; nowe witryny mogą pominąć browserconfig.xml bez żadnych konsekwencji.

Przypięta karta Safari w systemie macOS: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. Plik SVG powinien zawierać ikonę w jednym kolorze (kolor jest zastępowany wartością atrybutu color). Funkcja ta jest używana wyłącznie przez mechanizm przypiętych kart w Safari dla systemu macOS.

Za pomocą realfavicongenerator.net można wygenerować wszystkie warianty ikon na podstawie jednego źródła. Należy przetestować je na rzeczywistym urządzeniu z systemem iOS (dodać aplikację do ekranu początkowego) oraz Androidem (zainstalować aplikację z menu przeglądarki), aby sprawdzić, czy ikony są prawidłowo przycięte i nie są rozpikselowane.

Jaki jest cel użycia wartości "maskable" dla ikony w manifeście aplikacji webowej?

theme-color (z wariantami zależnymi od zapytań medialnych) zmienia kolor paska adresu, a theme_color w manifeście — kolor paska tytułu zainstalowanej aplikacji. Ikony obejmują favicony (SVG + PNG), apple-touch-icon (iOS, 180x180), ikony manifestu (Android, 192 + 512 + maskable), mask-icon Safari (jednokolorowy SVG) oraz msapplication-TileImage (przypięte kafelki Windows). Za pomocą realfavicongenerator.net można wygenerować wszystkie warianty na podstawie jednego źródła.