Favicony SVG: Dlaczego są lepsze i jak faktycznie je używać

Sprawa z faviconami wygląda tak: tkwimy w pikselowatych plikach ICO od 1999 roku. Dwadzieścia pięć lat rozmytych maleńkich ikon. Ale favicony SVG? Są naprawdę świetne — a większość deweloperów wciąż ich nie używa.

Pokażę Ci, dlaczego warto rozważyć przejście na SVG i, co ważniejsze, jak to zrobić nie psując niczego dla użytkowników starszych przeglądarek.

Dlaczego favicony SVG naprawdę się opłacają

Nieskończone skalowanie bez rozmycia

Pamiętasz tworzenie pięciu różnych rozmiarów PNG dla favicony? 16x16, 32x32, 48x48... szybko się to nudzi. Z SVG tworzysz jeden plik. To wszystko. Wygląda ostro zarówno wyświetlany w 16 pikselach w karcie przeglądarki, jak i w 512 pikselach na ekranie powitalnym PWA.

Typowa favicona SVG waży 300-800 bajtów. Dla porównania, pakiet favicony PNG to 2-5 KB. To 85-95% redukcji rozmiaru. Nie ogromna różnica w wartościach bezwzględnych, ale każdy bajt się liczy przy optymalizacji.

Tryb ciemny, który po prostu działa

To jest kluczowa funkcja. W faviconie SVG możesz osadzić zapytania medialne CSS bezpośrednio w pliku. Gdy użytkownik przełączy się na tryb ciemny, Twoja favicona automatycznie się dostosuje.

Oto jak to wygląda w praktyce:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M16 4L4 28h24L16 4z"/>
</svg>

To prosty trójkąt, który jest ciemny na jasnych tłach i jasny na ciemnych tłach. Żadnego JavaScriptu. Żadnego wykrywania po stronie serwera. Po prostu działa.

Stylowanie CSS i animacja

Ponieważ SVG to zasadniczo XML ze stylowaniem, możesz robić rzeczy niemożliwe z formatami rastrowymi:

Zmiana kolorów przy najechaniu myszą (w obsługiwanych kontekstach)
Dodawanie subtelnych animacji
Używanie zmiennych CSS do motywowania
Modyfikowanie stylów JavaScriptem

Nie przesadzałbym z animacjami w faviconie — to trochę irytujące. Ale samo posiadanie takiej opcji jest miłe.

Sytuacja ze wsparciem przeglądarek

Bądźmy szczerzy: wsparcie favicony SVG nie jest idealne. Oto rzeczywistość na 2025 rok:

Pełne wsparcie:

Chrome 80+ (desktop i Android)
Firefox 41+
Edge 80+
Opera 44+
Samsung Internet 13+

Brak wsparcia:

Safari (zarówno desktop, jak i iOS)
Internet Explorer
Android Browser

Safari to duży problem. Przeglądarka Apple wciąż nie obsługuje favicony SVG, co oznacza, że około 20% użytkowników nie zobaczy Twojej ikony SVG. Potrzebujesz rozwiązania awaryjnego.

Prawidłowe wdrażanie favicony SVG

Podstawowa konfiguracja z rozwiązaniami awaryjnymi

Oto znaczniki pokrywające wszystkich:

