Czy wystarczy jeden plik favicon.ico?

Zwykle tak w przypadku przeglądarek na komputery, o ile zawiera rozmiary 16, 32 i 48 px. Ekran główny iPhone'a i uruchamianie aplikacji na Androidzie wymagają jednak osobnych plików PNG, więc lepiej przygotować je również.

Dlaczego mój nowy favicon się nie wyświetla?

Najczęściej winna jest pamięć podręczna. Otwórz stronę w oknie prywatnym, wyczyść dane przeglądarki albo zmień nazwę pliku lub dodaj parametr ?v=2. Wyszukiwarki mogą odświeżyć swoją kopię ikony dopiero po kilku dniach lub jeszcze dłużej.

Czy favicon może być plikiem JPG?

Niektóre przeglądarki go zaakceptują, ale JPG nie obsługuje przezroczystości i nie jest standardowym wyborem. Użyj zamiast niego PNG, ICO lub SVG.

Jak zrobić favicon: rozmiary, formaty i kod HTML

Favicon to maleńka ikona witryny widoczna na kartach przeglądarki, w zakładkach i w wynikach wyszukiwania. Wygląda na drobiazg, ale strona bez niej sprawia wrażenie niedokończonej, a zły rozmiar lub format może sprawić, że ikona będzie rozmazana. Ten poradnik wyjaśnia, jakich rozmiarów potrzebujesz, jaki format wybrać i jaki kod umieścić na stronie.

Czym jest favicon i gdzie się pojawia

Favicon (od ang. favorite icon) to mały kwadratowy obraz, który przeglądarki wyświetlają obok tytułu strony na karcie, na liście zakładek i w historii. Na urządzeniach mobilnych wyniki wyszukiwania Google również pokazują ikonę witryny obok adresu, więc wyraźny favicon pomaga ludziom rozpoznać Twoją stronę.

Jeśli nie zadeklarujesz ikony, przeglądarki zwykle próbują pobrać /favicon.ico z głównego katalogu witryny. Gdy go nie ma, pokazują ogólny symbol globu lub pustej strony.

Jakich rozmiarów potrzebujesz

Nie ma jednego uniwersalnego rozmiaru, ponieważ różne miejsca używają różnych plików. W praktyce wystarczy niewielki zestaw, który możesz przygotować z jednego kwadratowego pliku PNG o boku co najmniej 512 px.

Rozmiar	Zastosowanie
16x16 px	Karta przeglądarki (ekrany o standardowej gęstości)
32x32 px	Karta na ekranach o wysokiej gęstości, pasek zadań
48x48 px	Niektóre przeglądarki i wyszukiwarki, skróty w systemie Windows
180x180 px	apple-touch-icon, gdy witryna jest dodawana do ekranu głównego iPhone'a lub iPada
192x192 px	Manifest aplikacji internetowej, ekran główny Androida
512x512 px	Manifest aplikacji internetowej, ekrany startowe i większe ikony aplikacji

ICO, PNG czy SVG

ICO to stary format kontenera, który może przechowywać kilka rozmiarów (na przykład 16, 32 i 48 px) w jednym pliku. Obsługują go wszystkie przeglądarki, więc /favicon.ico nadal przydaje się jako rozwiązanie awaryjne.

PNG jest prosty i niezawodny: nadaje się do wersji 32, 180, 192 i 512 px i obsługuje przezroczystość. SVG to format wektorowy obsługiwany przez nowoczesne przeglądarki: jeden plik pozostaje ostry w każdym rozmiarze i może nawet dostosowywać się do trybu ciemnego. Safari i niektóre starsze narzędzia obsługują jednak favicony SVG tylko częściowo, dlatego najbezpieczniej połączyć formaty: ICO jako rozwiązanie awaryjne, PNG dla ikon Apple i manifestu oraz SVG jako opcjonalny dodatek.

Jak stworzyć favicon z pliku PNG

Zacznij od kwadratowego obrazu, najlepiej 512x512 px lub większego, o wyraźnym i prostym wzorze. Jeśli masz tylko plik JPG, możesz najpierw przekonwertować go do PNG, aby później w edytorze grafiki dodać przezroczyste tło.

Przygotuj kwadratowy plik PNG z prostym logo lub pojedynczą literą.
Przekonwertuj go do ICO narzędziem PNG do ICO i zapisz jako favicon.ico.
Osobno zapisz kopie PNG w rozmiarach 180x180 (apple-touch-icon.png), 192x192 i 512x512 dla manifestu aplikacji internetowej.
Prześlij pliki do głównego katalogu witryny i dodaj znaczniki HTML do sekcji <head>.

Znaczniki HTML do dodania

Umieść te wiersze w sekcji <head> swojej strony (dostosuj ścieżki do miejsca, w którym leżą Twoje pliki):

W pliku site.webmanifest, w sekcji icons, wymień pliki PNG 192x192 i 512x512. Jeśli nie masz pliku SVG, po prostu pomiń ten wiersz.

Częste błędy

Obraz, który nie jest kwadratem: przeglądarka ściska go lub przycina, a ikona wygląda na zniekształconą. Zawsze zaczynaj od kwadratu.
Zbyt wiele szczegółów: przy 16x16 px mały tekst i cienie zamieniają się w plamę. Użyj jednego prostego kształtu, zdecydowanych kolorów i silnego kontrastu.
Zbyt mały plik źródłowy: powiększanie małego obrazu powoduje rozmycie. Zmniejszanie dużego jest znacznie bezpieczniejsze.
Przezroczyste tło na ciemnej karcie: ciemne logo może zniknąć. Sprawdź je w jasnym i ciemnym motywie albo dodaj kolor tła.
Pamięć podręczna: przeglądarki uparcie zapamiętują favicony, więc stara ikona może nadal się wyświetlać po jej zmianie. Sprawdź w oknie prywatnym, odśwież stronę z pominięciem pamięci podręcznej (Ctrl+F5) lub dodaj wersję, na przykład /favicon.ico?v=2.

Przykład krok po kroku, od początku do końca

Załóżmy, że masz logo w pliku PNG o wymiarach 1024x1024 px i chcesz przygotować pełny zestaw ikon dla swojej witryny. Najpierw zobacz logo pomniejszone do 16x16 px: czy nadal rozpoznajesz kształt? Jeśli nie, przygotuj uproszczoną wersję, na przykład samą pierwszą literę na jednolitym tle. Dopiero potem wyeksportuj poszczególne rozmiary.

Następnie przygotuj pliki: favicon.ico (16, 32 i 48 px w jednym pliku), apple-touch-icon.png (180x180), icon-192.png i icon-512.png. To cztery pliki, wystarczające w niemal każdej sytuacji. Prześlij je do głównego katalogu witryny, dodaj znaczniki do sekcji <head> i otwórz stronę w oknie prywatnym, aby sprawdzić efekt.

Jak sprawdzić, czy wszystko działa

Otwórz bezpośrednio w przeglądarce https://twoja-strona/favicon.ico: powinieneś zobaczyć ikonę, a nie błąd 404.
W narzędziach deweloperskich (F12, karta Sieć) odśwież stronę i upewnij się, że żądania ikon zwracają status 200.
Obejrzyj kartę w jasnym i ciemnym motywie przeglądarki: logo musi pozostać czytelne w obu.
Na telefonie dodaj witrynę do ekranu głównego i sprawdź, czy wyświetla się ikona 180 px, a nie zrzut ekranu strony.
Upewnij się, że site.webmanifest jest poprawnym plikiem JSON, a ścieżki w nim wskazują istniejące pliki.