Sytuacja kobiet w IT w 2024 roku
26.11.20212 min
Antoine Boulanger

Antoine BoulangerLead Front-end Engineer Locomotive

Jak dobrze wyświetlić favicon we współczesnych przeglądarkach

Zobacz, w jaki sposób zdefiniować i wyświetlić favicon we współczesnych przeglądarkach, tak aby zachować kompatybilność, jak najmniejszą ilością kodu.

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.

<p>Loading...</p>