<head>
  <!-- ICO fallback for very old browsers -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- SVG for modern browsers -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- PNG fallback for Safari -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon (Safari won't use your SVG) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Kolejność ma znaczenie. Przeglądarki parsują je sekwencyjnie i używają ostatniego, które obsługują. Nowoczesne przeglądarki wezmą SVG, Safari użyje PNG, a bardzo stare przeglądarki sięgną po ICO.

Pro tip: Zapobieganie pobieraniu ICO przez Chrome

Chrome czasem pobiera ICO nawet gdy SVG jest dostępne. Dodaj sizes="32x32" do linku ICO — to mówi Chrome, że ICO jest tylko dla tego konkretnego rozmiaru, więc preferuje skalowalne SVG.

Tworzenie adaptacyjnego SVG dla trybu ciemnego

Oto bardziej kompletny przykład:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #ffffff; }
    .icon-fg { fill: #000000; }

    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #1a1a1a; }
      .icon-fg { fill: #f0f0f0; }
    }
  </style>

  <circle class="icon-bg" cx="16" cy="16" r="15"/>
  <text class="icon-fg" x="16" y="21"
        text-anchor="middle"
        font-family="system-ui"
        font-weight="bold"
        font-size="18">F</text>
</svg>

To tworzy okrągłą ikonę z literą, która odwraca kolory w zależności od preferencji systemowych.

Rozmiar pliku — sprawdzenie rzeczywistości

Ludzie czasem twierdzą, że SVG jest zawsze mniejszy. To nie do końca prawda. Oto jak to wygląda:

Proste ikony geometryczne: SVG wygrywa, często znacząco
Złożone ilustracje: PNG może być faktycznie mniejszy
Zdjęcia lub szczegółowe grafiki: Nie używaj ich jako favicony

Dla typowych favicony w stylu logotypu (kształty, litery, proste grafiki), SVG jest prawie zawsze lepszym wyborem pod względem rozmiaru pliku.

Wskazówki optymalizacji

Przed wdrożeniem favicony SVG przepuść ją przez SVGOMG lub podobny optymalizator. Narzędzia eksportowe jak Illustrator i Figma dodają mnóstwo zbędnych danych — metadane, komentarze edytora, niepotrzebna precyzja współrzędnych.

Dobra optymalizacja może zmniejszyć rozmiar SVG o 50-70%.

Ponadto utrzymuj proste projekty. Złożone gradienty, filtry i setki ścieżek nie tylko zwiększą rozmiar pliku — mogą powodować opóźnienia renderowania.

Ważna kwestia o wykrywaniu motywu

Zapytanie medialne prefers-color-scheme wewnątrz SVG podąża za preferencją systemu operacyjnego, nie ustawieniem motywu przeglądarki. Jeśli ktoś używa macOS w trybie ciemnym, ale ma przeglądarkę ustawioną na jasny motyw, favicona będzie nadal w stylu trybu ciemnego.

To pasuje do sposobu, w jaki większość witryn obsługuje tryb ciemny, ale warto o tym wiedzieć.

Czy powinieneś przejść na SVG?

Jeśli Twoja obecna favicona to prosty kształt lub logotyp literowy, SVG prawdopodobnie się opłaca. Zyskujesz:

Jeden plik zamiast wielu
Automatyczną obsługę trybu ciemnego
Mniejszy łączny rozmiar pliku
Przyszłościową skalowalność

Jeśli Twoja favicona to szczegółowa ilustracja lub masz dużo użytkowników Safari, zostań przy PNG jako głównym formacie.

Najlepsze podejście dla większości stron? Użyj obu. SVG dla przeglądarek, które go obsługują, PNG jako rozwiązanie awaryjne dla tych, które nie obsługują. Konfiguracja zajmuje dodatkowe 5 minut i pokrywa 100% użytkowników.

Szybka lista kontrolna implementacji

[ ] Stwórz faviconę SVG (zachowaj prostotę)
[ ] Dodaj zapytanie medialne trybu ciemnego, jeśli potrzebne
[ ] Zoptymalizuj za pomocą SVGOMG
[ ] Stwórz awaryjny PNG (minimum 32x32)
[ ] Stwórz apple-touch-icon.png (180x180)
[ ] Dodaj prawidłowe tagi link z kolejnością awaryjną
[ ] Przetestuj w Chrome, Firefox i Safari

To naprawdę wszystko. Favicony SVG nie są skomplikowane — są po prostu za mało wykorzystywane. Wypróbuj je w swoim następnym projekcie.

Źródła

Can I Use - SVG Favicons - Dane kompatybilności przeglądarek dla obsługi favicony SVG
Building an Adaptive Favicon - web.dev - Przewodnik Google po tworzeniu adaptacyjnych favicony
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - Kompleksowa eksploracja możliwości favicony SVG
How to Favicon in 2025 - Evil Martians - Praktyczny nowoczesny przewodnik implementacji favicony