Generator favicon

Czym jest favicon?

To mała ikona, która reprezentuje stronę na karcie przeglądarki, w zakładkach, historii, wynikach wyszukiwania na telefonie i na ekranie głównym smartfona, gdy przypniesz tam stronę. Bez faviconu przeglądarka pokazuje ogólną ikonę, przez co strona wygląda na niedokończoną.

Tworzenie faviconu

Wybierz obraz, najlepiej kwadratowy, o wymiarach co najmniej 512 × 512 pikseli. Toolo wygeneruje:

• plik favicon.ico, klasyczny format rozpoznawany wszędzie;
• pakiet PNG w nowoczesnych rozmiarach, do pobrania jako ZIP.

Instalacja plików

Umieść favicon.ico w katalogu głównym strony: przeglądarki szukają go automatycznie pod adresem /favicon.ico. Następnie dodaj w sekcji <head> stron odpowiednie znaczniki, na przykład:

• <link rel="icon" href="/favicon.ico" sizes="any">
• <link rel="apple-touch-icon" href="/apple-touch-icon.png">

W przypadku instalowalnej aplikacji webowej zadeklaruj ikony 192 i 512 w pliku manifest.webmanifest.

Jak zrobić dobrą małą ikonę

• Upraszczaj: przy 16 pikselach szczegółowe logo zamienia się w plamę. Litera, symbol lub prosty kształt sprawdzą się lepiej.
• Dbaj o kontrast: ikona musi być czytelna zarówno na jasnej, jak i ciemnej karcie.
• Wykorzystaj powierzchnię: zostaw niewielki margines wokół motywu.

Nowy favicon się nie wyświetla

Przeglądarki długo przechowują favicony w pamięci podręcznej. Odśwież stronę z pominięciem pamięci podręcznej, otwórz ją w oknie prywatnym albo dodaj parametr wersji do adresu, np. /favicon.ico?v=2.

Najczęstsze pytania

Czy obraz musi być kwadratowy?

Najlepiej tak. Obraz niekwadratowy zostanie dopasowany, co może go lekko zniekształcić. Przytnij go najpierw do kwadratu narzędziem Przytnij obraz.

Czy mój obraz jest wysyłany na serwer?

Nie. Ikony są generowane w przeglądarce; obraz nie opuszcza urządzenia.

Czy przezroczysty PNG zachowa przezroczystość?

Tak. Przezroczystość zostaje zachowana w pliku ICO i w plikach PNG.

Czy naprawdę potrzebne są wszystkie rozmiary?

Do kart wystarczy favicon.ico. Pliki PNG 180, 192 i 512 poprawiają wygląd na ekranie głównym telefonów i w aplikacjach webowych.