Formaty plików
Co to jest ICO? Pliki ikon i favikony w pigułce
ICO to format ikon Windows, który przechowuje kilka rozmiarów w jednym pliku. Wyjaśniamy jego budowę, historię favikony i to, jakich rozmiarów potrzebujesz dziś.
Autor: Hemen Dönüştür Editör EkibiOpublikowano: 7 min czytania
ICO to format, którego Windows używa do ikon programów i folderów, a sieć do małej ikony strony w karcie przeglądarki (favikony). Od innych formatów obrazów odróżnia go to, że jeden plik może zawierać kilka rozmiarów tej samej ikony. W tym artykule wyjaśniamy wewnętrzną budowę pliku ICO, jego rozwój w kolejnych wersjach Windows, historię favikony, rozmiary potrzebne dziś oraz sposób poprawnego tworzenia plików ICO.
Czym jest ICO?
ICO (rozszerzenie .ico) to format kontenera zdefiniowany przez Microsoft dla zasobów ikon. Plik ICO zaczyna się od „katalogu ikon”, który wymienia każdy obraz w pliku (na przykład 16x16, 32x32 i 48x48 pikseli) jako osobną pozycję. Windows lub przeglądarka wybiera potem rozmiar, który najlepiej pasuje do miejsca wyświetlania ikony.
Oficjalny typ MIME zarejestrowany w IANA to image/vnd.microsoft.icon, ale programy Microsoftu i wiele serwerów nadal używa image/x-icon. Format CUR dla kursorów myszy jest niemal identyczny; w polu typu w katalogu ma wartość 2 zamiast 1 i przechowuje punkt kliknięcia kursora (hotspot).
Historia: od ikon Windows do favikony
- Windows 1.0: ikony były monochromatyczne.
- Windows 3.0: pojawiła się znana dziś struktura oparta na katalogu, mieszcząca kilka obrazów.
- 1995: artykuł Johna Hornicka „Icons” opublikowany przez Microsoft szczegółowo udokumentował strukturę ICO i radził programistom dołączać co najmniej obrazy 16x16 (16 kolorów), 32x32 (16 kolorów) i 48x48 (256 kolorów).
- Marzec 1999: Internet Explorer 5 jako pierwsza przeglądarka obsłużył favikony. Plik
favicon.icow katalogu głównym strony był wyświetlany w ulubionych i na pasku adresu. - Windows XP: do obrazów 32-bitowych dodano 8-bitowy kanał alfa, co umożliwiło miękkie, półprzezroczyste krawędzie.
- Windows Vista: dodano obrazy 256x256 i kompresję PNG wewnątrz ICO.
- 2003: typ MIME
image/vnd.microsoft.iconzostał zgłoszony do IANA przez stronę trzecią.
Budowa pliku ICO
Katalog ikon (ICONDIR)
Plik zaczyna się od 6-bajtowego nagłówka: pola zarezerwowanego (0), typu (1 dla ikon, 2 dla kursorów) i liczby obrazów. Dla każdego obrazu następuje 16-bajtowa pozycja katalogu.
Pozycja katalogu (ICONDIRENTRY)
| Pole | Znaczenie |
|---|---|
| bWidth, bHeight | Szerokość i wysokość (po 1 bajcie). Wartość 0 oznacza 256 pikseli. |
| bColorCount | Liczba kolorów palety (0 dla 8 bitów i więcej) |
| wPlanes, wBitCount | Płaszczyzny kolorów i liczba bitów na piksel |
| dwBytesInRes | Rozmiar danych obrazu w bajtach |
| dwImageOffset | Miejsce w pliku, w którym zaczynają się dane obrazu |
Ponieważ pola rozmiaru mają jeden bajt, obraz wewnątrz ICO może mieć najwyżej 256x256 pikseli.
Dane obrazu: BMP lub PNG
W klasycznym ICO każdy obraz to BMP bez nagłówka pliku (DIB). Według artykułu Hornicka zawiera on obraz kolorowy (maskę XOR), po którym następuje 1-bitowa maska przezroczystości (maska AND), dlatego wysokość zapisana w nagłówku to łączna wysokość obu masek, czyli dwukrotność rzeczywistej wysokości. Od Windows XP obrazy 32-bitowe przenoszą kanał alfa bezpośrednio w danych pikseli.
Od Windows Vista pozycja może też zawierać zamiast BMP kompletny plik PNG. Osadzanie PNG, zwłaszcza w rozmiarze 256x256, znacznie zmniejsza plik. MDN zwraca uwagę, że PNG wewnątrz ICO nie był obsługiwany przed Vistą i może sprawiać kłopoty w starych programach, ale aktualne przeglądarki i wersje Windows odczytują oba rodzaje.
Jakich rozmiarów potrzebujesz?
Ikony aplikacji Windows
Aktualne wytyczne Microsoftu dotyczące ikon aplikacji mówią, że aplikacja Win32 powinna zawierać co najmniej rozmiary 16x16, 24x24, 32x32, 48x48 i 256x256. Jeśli Windows nie znajdzie dokładnego dopasowania, zmniejsza najbliższy większy rozmiar; gdy obecny jest obraz 256-pikselowy, ikona jest zawsze tylko zmniejszana, nigdy powiększana. Przy skali 100% pasek tytułu i menu kontekstowe używają na przykład 16 pikseli, a pasek zadań 24; przy 200% stają się one odpowiednio 32 i 48.
Favikony dla stron internetowych
W sieci działa to inaczej. Zgodnie z HTML Standard, jeśli strona nie ma linku rel="icon", przeglądarki mogą pobrać /favicon.ico z katalogu głównego strony. Trzymanie favicon.ico w katalogu głównym jest więc nadal dobrą praktyką, ale samo w sobie nie wystarcza:
- Wyszukiwarka Google wymaga kwadratowej (1:1) favikony o wymiarach co najmniej 8x8 pikseli i zaleca większą niż 48x48, aby dobrze wyglądała na różnych powierzchniach.
- Ekrany główne iPhone'a i iPada używają
apple-touch-iconw rozmiarze 180x180. - Android i aplikacje PWA oczekują w manifeście aplikacji internetowej ikon 192 i 512 pikseli oraz wersji „maskable” dla ikon adaptacyjnych.
- Aktualne przeglądarki obsługują też favikony SVG; jeden plik wektorowy obejmuje wszystkie rozmiary.
W praktyce umieszczenie w favicon.ico rozmiarów 16, 32 i 48 pikseli wystarcza dla przeglądarek na komputerach i starszych systemów, a większe rozmiary dostarcza się jako osobne pliki PNG.
Obsługa w systemach, przeglądarkach i programach
Windows natywnie odczytuje i zapisuje ICO; Eksplorator, skróty i pulpit pracują z nim bez problemu. Według MDN Chrome, Edge, Firefox, Opera i Safari wyświetlają pliki ICO. macOS używa do ikon aplikacji własnego formatu ICNS, ale Podgląd otwiera ICO. Edytory takie jak GIMP otwierają ICO jako plik warstwowy, z jedną warstwą na każdy rozmiar. MDN odradza ICO w zwykłych treściach stron i zaznacza, że favikony przeszły na PNG z elementem <link>.
Zalety i wady
| Zalety | Wady |
|---|---|
| Kilka rozmiarów i głębi kolorów w jednym pliku | Maksymalnie 256x256 pikseli |
| Powszechna obsługa w Windows | W sieci bez zastosowania poza favikonami |
| Kanał alfa i kompresja PNG (Vista i nowsze) | Stare pozycje oparte na BMP są duże i nieporęczne |
| Przeglądarki automatycznie szukają favicon.ico w katalogu głównym | Wymaga dedykowanego narzędzia; nie każdy program potrafi go zapisać |
Typowe problemy i jak je rozwiązać
Czy nie wystarczy zmienić nazwy PNG na .ico?
Niektóre przeglądarki to tolerują, ale to nie jest prawdziwy ICO: nie ma katalogu ikon i Windows nie zaakceptuje go jako ikony. Właściwym sposobem jest konwersja obrazu do prawdziwego ICO. Nasze narzędzia PNG do ICO i JPG do ICO zawsze zapisują kwadraty 16, 32 i 48 pikseli, a gdy obraz jest wystarczająco duży, dodają 64, 128 i 256. Każdy rozmiar jest osadzany jako PNG, więc przezroczystość zostaje zachowana.
Favikona jest rozmyta lub nieczytelna
Cienkie linie i mały tekst znikają przy 16 pikselach. Użyj wyrazistego, kontrastowego, prostego znaku; w razie potrzeby weź tylko symbol z logo. Najlepszy efekt daje kwadratowe źródło o wymiarach co najmniej 256x256, a najlepiej 512x512 pikseli.
Niekwadratowy obraz wygląda na ściśnięty lub rozciągnięty
Ikony są kwadratowe. Nasze narzędzia nigdy nie rozciągają obrazu: umieszczają go na środku kwadratu z zachowaniem proporcji, a brzegi zostawiają przezroczyste. Aby uzyskać idealny kwadrat, najpierw wytnij kwadratowy fragment narzędziem do przycinania obrazów.
Nowa favikona się nie pojawia
Przeglądarki długo przechowują favikony w pamięci podręcznej. Zwykle pomaga zmiana nazwy pliku lub dodanie parametru wersji (/favicon.ico?v=2) oraz sprawdzenie, czy serwer zwraca właściwy typ MIME. Ikona w wynikach wyszukiwania Google aktualizuje się dopiero po ponownym zindeksowaniu strony.
Windows nadal pokazuje starą ikonę
Windows przechowuje ikony w osobnej pamięci podręcznej. Często wystarczy przebudować aplikację i utworzyć skrót na nowo albo wylogować się i zalogować ponownie.
Wskazówki dotyczące konwersji
- Jeden ICO nie wystarczy dla strony internetowej: Generator favicon tworzy za jednym razem favicon.ico (16, 32 i 48 pikseli), favicon-48x48.png, apple-touch-icon.png (180 pikseli), icon-192.png, icon-512.png, ikonę maskable icon-512-maskable.png i site.webmanifest, a także icon.svg, gdy źródłem jest SVG. Daje też fragment kodu do wklejenia w sekcji
<head>strony. - Ikona Apple potrzebuje nieprzezroczystego tła: iOS pokazuje przezroczyste obszary jako czarne i sam zaokrągla rogi, dlatego generator favicon wypełnia apple-touch-icon wybranym przez Ciebie kolorem tła.
- Jeśli Twoje logo jest w SVG: wyrenderuj duży PNG za pomocą konwersji SVG do PNG i przekonwertuj go do ICO albo podaj SVG bezpośrednio generatorowi favicon.
Nasze narzędzia do ICO i favikon działają w Twojej przeglądarce; obraz nie jest przesyłany i nigdy nie opuszcza Twojego urządzenia.
Najczęściej zadawane pytania
Jaki jest maksymalny rozmiar obrazu ICO?
Pola szerokości i wysokości w pozycji katalogu mają po jednym bajcie, a 0 oznacza 256. Pojedynczy obraz wewnątrz ICO ma więc najwyżej 256x256 pikseli.
Używać ICO czy PNG jako favikony?
Obu. Plik favicon.ico w katalogu głównym z rozmiarami 16, 32 i 48 pikseli obsłuży starsze przeglądarki i automatyczne żądania; ikony PNG (i opcjonalnie SVG) zadeklaruj znacznikami <link> dla aktualnych przeglądarek i urządzeń mobilnych.
Czy ICO obsługuje przezroczystość?
Tak. Stare pliki ICO używają 1-bitowej maski, obrazy 32-bitowe mają pełny kanał alfa od Windows XP, a osadzony PNG przenosi przezroczystość od Visty.
Jak przekonwertować plik ICO do PNG?
Dodaj plik ICO do konwertera obrazów i wybierz PNG jako format docelowy. Jeśli plik zawiera kilka rozmiarów, używany jest największy.
Czy pliki ICO są używane na Macu?
macOS używa do ikon aplikacji formatu ICNS. W przypadku stron internetowych favicon.ico i ikony PNG działają w przeglądarkach na każdym systemie operacyjnym.
