Jak używać
- Wybierz opcję Litery i wpisz jeden lub dwa znaki, a następnie ustaw ich kolory. Możesz też wybrać opcję Obraz i wskazać logo — najlepiej kwadratowe, o rozmiarze co najmniej 512 px.
- Sprawdź podgląd w każdym rozmiarze, zwłaszcza 16 i 32 px, używanych na kartach przeglądarki.
- Pobierz plik ZIP i prześlij jego zawartość do katalogu głównego witryny.
- Wklej tagi HTML do sekcji head swoich stron i w razie potrzeby zmień nazwę w pliku site.webmanifest.
Jak to działa
Przeglądarki i urządzenia szukają ikon w różnych miejscach. Utworzony tutaj zestaw obejmuje najczęściej używane warianty: favicon.ico z obrazami w rozmiarach 16, 32 i 48 px, używanymi na kartach przeglądarki i na liście zakładek oraz przez starsze programy, które automatycznie pobierają plik /favicon.ico; pliki PNG w rozmiarach 16 i 32 px, wskazywane w tagach link; apple-touch-icon o rozmiarze 180 × 180, używany po dodaniu witryny do ekranu początkowego iPhone’a lub iPada; oraz ikony w rozmiarach 192 i 512 px, wskazywane w pliku site.webmanifest i używane na ekranach początkowych urządzeń z Androidem oraz w instalowanych aplikacjach internetowych.
Plik favicon.ico przechowuje ikony w formacie PNG w kontenerze ICO, który obsługują wszystkie współczesne przeglądarki oraz system Windows Vista i nowsze. Pliki ICO i ZIP są tworzone przez kod na tej stronie — żadne dane nie są wysyłane na serwer.
Małe rozmiary wymagają prostego projektu: przy 16 × 16 pikselach cienkie linie i drobny tekst stają się niewidoczne, dlatego lepiej sprawdzi się wyraźna litera lub uproszczony znak logo niż pełne logo z tekstem. Obraz jest pomniejszany w kilku etapach, z zachowaniem wysokiej jakości. apple-touch-icon zawsze otrzymuje jednolite tło, ponieważ system iOS wypełnia przezroczyste obszary kolorem czarnym, a zaokrąglenie narożników dodaje sam.
Po przesłaniu nowych ikon przeglądarki mogą przez jakiś czas wyświetlać poprzednią faviconę, ponieważ długo przechowują ją w pamięci podręcznej. Zwykle pomaga wymuszenie odświeżenia strony albo bezpośrednie otwarcie pliku /favicon.ico.
Przykłady
Ikona z liter dla nowego projektu
Wpisanie „TG” białymi literami na ciemnozielonym, zaokrąglonym kwadracie daje czytelną ikonę, która dobrze wygląda nawet w rozmiarze 16 × 16 px na karcie przeglądarki — nie trzeba projektować logo.
Ikona z istniejącego logo
Logo w formacie PNG o rozmiarze 1024 × 1024 i przezroczystym tle, z opcją Dopasuj cały obraz, tworzy przezroczyste ikony kart oraz apple-touch-icon na tle w kolorze marki.
Szerokie logo
W przypadku logotypu o rozmiarze 1200 × 300 opcja Przytnij środek pozostawia tylko środkowe litery. Dopasuj cały obraz zachowuje całość, ale ikona jest wtedy bardzo mała; zwykle lepiej sprawdzi się osobny, kwadratowy znak logo.
Często zadawane pytania
Czy nadal potrzebuję pliku favicon.ico?
Tak, nadal się przydaje. Niektóre przeglądarki, czytniki kanałów i narzędzia pobierają plik /favicon.ico z katalogu głównego witryny nawet bez tagu link. Współczesne przeglądarki korzystają także z ikon PNG wskazanych w kodzie HTML.
Gdzie umieścić pliki?
Prześlij je do katalogu głównego witryny, obok strony głównej, aby działały ścieżki /favicon.ico i pozostałe ścieżki w kodzie HTML. Jeśli używasz podkatalogu, zmień ścieżki w tagach link i pliku site.webmanifest.
Dlaczego nadal widzę starą faviconę?
Przeglądarki przechowują favicony w osobnej pamięci podręcznej i robią to przez długi czas. Wymuś odświeżenie strony, otwórz plik /favicon.ico w nowej karcie lub sprawdź stronę w oknie prywatnym. Zmiana nazw plików, na przykład na favicon-v2.ico, również wymusza ich ponowne pobranie.
Czy narzędzie tworzy faviconę SVG?
Nie. Narzędzie tworzy pliki PNG i ICO, które działają wszędzie. Jeśli masz już logo SVG, możesz dodać je samodzielnie za pomocą tagu link z typem image/svg+xml, oprócz tych plików.
Prywatność
Ikony, pliki ICO i ZIP są tworzone w przeglądarce. Obraz ani tekst nie są przesyłane, zapisywane ani uwzględniane w statystykach.