Favicon (.ico) vs SVG

SVG to format wektorowy, co oznacza, że ​​pojedyncza favikona SVG jest renderowana przy dowolnej gęstości pikseli bez degradacji. Na wyświetlaczu 1x renderuje się w rozdzielczości 16 × 16 pikseli; na wyświetlaczu Retina 3x renderuje w fizycznych pikselach 48 × 48 z tego samego pliku. Żaden pakiet ICO z 4 ramkami rastrowymi o określonym rozmiarze nie może się równać z tą automatyczną obsługą gęstości. SVG to idealny format dla nowoczesnych wyświetlaczy o wysokiej rozdzielczości.

Format .ico pozostaje uniwersalnym punktem odniesienia. Każda przeglądarka na komputerze stacjonarnym, przeglądarka mobilna, system operacyjny i narzędzie innej firmy zajmujące się ikonami internetowymi obsługują favicon.ico od końca lat 90-tych. Wiele z tych środowisk w ogóle nie sprawdza znaczników łączy HTML — po prostu próbują pobrać /favicon.ico z katalogu głównego domeny w ramach konwencji. Usunięcie .ico z konfiguracji natychmiast powoduje przerwanie ulubionych ikon dla znaczącego segmentu użytkowników i narzędzi.

Obsługa trybu ciemnego to zabójcza funkcja ulubionych ikon SVG. Plik SVG może osadzić blok `<style>` z zapytaniem `@media (prefers-color-scheme: dark)`. Gdy przeglądarka znajduje się w trybie ciemnym, zapytanie zostaje aktywowane i może zmienić wypełnienie, obrys lub kolor tła ikony. Nie jest to możliwe w przypadku plików .ico lub PNG — te formaty to statyczne rastry bez świadomości ekologicznej.

Obsługa przeglądarek dla ulubionych ikon SVG znacznie się rozwinęła. Chrome 80+ (wydanie 2020), Edge 80+, Firefox 41+ i Safari 15+ (wydanie 2021) obsługują `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`. Od 2026 r. zdecydowana większość aktywnych instalacji przeglądarek obsługuje ikony ulubionych SVG. Godnym uwagi wyjątkiem jest starszy Safari (sprzed 15) na starszych urządzeniach iOS — te automatycznie wracają do .ico.

Rozmiar pliku to kolejna zaleta SVG. Czysta, monochromatyczna favikona SVG dla prostego znaku ma zazwyczaj mniej niż 1 KB. Plik .ico zawierający ramki rastrowe o wielkości 16, 32, 48 i 64 pikseli w dobrej jakości wynosi zazwyczaj 10–25 KB. W przypadku witryn o bardzo krótkim czasie ładowania wysyłka favikony SVG zamiast samodzielnego zestawu PNG znacznie zmniejsza ładowność favikon — chociaż każdy format jest buforowany po pierwszym załadowaniu.

Składnia łączenia faviconów SVG różni się nieco od składni .ico. Potrzebujesz wyraźnego atrybutu typu: `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`. Bez atrybutu type niektóre przeglądarki nie rozpoznają pliku jako favikony. Najpierw połącz to ze znacznikiem łącza zastępczego .ico: `<link rel='icon' href='/favicon.ico'>`. Przeglądarki obsługujące ikony ulubionych SVG preferują bardziej szczegółowy tag SVG; inni wpadają do .ico.

Optymalizację SVG warto przeprowadzić przed wdrożeniem favikony. Narzędzia projektowe eksportują SVG z metadanymi edytora, komentarzami, niewidocznymi ścieżkami i nadmiarowymi atrybutami, które dodają bajty bez żadnego wkładu wizualnego. Uruchomienie SVG poprzez SVG optimizer może zmniejszyć rozmiar pliku o 50-80%, zachowując jednocześnie identyczność ikony. Mniejsze SVG również analizują szybciej, co ma znaczenie w przypadku wolniejszych połączeń.

Format .ico obsługuje integrację z systemem operacyjnym Windows, której SVG nie może. Skróty na pulpicie utworzone z kart przeglądarki, pinów na pasku zadań i ikon Windows Eksploratora plików mają odczyt /favicon.ico. SVG nie jest rozpoznawanym formatem ikon Windows w tych kontekstach. Nawet użytkownicy, którzy na kartach przeglądarki widzą przede wszystkim favikonę SVG, po utworzeniu skrótu Windows do Twojej witryny zobaczą wersję .ico.

Animowanie favikony jest możliwe za pomocą SVG przy użyciu elementów `<animate>` lub animacji SMIL w pliku SVG. Animowana favikona SVG może pulsować, obracać się lub zmieniać kolor. Obsługa animacji SVG w faviconach przez przeglądarkę jest ograniczona (obsługują ją Chrome i Edge; Firefox i Safari nie), ale jest to kreatywna opcja dla aplikacji internetowych, które chcą wyświetlać zmiany statusu (np. wskaźniki ładowania, nowe kropki powiadomień) za pośrednictwem favikony.

Favicony SVG obsługują zaawansowane tryby kolorów wykraczające poza proste przełączanie ciemności/jasności. Możesz używać niestandardowych właściwości CSS wewnątrz SVG, odpowiadać na zapytania o media `forced-colors` dla trybu wysokiego kontrastu i używać wielu punktów przerwania schematu kolorów. Ten poziom motywów jest niemożliwy w przypadku formatów rastrowych i sprawia, że ​​SVG jest najlepszym wyborem dla systemów projektowych zorientowanych na dostępność.

Praktycznym ograniczeniem SVG w produkcji jest to, że nadal potrzebujesz rezerwy innej niż SVG. Najprostszym podejściem jest utrzymanie SVG jako głównej ikony i wygenerowanie plików .ico i apple-touch-icon PNG z tego samego źródła SVG. favicon generator akceptuje SVG jako format źródłowy i generuje pliki wyjściowe .ico oraz PNG z danych wektorowych – bez utraty jakości spowodowanej rasteryzacją.

W przypadku kart udostępniania w mediach społecznościowych, obrazów OG i rozwijania linków format źródła favikony nie ma znaczenia — platformy społecznościowe pobierają favikonę z Twojego HTML lub /favicon.ico i konwertują ją wewnętrznie. Niezależnie od tego, czy Twoja favikona to .ico, PNG czy SVG, rozwinięta karta łącza wyświetli ikonę niezależnie od tego. Skoncentruj się na jakości treści ikon, a nie na formacie scenariuszy udostępniania społecznościowego.

Implementacja zalecanej konfiguracji ico+SVG obejmuje tylko trzy znaczniki łączy: `.ico` rezerwowy, `image/svg+xml` SVG i `apple-touch-icon` PNG. Przeglądarki czytają je według specyfiki — najpierw najbardziej specyficzny format — i wybierają pierwszy, który obsługują. To podejście polegające na stopniowym ulepszaniu oznacza, że ​​każdy użytkownik otrzymuje najlepszą favikonę, jaką obsługuje jego przeglądarka. Pełną macierz decyzyjną można znaleźć w best favicon format guide.