CodeKitHubCzym jest to narzędzie?
Plik favicon.ico to nie tylko mały obrazek — to format kontenerowy, który może zawierać kilka rozmiarów tej samej ikony w jednym pliku, dzięki czemu przeglądarka, pasek zadań lub pasek zakładek mogą wybrać rozdzielczość, która wygląda najostrzej w miejscu, w którym jest wyświetlana. Zmiana nazwy pliku PNG na favicon.ico nie zapewnia takiego efektu: jest to pojedynczy obraz z niewłaściwym rozszerzeniem pliku i chociaż niektóre przeglądarki to tolerują, wiele narzędzi, robotów indeksujących i starszych przeglądarek odczytujących surowe bajty oczekuje prawdziwej struktury kontenera ICO i w takim przypadku nie wyświetli ikony lub wyświetli pustą ikonę.
To narzędzie tworzy rzeczywisty plik ICO: renderuje plik SVG w rozmiarach 16×16, 32×32 i 48×48, wewnętrznie koduje każdy z nich jako plik PNG, a następnie pakuje wszystkie trzy do jednego prawidłowego pliku favicon.ico, wykorzystując ten sam format PNG-in-ICO, który jest obsługiwany przez wszystkie przeglądarki i systemy operacyjne od czasów Windows Vista. Oprócz tego otrzymujesz osobne pliki PNG o rozmiarach 180×180 (rozmiar używany przez system iOS dla ikony, gdy użytkownik dodaje Twoją witrynę do ekranu głównego) oraz 192×192 / 512×512 (rozmiary pobierane z manifestu aplikacji internetowej przez systemy Android i monity instalacyjne PWA).
Dlaczego warto go używać?
- Tworzy prawdziwie poprawny plik favicon.ico o wielu rozdzielczościach, a nie po prostu plik PNG o zmienionej nazwie.
- W jednym przebiegu obejmuje wszystkie rozmiary ikon potrzebne w rzeczywistym wdrożeniu: 16, 32, 180, 192, 512 pikseli.
- Gotowy do wklejenia kod HTML <head> — bez zgadywania, jakie wartości mają atrybuty rel, size i type.
- Pliki SVG o nieregularnych kształtach są wyśrodkowywane na przezroczystym kwadracie zamiast być rozciągane.
- Wszystko jest renderowane lokalnie w przeglądarce; plik SVG nigdy nie jest przesyłany.
Jak używać
- Kliknij pole lub przeciągnij na nie plik z logo w formacie SVG.
- Narzędzie to automatycznie generuje obrazek w każdym rozmiarze favikony — nie trzeba konfigurować żadnych ustawień.
- Pobierz plik favicon.ico do katalogu głównego swojej witryny, a także poszczególne ikony w formacie PNG.
- Skopiuj fragment kodu HTML i wklej go do sekcji <head> swojej strony.
Przykład
Wejście
logo.svg — a company mark, 3 KB vectorWynik
favicon.ico (16/32/48px combined), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngWystarczy jeden plik SVG, a wszystkie pliki ikon potrzebne do rzeczywistego wdrożenia są już gotowe.
W jakich miejscach stosuje się poszczególne rozmiary ikon
| Plik | Rozmiar | Stosowane do |
|---|---|---|
| favicon.ico | 16/32/48 pikseli (łącznie) | Karta przeglądarki, pasek zakładek, pasek zadań |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Rozwiązanie awaryjne dla przeglądarek, które preferują favikony w formacie PNG |
| apple-touch-icon.png | 180×180 | Ikona na ekranie głównym systemu iOS po dodaniu strony do ekranu głównego |
| icon-192.png | 192×192 | Ikona na ekranie głównym systemu Android, manifest aplikacji internetowej |
| icon-512.png | 512×512 | Monit o instalację aplikacji PWA, ikona na ekranie powitalnym systemu Android |
Dlaczego kod źródłowy SVG ma znaczenie
Ponieważ format SVG przechowuje kształty w postaci danych matematycznych, a nie pikseli, renderowanie go zarówno w rozmiarze 16 pikseli, jak i 512 pikseli opiera się na dokładnie tych samych danych ścieżki — nie ma artefaktów wynikających ze skalowania w przypadku dużych rozmiarów ani konieczności stosowania przybliżeń związanych z przyciąganiem do pikseli, na które narzędzie musiałoby iść na kompromis w przypadku małych rozmiarów. Jeśli dysponujesz jedynie logo w formacie PNG, to narzędzie nie będzie w stanie pomóc; najpierw przekonwertuj lub odtwórz logo w formacie SVG, ponieważ powiększenie małego pliku PNG do rozmiaru 512 pikseli dałoby jedynie rozmyty obraz.
Najczęściej zadawane pytania
Dlaczego po prostu nie zmienić nazwy pliku PNG na favicon.ico?
Plik .ico ma własny format kontenera binarnego (nagłówek ICONDIR opisujący liczbę zawartych w nim obrazów, po którym następuje wpis katalogowy dla każdego obrazu) — plik PNG przemianowany na .ico to wciąż po prostu plik PNG z nieprawidłowym rozszerzeniem. Większość nowoczesnych przeglądarek jest wyrozumiała i wyświetli go mimo wszystko, ale to narzędzie tworzy prawdziwy kontener ICO zawierający trzy rzeczywiste rozdzielczości, do czego ten format został zaprojektowany i czego oczekują bardziej rygorystyczne programy odczytujące.
Po co mi ikony w formacie PNG, skoro mam już plik favicon.ico?
Plik favicon.ico obsługuje wyłącznie klasyczny przypadek użycia w zakładkach przeglądarki i zakładkach. Plik PNG o wymiarach 180×180 jest używany przez system iOS, gdy użytkownik dodaje Twoją witrynę do ekranu głównego (apple-touch-icon), natomiast pliki PNG o wymiarach 192×192 i 512×512 są pobierane z manifestu Twojej aplikacji internetowej przez systemy Android i monity instalacyjne PWA. Bez nich ikona na ekranie głównym telefonu zostanie zastąpiona ogólnym zrzutem ekranu lub pustym kwadratem.
Moje logo nie jest kwadratowe — co się z nim stanie?
Logo jest wyśrodkowane względem przezroczystego kwadratu o rozmiarze odpowiadającym danemu rozmiarowi docelowemu, a nie rozciągane, dzięki czemu szerokie lub wysokie logo zachowuje prawidłowe proporcje, zamiast być spłaszczane do kształtu kwadratu.
Gdzie mam zapisać pobrane pliki?
Umieść pliki favicon.ico, apple-touch-icon.png, icon-192.png i icon-512.png w katalogu głównym swojej witryny (obok pliku index.html), a następnie wklej wygenerowane tagi <link> do sekcji <head> swojej strony.
Czy mój plik SVG został gdzieś przesłany?
Nie. Plik SVG jest renderowany na lokalnych elementach <canvas>, a pliki ICO/PNG są składane w przeglądarce. Żadne dane nie są wysyłane na serwer.