Konwerter ICO online – zamiana obrazu na ikonę i favicon

Konwerter ICO online: zamiana PNG, JPG, WEBP, BMP i GIF na ikonę

Konwerter obrazków do formatu ICO zamienia zwykłe grafiki PNG, JPG, WEBP, BMP lub GIF w ikony ICO. Wybierasz plik z dysku albo wklejasz adres URL obrazu, ustawiasz rozmiar ikony i sposób dopasowania do kwadratu, uruchamiasz konwersję, a po chwili pobierasz gotowy plik favicon.ico, którego możesz użyć jako favicon, ikony aplikacji Windows lub skrótu na pulpicie.

Czym jest format ICO i do czego służy

Format ICO powstał specjalnie z myślą o ikonach systemowych i aplikacyjnych. W przeciwieństwie do zwykłych grafik, takich jak PNG czy JPG, jeden plik ICO może przechowywać kilka rozmiarów tej samej ikony. Dzięki temu system automatycznie dobiera najlepszą wersję w zależności od miejsca wyświetlania ikony.

Wiele rozdzielczości w jednym pliku ICO

Pojedynczy plik ICO może zawierać na przykład ikony 16x16, 32x32, 48x48 i 64x64 piksele. System Windows wykorzystuje małą wersję tam, gdzie ikona jest niewielka, na przykład na pasku tytułu, a większą w widoku pulpitu, menu Start czy w eksploratorze plików. Wszystko dzieje się automatycznie, bez potrzeby ręcznego podmieniania obrazków.

Ikony pozostają więc ostre i czytelne niezależnie od miejsca, w którym są wyświetlane. Nie musisz przygotowywać osobnych plików PNG dla każdego rozmiaru, wystarczy odpowiednio zbudowany plik ICO.

Zgodność z systemami i przeglądarkami

Format ICO jest natywnie obsługiwany przez system Windows oraz wykorzystywany w przeglądarkach internetowych do favicon. Plik /favicon.ico z katalogu głównego witryny przeglądarki odczytują nawet wtedy, gdy strona nie wskazuje go żadnym znacznikiem w kodzie, dlatego to najbezpieczniejszy format ikony dla każdej strony www.

Skalowanie bez utraty czytelności

Gdy w jednym pliku umieszczasz kilka rozdzielczości, ikona nie musi być sztucznie rozciągana ani pomniejszana przez system. Zamiast tego wybierana jest wersja przygotowana dokładnie pod dany rozmiar. Krawędzie pozostają ostre, szczegóły czytelne, a ikonę łatwo rozpoznać nawet na małych ekranach i w gęstym widoku listy plików.

Jak działa konwerter ICO krok po kroku

Konwersja odbywa się na serwerze webp.pl, a przesłany obraz jest usuwany zaraz po utworzeniu ikony. Nie potrzebujesz żadnej specjalistycznej wiedzy o formatach ikon ani dodatkowego oprogramowania.

Obsługiwane formaty graficzne

• PNG – najlepszy wybór dla grafik z przezroczystością i ostrymi krawędziami.
• JPG i JPEG – dla zdjęć oraz obrazów bez kanału alfa; ich tło pozostanie w ikonie kryjące.
• WEBP – także z przezroczystością, więc nie trzeba go najpierw zamieniać na PNG.
• BMP – klasyczny format bitmapowy stosowany w starszych projektach.
• GIF – do ikony trafia pierwsza klatka, animacja nie jest zachowywana.

Maksymalną wagę przesyłanego pliku formularz podaje przy polu wyboru. Ten sam limit obowiązuje dla obrazu pobieranego z adresu URL.

Konwersja krok po kroku

1. Przeciągnij plik na pole „Prześlij z urządzenia” albo kliknij je i wskaż obrazek z dysku. Możesz też przełączyć się na „Użyj adresu URL” i wkleić link do publicznie dostępnego obrazu.
2. Wybierz rozmiar pliku ikony: zestaw „Favicon strony” (16, 32 i 48 px), „Wszystkie rozmiary” (9 warstw od 16 do 256 px) albo jeden rozmiar z listy.
3. Jeśli obraz nie jest kwadratem, zdecyduj, jak go dopasować: wpasuj, przytnij albo rozciągnij.
4. Kliknij „Konwertuj do ICO” i poczekaj kilka sekund.
5. Sprawdź podgląd ikony na jasnej i ciemnej karcie przeglądarki oraz w skalach 16, 32 i 64 px, a potem kliknij „Pobierz plik .ICO”. Plik zapisze się pod nazwą favicon.ico.

Prostokątny obraz a kwadratowa ikona

Każda warstwa pliku ICO jest kwadratem, więc prostokątne logo trzeba najpierw doprowadzić do kwadratu. Narzędzie robi to na jeden z trzech sposobów:

• Wpasuj – cały obraz trafia na kwadratowe, przezroczyste tło, a puste pasy powstają przy krótszych bokach.
• Przytnij – zostaje środkowy kwadrat o boku równym krótszemu bokowi obrazu, brzegi dłuższego boku są odcinane.
• Rozciągnij – obraz jest ściskany do kwadratu, przez co zmieniają się proporcje.

Przykład dla logo 800 × 400 px. Przy opcji „Wpasuj” powstaje kwadrat pośredni 512 × 512 px (to górna granica, wystarczająca dla warstwy 256 px): logo zajmuje w nim 512 × 256 px, a nad nim i pod nim zostaje po 128 px przezroczystego marginesu. Przy „Przytnij” powstaje kwadrat 400 × 400 px wycięty ze środka, czyli z lewej i prawej strony znika po 200 px. Kwadratowego obrazu narzędzie nie zmienia, więc wybór dopasowania nie ma wtedy znaczenia.

