Generator favicon w przeglądarce – kompletny pakiet ikon
Generator favicon przekształca dowolny obraz w kompletny pakiet ikon dla stron internetowych bezpośrednio w przeglądarce. Narzędzie pozwala przygotować wielorozdzielczościowy plik favicon.ico, formaty PNG dla przeglądarek i urządzeń mobilnych oraz manifest PWA. Cały proces odbywa się lokalnie na Twoim urządzeniu, gwarantując pełną prywatność grafiki.
Jak dodać favicon do strony krok po kroku
Aby dodać ikonę do swojej witryny, wystarczy wygenerować pakiet plików i wkleić odpowiednie znaczniki w kodzie strony.
- Przeciągnij plik graficzny do obszaru narzędzia lub kliknij, aby wybrać go z dysku.
- W sekcji Dopasowania zmień w razie potrzeby marginesy wewnętrzne oraz kolor tła.
- Pobierz archiwum ZIP, rozpakuj pliki i wgraj je do katalogu głównego (folder root) na swoim serwerze.
- Otwórz plik favicon-tags.html, skopiuj zawarty w nim kod i wklej go w sekcji <head> swoich podstron.
Konwerter PNG na ICO i obsługa formatów graficznych
Narzędzie służy jako szybki konwerter png na ico, jednak akceptuje również inne popularne formaty plików graficznych. Możesz użyć obrazu PNG z przezroczystością, pliku wektorowego SVG, zdjęcia JPG, a także formatów WebP czy GIF (przetwarzana jest pierwsza klatka).
Najostrzejszy rezultat uzyskasz, wybierając kwadratowy plik źródłowy o wymiarach co najmniej 256×256 pikseli. W przypadku grafik o innych proporcjach narzędzie automatycznie wyśrodkuje obraz.
Favicon wymiary – jakie rozmiary zawiera pakiet
Współczesne przeglądarki i systemy operacyjne wymagają ikon w różnych rozdzielczościach. Wygenerowany pakiet ZIP zawiera pełen zestaw gotowy do użycia:
- favicon.ico – wielorozdzielczościowy plik zawierający ikony 16×16, 32×32 i 48×48 pikseli dla tradycyjnych przeglądarek.
favicon-16x16.pngifavicon-32x32.png– ikony wyświetlane na kartach przeglądarki.favicon-48x48.png– ikona wymagana przez wyszukiwarkę Google na liście wyników mobilnych.- apple-touch-icon.png (180×180) – ikona wykorzystywana przez urządzenia iPhone i iPad.
icon-192.pngiicon-512.png– ikony ekranu głównego dla systemu Android oraz aplikacji PWA.
Favicon SVG czy ICO – co wybrać dla witryny
Wybór między rozwiązaniem favicon svg czy ico sprowadza się do kwestii kompatybilności. Plik SVG oferuje skalowanie wektorowe, ale nie wszystkie starsze przeglądarki obsługują go poprawnie jako ikonę karty.
Klasyczny plik favicon.ico wciąż pozostaje najbardziej niezawodnym wariantem zapasowym (fallback). Stosowanie pełnego zestawu łączącego format favicon.ico oraz ikony PNG w sekcji <head> daje gwarancję prawidłowego wyświetlania na każdym urządzeniu.
Favicon Apple Touch Icon oraz manifest PWA
Gdy użytkownik dodaje witrynę do ekranu początkowego w systemie iOS Safari, przeglądarka pobiera plik apple-touch-icon.png w rozmiarze 180×180 pikseli. Ponieważ iOS nie obsługuje przezroczystego tła w tym miejscu, narzędzie wypełnia je jednolicie kolorem wskazanym w panelu Dopasowania lub kolorem białym.
Pakiet zawiera także plik site.webmanifest w formacie JSON, który wskazuje przeglądarkom mobilnym (takim jak Chrome) ikony 192×192 i 512×512 oraz podstawowe parametry instalacji strony jako aplikacji PWA.
Generator favicon online działający bez przesyłania plików
Typowy generator favicon online wymaga wysłania logo na serwer w celu zmiany rozmiaru. Ten generator favicon ico wykonuje całe przetwarzanie lokalnie w przeglądarce przy użyciu silnika Canvas API.
Twoja grafika nie opuszcza urządzenia, nie jest nigdzie zapisywana, a proces generowania i pakowania archiwum ZIP trwa ułamek sekundy i nie wymaga zakładania konta.
Często zadawane pytania
Co to jest favicon i do czego służy?
Favicon to mała ikona strony internetowej wyświetlana na kartach przeglądarki, w zakładkach, historii oraz na listach wyników wyszukiwania. Ułatwia użytkownikom natychmiastowe rozpoznanie witryny wśród wielu otwartych kart i buduje spójny wizerunek marki. Współczesny pakiet ikon obejmuje również wersje dla ekranów głównych smartfonów.
Jakie są zalecane wymiary pliku favicon?
Nie ma jednego uniwersalnego rozmiaru. Nowoczesne strony stosują zestaw rozdzielczości: 16×16 i 32×32 dla kart przeglądarki, 48×48 dla wyników Google, 180×180 dla iOS Safari oraz 192×192 i 512×512 dla ekranu głównego Androida i PWA. Uniwersalny plik favicon.ico pakuje w sobie rozmiary 16×16, 32×32 i 48×48.
Jak wygenerować favicon z pliku PNG lub SVG?
Wystarczy przeciągnąć obraz PNG lub SVG do okna narzędzia i pobrać gotowe archiwum ZIP. Narzędzie automatycznie przeskaluje grafikę, utworzy plik favicon.ico oraz ikony PNG w wymaganych rozmiarach, generując przy tym gotowy kod HTML do wklejenia na stronie.
Czym różni się plik favicon.ico od ikon PNG?
Plik favicon.ico to pojedynczy kontener zawierający w sobie kilka rozdzielczości naraz, stanowiący tradycyjny wariant zapasowy dla starszych przeglądarek. Ikony PNG to osobne pliki w wyższych rozdzielczościach, wywoływane w kodzie HTML dla konkretnych przeglądarek i systemów mobilnych. Zaleca się stosowanie obu formatów jednocześnie.
Co to jest plik site.webmanifest i po co się go stosuje?
Plik site.webmanifest to niewielki plik JSON informujący przeglądarki mobilne o sposobie wyświetlania witryny po zapisaniu jej na ekranie głównym. Wskazuje on ikony w rozmiarach 192×192 i 512×512 pikseli, co jest wymagane przez aplikacje Progressive Web Apps (PWA).
Dlaczego ikona apple-touch-icon ma wypełnione tło?
System iOS na urządzeniach iPhone i iPad nie obsługuje przezroczystości w ikonach skrótów na ekranie początkowym. Narzędzie automatycznie wypełnia tło pliku apple-touch-icon.png kolorem wybranym w panelu Dopasowania lub kolorem białym, zapobiegając powstawaniu czarnych lub zniekształconych pól.
Dlaczego nowa ikona nie wyświetla się od razu po podmienie plików?
Przeglądarki internetowe oraz hostingi bardzo silnie zapisują ikony w pamięci podręcznej (cache). Aby wymusić odświeżenie ikony, wykonaj tzw. twarde odświeżenie strony za pomocą skrótu Ctrl+F5 (lub Cmd+Shift+R na Macu) albo wyczyść pamięć podręczną przeglądarki.
Jak dodać ikony wygenerowane przez narzędzie w systemie WordPress?
W WordPressie ikonę można ustawić w menu Dostosuj, wybierając zakładkę Tożsamość witryny i opcję Ikona witryny. Alternatywnie wygenerowane pliki można wgrać przez FTP do katalogu głównego strony i wkleić kod z pliku favicon-tags.html do sekcji head w nagłówku motywu.
Polecane
-
The $100 Startup (Chris Guillebeau, po angielsku)Strona ma już ikonę, teraz niech zarabia
-
Tablet graficzny Wacom Intuos SNarysuj własne logo i ikonę odręcznie
-
Przenośny monitor InnoView 15,6"Drugi ekran do budowy strony
Pomaga utrzymać narzędzia za darmo. ✨
Zdjęcia poglądowe. Jestem Partnerem Amazon i otrzymuję wynagrodzenie z tytułu określonych zakupów dokonywanych za moim pośrednictwem.
