Plik .ico nadal jest oczekiwany w katalogu głównym witryny, a większość konwerterów online wymaga wysłania obrazu na serwer. Oto jak uzyskać poprawny favicon.ico z wieloma rozmiarami na podstawie PNG, bez wysyłania czegokolwiek.
.ico to nie tylko obraz ze zmienioną nazwą
Zmiana nazwy logo.png na favicon.ico nie wystarczy. ICO jest formatem kontenera z własnym nagłówkiem: opisuje liczbę obrazów, ich wymiary i położenie każdego obrazu w pliku. PNG ze zmienioną nazwą nie ma takiego nagłówka, więc bardziej rygorystyczne przeglądarki odmawiają jego wyświetlenia.
Poprawny ICO zawiera kilka rozdzielczości tej samej ikony. Przeglądarka odczytuje nagłówek i wybiera wariant najbliższy potrzebnemu rozmiarowi, bez powiększania.
Konwersja PNG na ICO w trzech krokach
Krok pierwszy: przygotuj źródło. Kwadratowy PNG o rozmiarze co najmniej 512×512 pikseli daje najlepszy efekt, bo każdy wariant powstanie przez zmniejszenie. Jeśli tło jest przezroczyste, zdecyduj, czy je zachować: sprawdza się na karcie, ale iOS i Android zastąpią je czernią.
Krok drugi: wygeneruj rozdzielczości. Plik powinien zawierać co najmniej 16×16, 32×32 i 48×48. Zmiana rozmiaru musi korzystać z dobrego filtra resamplingu, inaczej małe warianty będą nieczytelne.
Krok trzeci: połącz obrazy. Trzy obrazy trafiają do jednego kontenera ICO z nagłówkiem opisującym każdy wpis. Wynik umieść w katalogu głównym witryny pod nazwą favicon.ico, gdzie przeglądarki znajdą go nawet bez znacznika HTML.
Dlaczego lokalna konwersja ma znaczenie
Większość konwerterów PNG na ICO wysyła plik na serwer, który go przetwarza i odsyła wynik. Twoje logo, często jeszcze przed publiczną premierą, trafia na obcy komputer, którego nie kontrolujesz, zgodnie z polityką przechowywania, której nie znasz.
Nowoczesna przeglądarka potrafi jednak zrobić wszystko sama: odczytać PNG, zmienić rozmiar na canvas, zakodować każdy wariant i złożyć kontener ICO. Tak działa LFFavicon. Żadne żądanie nie przesyła obrazu, a zamknięcie karty usuwa wszystko.
Korzyści są praktyczne: konwersja jest natychmiastowa, działa offline po wczytaniu strony, bez kolejki i dziennych limitów.
Sam .ico już nie wystarcza
Konwersja PNG na ICO obsługuje karty i starsze programy, ale pomija trzy zastosowania: nowoczesne przeglądarki preferujące zawsze ostry SVG, ekran główny iOS wymagający nieprzezroczystego PNG 180×180 oraz Androida odczytującego manifest aplikacji.
Skoro przetwarzasz obraz, utwórz od razu cały zestaw. Generator robi właśnie to: jedno źródło zasila .ico, SVG, ikonę Apple Touch i ikony manifestu, z podglądem każdego zastosowania przed pobraniem.
Źródła pierwotne
Najczęstsze pytania
Jaki rozmiar PNG jest potrzebny do utworzenia ICO?
Kwadrat o rozmiarze co najmniej 512×512 pikseli. Poniżej 128×128 większe ikony w pakiecie muszą zostać powiększone i będą rozmyte. SVG jest jeszcze lepszy, ponieważ nie ma limitu rozdzielczości.
Czy .ico zachowuje przezroczystość?
Tak, format ICO obsługuje pełny kanał alfa, a przezroczysty PNG pozostaje przezroczysty na karcie. Uważaj jednak na ikonę iOS: system wypełnia przezroczyste obszary czernią, więc dodaj jej tło.
Gdzie umieścić plik favicon.ico?
W katalogu głównym domeny, pod adresem https://yoursite.com/favicon.ico. Przeglądarki i roboty zwyczajowo odwołują się do tego adresu nawet bez deklaracji w znaczniku link.