Jak dobrze wyświetlić favicon we współczesnych przeglądarkach
Myślę, że powinno się używać faviconów SVG. Są one obsługiwane we wszystkich nowoczesnych przeglądarkach. Nie potrzebujesz też pewnie tych wszystkich linków do ikon i rozmiarów, które kopiujesz z projektu do projektu. Sprawdźmy zatem, jakie jest absolutne minimum.
Ikona
Główny favicon może być plikiem SVG o dowolnym rozmiarze. Nie trzeba dodawać type=”image/svg+xml”.
<link rel="icon" href="favicon.svg">Maska ikony
W przypadku Safari jest trochę inaczej, bo musisz dodać mask-icon. Jest to również plik SVG, ale musi być w jednym kolorze i umieszczony na przezroczystym tle. Przeglądarka dodaje kolor atrybutu.
<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">Ikona touch
Jest to ikona dla urządzeń z systemem iOS oraz do listowania ulubionych stron na nowej karcie. Jedyne, czego potrzebujesz to rozmiar 180 x 180 - atrybut sizes jest zbędny.
<link rel="apple-touch-icon" href="apple-touch-icon.png">Manifest
manifest.json zawiera informacje o Twojej aplikacji webowej lub witrynie. Poniższe linie są obowiązkowe, aby pomyślnie przejść przez test Lighthouse. Ikona, która jest tu zalinkowana, jest używana przez Androida i Chrome, a rozmiar 512 x 512 to jedyne, czego potrzebujemy.
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
Wartość dla theme-color jest nadal wymagana do zmiany koloru przeglądarki Chrome na Androidzie.
<meta name="theme-color" content="#ffffff">I gotowe
To wszystkie ikony, których potrzebujesz w obecnych przeglądarkach. Można dodać msapplication-TileImage, jeśli chcesz mieć inną ikonę w kafelkach systemu Windows. W przeciwnym razie używana jest apple-touch-icon, a TileColor nie jest wykorzystywany.
Pozostałe rzeczy
Niestety, nie wszyscy korzystają z nowoczesnych przeglądarek, ALE można to łatwo rozwiązać, upuszczając plik 32 x 32 favicon.ico w katalogu głównym witryny. Zadziała to wszędzie, nawet na najstarszym sprzęcie.
Tryb Nocny
Na koniec, porada dotycząca trybu nocnego. Jedną z zalet SVG favicon jest to, że możesz zmienić kolor za pomocą CSS. Korzystając z zapytania prefers-color-scheme media, kolor faviconu zmienia się wraz z trybem nocnym lub jasnym. Ta metoda nie zadziała jednak z mask-icon, ponieważ kolor jest w atrybucie, ale Safari dodaje białe tło, jeśli kontrast jest niewystarczający.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>
Wynik
Oto rezultat naszych starań. Skopiuj to do <head> swojej witryny i nie zapomnij umieścić favicon.ico w katalogu głównym.
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">
Oryginał tekstu w języku angielskim możesz przeczytać tutaj.