Rozmiary ikon ICO i waga pliku

Najpopularniejsze rozmiary ikon ICO

• 16x16 pikseli – ikony w paskach tytułowych, kartach przeglądarki i listach plików.
• 32x32 piksele – typowy rozmiar ikon w systemie Windows i favicon na ekranach o dużej gęstości pikseli.
• 48x48 pikseli – większe skróty na pulpicie i w menu Start.
• 64x64 piksele i więcej – widoki dużych ikon oraz ekrany wysokiej rozdzielczości.

W wielu projektach wystarczy zestaw 16x16, 32x32 i 48x48, czyli dokładnie opcja „Favicon strony”. Jeśli plik ma służyć jako ikona programu lub folderu w Windows przy powiększonej skali ekranu, wybierz „Wszystkie rozmiary”, które dokładają warstwy aż do 256 × 256 px.

Głębia kolorów i przezroczystość

Konwerter zapisuje każdą warstwę jako bitmapę 32-bitową: 24 bity na kolor i 8 bitów kanału alfa, czyli przezroczystości, a do tego 1-bitową maskę dla starszych programów. Osobnej opcji 24-bitowej nie ma, bo nie jest potrzebna: obraz bez przezroczystości ma po prostu w pełni kryjący kanał alfa.

Jeśli tworzysz ikonę z logo, symbolem lub nieregularnym kształtem, przygotuj źródłowy plik PNG z przezroczystym tłem. Dzięki temu ikona będzie dobrze wyglądała na różnych tłach systemowych i w różnych motywach kolorystycznych. Białe tło z pliku JPG zostanie w ikonie, więc możesz je wcześniej zdjąć narzędziem usuwanie tła w prostym trybie.

Ile waży plik ICO

Warstwy ICO z tego narzędzia nie są kompresowane, więc waga rośnie z kwadratem boku. Wartości poniżej odpowiadają opcjom z listy rozmiarów:

Jak to policzyć dla zestawu „Favicon strony”: warstwa 48 px to 40 B nagłówka + 48 × 48 × 4 B pikseli (9 216 B) + maska 384 B (wiersz 48 bitów zaokrąglony do 8 bajtów, razy 48 wierszy), razem 9 640 B. Do tego 6 B nagłówka pliku, 3 × 16 B katalogu warstw oraz warstwy 16 px (1 128 B) i 32 px (4 264 B), co daje 15 086 B. Na favicon strony w zupełności wystarczą trzy małe warstwy, a pełny zestaw ma sens przy ikonach programów.

Najlepsze praktyki przy tworzeniu ikon z obrazków

Sam konwerter rozwiązuje techniczną część pracy, ale jakość końcowej ikony zależy także od tego, jak przygotujesz grafikę wejściową.

Projektuj z myślą o małych rozdzielczościach

Ikona 16x16 pikseli ma bardzo ograniczoną przestrzeń. Zbyt duża liczba detali sprawi, że obrazek stanie się nieczytelny. Uprość kształty, ogranicz liczbę kolorów i zadbaj o mocny kontrast, tak aby nawet w najmniejszym rozmiarze ikona pozostała rozpoznawalna. Pełna nazwa firmy w 16 px zamienia się w szarą kreskę, lepiej sprawdza się pierwsza litera lub sam sygnet.

Wykorzystuj przezroczystość tam, gdzie ma to sens

Kanał alfa pozwala tworzyć nieregularne kształty bez twardego prostokątnego tła. Taka ikona lepiej komponuje się z różnymi motywami systemu i kolorami pulpitu. Jeśli logo ma wolne przestrzenie, cienie lub obłe krawędzie, przygotuj źródłowy obrazek PNG z przezroczystością.

Testuj ikony w docelowym środowisku

Przed zaakceptowaniem finalnej wersji ikony dobrze jest sprawdzić, jak prezentuje się ona:

• jako favicon w zakładkach przeglądarki i w pasku adresu,
• w eksploratorze plików w widoku małych i dużych ikon,
• w menu Start, na pulpicie i na pasku zadań obok innych ikon systemowych.

Taki test pozwala wychwycić problemy z kontrastem, grubością linii czy widocznością drobnych elementów i w razie potrzeby wrócić do pliku źródłowego, aby poprawić projekt.

Osobna grafika dla najmniejszego rozmiaru

Ten konwerter tworzy wszystkie warstwy z jednego obrazu. Jeśli wersja 16 px wychodzi nieczytelna, przygotuj uproszczoną grafikę z grubszymi liniami i wygeneruj z niej osobny plik 16 × 16 px, a większe rozmiary zostaw z pełnego logo.

Przykładowe zastosowania konwersji do ICO

• Przygotowanie favicony dla nowej strony internetowej lub sklepu online.
• Tworzenie zestawu ikon dla aplikacji desktopowych lub paneli administracyjnych.
• Zamiana grafiki logo firmy na ikonę skrótu w systemie Windows.
• Personalizacja ikon folderów, dysków i skrótów na pulpicie.

Favicon wgraj do katalogu głównego strony jako favicon.ico i dodaj w sekcji head znacznik <link rel="icon" href="/favicon.ico">, który narzędzie podaje do skopiowania pod wynikiem. W Windows ikonę skrótu zmienisz we Właściwościach skrótu przyciskiem „Zmień ikonę”, a ikonę folderu we Właściwościach, na karcie „Dostosowywanie”.